fabiochiu/medium-articles huggingface dataset:
Smart Assets. Graphic design. Thats whats on the menu…
By: Daniel Succar
Tags: Graphic Design, Flatiron School, Homework, Blog

Graphic design. Thats whats on the menu today.

Design. It’s everywhere, makes you want to buy things, see things, experience things. It the join table between you, and the company. In my first few days of being a collegiate design student, my teacher told me that the average consumer will see 2000 ads a day but will actually pay attention to around 20, and retain information from 5–10. Ads are everywhere, commercials, billboards, flyers, FB ads. Ads are EVERYWHERE. But what differentiates effective design, and designs that get overlooked. It can all be boiled down to effective use of the principles and elements of design.

People love effective design, even if they don’t quite know why. It’s the same for the applications that we’re creating. the implementation of simple design principles will make your site more engaging, make it easier to use, and make it a more enjoyable experience.

Now, I suggest that everyone reading this do a quick google search on the principles and elements. But theres not enough time for me to cover all of them. In todays blog we’re going to focus on the principles and element… that I feel can help you the most with your future projects.

Color

its a element of design. an Unbelievably important one at that. It’s the first thing people see when viewing logo, website, or any marketing material. If you saw a boxing gym with pink logo and letterhead, what would you think. honestly, probably a boxing gym for women. Obvious example, but the truth is that we subconsciously associate so much with color. Fast food companies usually use red, cause it actually makes people hungry. Colors mean something. Colors mean everything.

Also usually a good tip to only pick two colors and stick to them, black & white. too many colors gets distracting. Also if your unsure if the colors that you chose go together please do a google search. clashing colors, like red and blue, can drive a designer absolutely nuts.

PS. Use white, use black, but (for the most part) STAY CLEAR OF GREY. (unlesss your making a rainy day site)

Emphasis

is directly related to effectiveness. Emphasize the most important or most used parts of your websites by making them EASY TO FIND, and convenient. In websites its important that you organize your site in a way that the user can get to where they want to go in three clicks. Thats a stretch goal, currently, what you need to be paying attention to, is making sure user can easily access the most important/pertinent information . make it clear and functional. thanks.
The Commonalities of Coding and Life
By: Nick Bazaldua
Tags: Flatiron School

This topic can have responses depending on the writers life and their outlook on code which is something that struck me as interesting when looking for the next topic to write about. Computers, for as smart as they are, can often be quite dumb as well when developing code. Due to this, you will often fail your first iterations of a feature for your app or a bug will pop up. When this occurs you could obviously just quit, or you can dig deep and fix the problem. While on your hunt to solve the problem you might end up pretty deep in the rabbit hole.

Life can be similar, the human experience innately has struggles and problems that need to be solved within it. We can either quit when we face a struggle or we can dig deep and find the resolve to find the solution to the issue, and sometimes it isn’t so easy to fix. We often find ourselves having to go one piece at a time to solve problems (similar to how fixing a bug can be done one step at a time.) Code can be beautiful, but it can also drive one crazy, I could think of another experience that is quite similar… ;)

In both code and in life we get to express ourselves and tell our stories in such interesting ways, and perhaps this is romanticizing the process of pressing keys to tell a computer how to do things, regardless it can’t be said that there are no parallels at all between coding and life.
Elements: The building blocks of React
By: Samir Jasarat
Tags: Flatiron School, React, JavaScript, HTML, Software Engineering

Elements in React essentially describe what it is that you would like to see on the screen. For example, the following is an element in React:

const element = <h1>Hello, friends</h1>;

Now, what makes React elements different from elements rendered in the DOM? Simply put, React elements are objects that are computationally easy to create. DOM updates are handled by the React DOM, which makes sure that React’s “virtual DOM” matches React elements. The lengthy process of having to select an element on the DOM, create a new element, and then append it to the DOM and the code involved in executing it becomes much more simplified.

To begin rendering elements in React, there has to be a root DOM node. Lets say that it exists within a div element in the html file:

<div id="root"></div>

Everything within the root DOM node will be managed by React DOM. If an app is built using just React, you’ll only have one root DOM node within the app. With this in mind, lets update the previous code to:

const element = <h1>Hello, friends</h1>;

ReactDOM.render(element, document.getElementById('root'));

This will render “Hello, friends” successfully to the screen. Now, in regards to updating React elements, React elements are “immutable”, meaning that once an element is created, its children and attributes can’t be changed. This is because a React element only represents the UI at a certain point in time. That being said, another way in which React makes rendering and updating elements more efficient is that React only updates what is necessary. Lets take a look at the following example of a ticking clock from the official React documentation:

function tick() {

const element = (

<div>

<h1>Hello, world!</h1>

<h2>It is {new Date().toLocaleTimeString()}.</h2>

</div>

);

ReactDOM.render(element, document.getElementById('root'));

}



setInterval(tick, 1000);

This calls ReactDOM.render every second from a setInterval() callback. If this code is examined using developer tools, you’ll see how React compares elements and its children to the previous one, and only updates what is necessary. You’ll see that a new updated <h2> element is not being rendered each time, but rather, all that is updated is the part of the element that displays the new time.
Distributed Denial of Service 101
By: Simon Kong
Tags: Flatiron School

Getty Images Stock Photo

Whether it’s Mr.Robot or a fictional hacking scene, it has always been an interesting topic for me. I decided to do some research on a particular cyber-attack called DDoS, and here is some basic information I found.

DDoS is a cyber-attack known to overwhelm a host or server and disrupting it services from the internet. In most cases for this to work, they will need multiple computers to work with and a target. In order for crackers to gain access to multiple machines, they deploy software known as Botnet. Botnet or “Zombie Army” is a way to gain access to multiple computers. This happens by sending malicious software to a computer which causes it to perform actions without notifying the user. With multiple computers at their disposal, they are ready and able to flood a server with a DDoS attack.

EMSISoft Blog

Couple Types of Attacks

HTTP Flood: Sending in multiple post requests to a server at a sluggish speed causes the server to have no resources for incoming connections.

R-U-Dead-Yet?(RUDY): Uses a form to send a HTTP post request that is broken into multiple packets. These packets are sent low speeds at random intervals, eventually taking all of the servers resources for handling incoming connections.

SYN Flood: Using TCP, a user is able to send a spoofed IP address making their computer to never receive a SYN-ACK packet causing the server to have half open connections from never receiving an ACK packet from the original sender. This lowers the amount of available connections on the server.

Ping Flood: Overwhelms the user with pings. Pings are an ICMP echo request. These requests send a certain amount of packets and receive an equal amount of packets. By abusing this request, both incoming and outgoing connections resources will be drained. Common type of DDoS attack.

Couples Types of Defenses

Firewall: Creating rules in the windows firewall can avoid DDoS attacks. However, this can be bypassed by attacking anything higher in the hierarchy than firewall such as routers or switches.

Switches: Switches have built-in software to defend against attacks such as traffic-shaping, rate-limiting, and spoofed IP filtering.
My second portfolio project: a React single-page application from scratch
By: Katie Loesch
Tags: Flatiron School, Productivity, React, Single Page Applications, Bootcamp Experience

Challenges: CSS

I opted out of using stylesheets because I wanted become more familiar with the CSS Grid Layout, which seemed quite challenging and counter-intuitive at first.

Solution: I found the step-by-step CSS Grid Layout Crash Course by Traversy Media, which is freely available on Youtube, particularly helpful and educational. It’s quite straightforward and easy to follow with great visual presentation and clear, concise explanations. I would definitely recommend this tutorial to anyone new to writing CSS and struggling with containers, margins, tables, frames or floats.

Challenges: API

While building the weather feature in the Home component and fetching data from the OpenWheather API, I encountered a “429” error, after which I wasn’t able to make any more API calls for a couple of hours.

“Error 429” seems to be sent as a response to users after they have exhausted the maximum number of API calls. According the OpenWeather’s FAQ:

Some online research revealed that it is a common issue for APIs to throw error messages for exceeding rate-limits when using unpaid subscriptions. API services can be limited by hour, day or month and may ask you to pay for API access after exceeding these limits rather than using free ones, as paid versions allow users to make a larger number of calls over as specific period of time.

This is obviously very inconvenient when trying to build applications. Thankfully I was able to successfully make API calls again after a couple of hours, but this is definitely something I will keep in mind when searching for APIs in the future.

Zendesk Developers have published some practices for avoiding rate limiting and Vinod Chandru published an article on how to handle API rate limits on TechBeacon explaining why rate limits are necessary and how they work.
Solving Leetcode 1732. Find the Highest Altitude
By: Rebecca Robbins
Tags: Coding, Flatiron School, Algorithms, JavaScript, Leetcode

As rains from Tropical Storm Henri give the city streets knee-deep with water, delays throughout the subway, and the ever-present flash flood warning, let’s take a minute, take a breath and stroll through this easy Leetcode, as we find the highest altitude.

The problem reads…

There is a biker going on a road trip. The road trip consists of n + 1 points at different altitudes. The biker starts his trip on point 0 with altitude equal 0 . You are given an integer array gain of length n where gain[i] is the net gain in altitude between points i ​​​​​​ and i + 1 for all ( 0 <= i < n) . Return the highest altitude of a point. Example 1: Input: gain = [-5,1,5,0,-7]

Output: 1

Explanation: The altitudes are [0,-5,-4,1,1,-6]. The highest is 1. Example 2: Input: gain = [-4,-3,-2,-1,4,3,2]

Output: 0

Explanation: The altitudes are [0,-4,-7,-9,-10,-6,-3,-1]. The highest is 0. Constraints: n == gain.length 1 <= n <= 100 -100 <= gain[i] <= 100

The examples give us a hint for one possible route to take to solve this algorithm, we could build a new array, starting at 0, and push the mathematical altitude changes, then take the max of the array. That’s one way, but I’m going to go a different way.

Instead of creating a new array and tracking all the numbers I’ll start by declaring two variables, one will hold the path as we travel through the array, and the other will hold the current highest altitude, so we can compare the path to the previous highest as we go.

First though, I’ll do a walkthrough of what I think the loop should look like. I do this often when I’m determining what needs to be included and to help find any potential snags or edge cases.

I like to manually step through a loop before I jump into code sometimes, to ensure that what I see in my mind will work out when I start coding it.

As we can see, with two variables declared at 0 when we start, we go through the array and add gain[i] to path and then immediately compare path to highest. If path is greater than highest , then we reassign highest to equal path , the current largest altitude gain.

Once we reach the end of our loop we just have to return highest , and we’re done! So let’s go ahead and turn this step through into actual JavaScript.

So first we can go ahead and declare the variables, and may as well throw in our return.

Next we build out our for loop and take care of our first step, and that’s adding each index of gain to our existing path. Lastly we’ll want to compare path to highest , and reassign if highest to equal path if path is greater than highest .

And there we have it. Leetcode’s easy algorithm number 1732! Thanks for reading and if you have any algorithm, or software engineering bootcamp questions drop ’em in the comments!
Creating an Adventure Game in Terminal using Ruby — Trek CLI
By: Jackson Prince
Tags: Flatiron School, Ruby, Programming, Games, Sql

By: Daniel Sanchez and Jackson Prince

Project Overview

Trek is an adventure RPG written in Ruby, employing ActiveRecord and SQLite to create, read, update and delete data. The game consists of five parts:

Sign in or Sign up . Choose your character. Use “currency” to buy items at a Walmart in preparation for your journey. Fight a lower level vigilante and (if you win) a boss. In between fights, take a break and generate API calls to “view a movie” and/or read the current headlines.

Special Features

Trek includes animations and a dynamic soundtrack. There is, for example, a tree that moves across the screen as you explore. There are songs played throughout the game related to what environment you’re in, including separate tracks for those who win and those who lose. Some fun audio and visual references include: Pokémon, Spiderman, Shrek, Toy Story, Wallace and Gromit and Drive.

In addition to the API get requests which allow you to “watch a movie” or “read the news,” enemy character names are randomly generated with a get request to the Star Wars API.

Gameplay

RubyGems

Formatting: gem ‘paint’ , gem ‘tty-prompt’

, API calls: gem 'rest-client' , gem 'json'

, Database: gem ‘sinatra-activerecord’ , gem 'sinatra' , gem ‘sqlite3’

, , Ruby: gem ‘rake’

File access: gem ‘require_all’

Development: gem 'pry

Known Bug

There is a small menu display error when browsing items in the shop. If your item bag is at max capacity (i.e. you’ve already bought 3 items), and you click on another item with the intent to buy it, the shop will display your projected stat increase as if you were able to hold all 4 items.

Future Versions

As it stands, after five days of work, Trek consists of a single level. Future versions of Trek would include more levels, more bosses, more encounters with vigilantes. We want to include smaller features such as “advil” (health boost) and “picking up the enemy’s weapon” after they are defeated. In lieu of going to the shop to buy more items, you should also have the option to go to a hotel and fully rejuvenate your health.

Github

Trek_RPG

Happy Coding

Jackson & Daniel
An Introduction to Gatsby
By: Robert Vidal
Tags: Flatiron School, Web Development, Programming, JavaScript, Software Development

What is GatsbyJS? Created in 2015, founders Kyle Mathews and Sam Bhagwat wanted to create a technology that would make building websites and web apps faster.

In short, Gatsby is a lightning fast, static site generator that utilizes ReactJS and GraphQL. Gatsby allows developers to get started on new projects quickly and efficiently because of their wide selection of website starters. These starter themes come bundled with pre-made functionality for a particular purpose like a portfolio website, blogging application, and many more. While the open source nature of Gatsby also makes it easy for outside developers to contribute to existing projects and develop new starter packs with different use cases.

Problems that used to take me weeks to solve in Backbone.js took me hours in React.js. Not only was I productive; my code felt remarkably simple. With Backbone.js, I always felt I was one or two slip-ups from the whole application spiraling out of control. With React, elegant and simple solutions seemed to come naturally from using the library. Again, I could feel things in web land were changing in a very big way.

What is a static website?

A static website is one that is stored exactly as it is rendered. A static site displays the same material to every visitor of your site. Pages in a static website are typically HTML documents available in the file system. Each page on a static website corresponds to that of one HTML file. Reused information like headers and footers is then rewritten in each HTML file to allow each web page to have consistent content.

What is a dynamic website?

On the opposite side of the spectrum, dynamically rendered sites use server technologies when the user arrives at the site. The dynamic site is then built for the visitor.

Pros to static sites

Higher level of security compared to dynamically rendered sites

Improved performance

Less difficult to create

Pros to dynamic sites

Changing multiple aspects of the site can be done quicker

Navigation manipulation is usually less tedious and less error prone compared to static sites

As you can see there definitely are some advantages to building a static site, especially in the case of building a personal website. Developers can get their projects rolling quickly and efficiently with Gatsby. Shown below are just a few of the available starters.

If you’ve been procrastinating a project for whatever reason, take a look at the Gatsby Starters for inspiration.

Resources
Divide and Conquer: A Big O Pattern
By: Thomas Muscarello
Tags: Big O, Flatiron School, JavaScript

As stated in my last post, I have been discussing Big O and how we can refactor our code to make it the most efficient it can be. To take a look at that post, click here.

Anyways, one common pattern we can use when trying to solve a Big O problem is to Divide and Conquer (DnC). What is DnC? When you divide and conquer, you are dividing a data set into smaller chunks, and then repeating a process with a subset of data. This type of pattern can greatly decrease the time complexity.

Imagine if you we given the following challenge:

Given a sorted array of integers, write a function called “search” that accepts a value and returns the index where the value passed to the function is located. If the value is not found, return -1

One way to solve this issue is by writing the following code:

This isn’t horrible, but the time complexity is O(n). However we are able to make that much quicker by doing the following:

Rather than the original linear search we can complete the task with a binary search. With this code, we are checking the middle of the array to see if it is greater or less than the given value. Then, if it isn’t equal, it moves to either the left or right depending on whether it is greater or less than. With this code, the time complexity is Log(n) and much quicker than the original.

Linear search goes through the entire array to try and find the answer. However, because we are working with a sorted array, we can divide it in half to try and find our answer. Once we divide the array, we then see if the value we are searching for is greater than or less than the middle.

This is just one example to how we can make our code quicker!
How to Play Audio while a Key is Held Down in Phaser 3
By: Sean Hetzel
Tags: Game Development, Phaser 3, JavaScript, Flatiron School

Photo by Hello Lightbulb on Unsplash

Problem:

Say your making a space shooter and want to play the sound of a gun firing while your spaceship is shooting. Or even something as simple as playing a walking sound while you walk. This is fairly simple and common in videogames. But there’s a bit of manual setup required. If your’re reading this article, your’re either too lazy to figure it out, or have been trying to figure it out for the past few hours and have been banging your head against the desk (like me). Anyway… the solution is below for you to copy and paste because I know that’s all you want 👇

Solution:

function init() {

isFlying: false,

}function preload(){

this.load.audio("rocket", "assets/rocket.mp3");

}function create(){

this.rocketSound = this.sound.add("rocket", {

volume: 1,

loop: true

});

} function update(){

if (this.cursors.right.isDown && this.isFlying === false ) {

this.rocketSound.play();

this.isFlying = true;

} else {

this.rocketSound.stop();

this.isFlying = false;

}

}

Explanation:

What we want is for the audio to:

Start playing once the key is pressed. Not play while it is already playing. Continue to loop through the track while the key is held down. Stop playing once the key is released.
What is Docker, and why is it useful for data science?
By: Aaron Abrahamson
Tags: Containers, Flatiron School, Docker, Data Science Education, Data Science

“© 2013–2019 Docker, Inc. All rights reserved.”

You are working on a project and you send your code to a colleague or friend to look it over. They run their analysis and it turns out your results came out differently! Issues like this can arise when your machine and your colleagues are running a different OS, different versions of R/Python, or different versions of a library (or anything else). Docker is a tool that can help fix this problem (and many other things too).

Docker is a platform to make it easy to create and deploy virtualized applications using a “container” system. This is how Docker explains what a container is on their website:

“A container is a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.”

Simply put, a container lets a data scientist or developer package an application or script with all of the libraries and dependencies it needs, and then share it all as one package. A container is comparable to a virtual machine but instead of simulating an entire independent operating system, a container uses the same main OS as your system. Because of this Containers are also much less resource intensive than a virtual machine. Because of this it’s common practice to have only one process running on a single container, and then connect them so they can communicate with each other.
Changing Gears: How I Decided to Study Programming and Change My Life
By: Natalie Galligan
Tags: Flatiron School, Programming, JavaScript, Career, Bootcamp

Changing Gears: How I Decided to Study Programming and Change My Life

I’ve been in tech and worked with developers since 2013, but whenever they talked programming, I felt like I suddenly was on a different planet where people spoke other languages. I had no idea what they were talking about.

It was ironic because I organized multiple developer conferences — droidcon NYC and droidcon SF, among many others.

Imagine this situation — you’ve just organized a successful developer conference and are now enjoying some well-deserved drinks at a conference party. You’re having a nice chat with some speakers about something not code related. Then somebody else joins and brings up one of the conference talks, and the whole group deep dives into the subject, switching from English to code talk.

You’re there smiling and trying to look like you’re not too out of place. Seem familiar?

I kept thinking it’d be nice to learn some code just to have a better idea of what it’s all about, but it never crossed my mind to completely switch gears to becoming a developer. Why would I set myself back and start with something completely new? I’d never be able to catch up with people who’ve been doing it for 10+ years.

Also, frankly, it was a lack of accessible role models. I’ve known women who were developers, but as most of them were speakers at my conference, I never identified myself with them . They were light years away. It never occurred to me that I could be like them — until I met somebody like me at a meetup.

She was a journalist before attending a coding bootcamp and becoming a full-stack engineer. I talked to her about what it was like and was intrigued by her experience. Suddenly, transitioning to be a software engineer seemed possible. So should I do it?

I spent a few weeks thinking about it and came up with these arguments in favor of it:
It’s Alive! React Component Lifecycle
By: Wendy Raven Mcnair
Tags: Flatiron School, React, Lifecycle, Components, Software Engineering

Image by sethJreid from Pixabay

I’d like to go more in depth on something I briefly touched on in my previous blog (React Technical Interview) and that’s the lifecycle of a React component. The definition of lifecycle in Webster’s dictionary is:

“a series of stages through which something (such as an individual, culture, or manufactured product) passes during its lifetime”

So the lifecycle of a React component can be described as the different stages through which a component passes during its existence.

The component lifecycle consists mainly of three stages; mounting (creation), updating, and unmounting (deletion). A lifecycle diagram cheat sheet is provided for reference at this link https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram.

This lifecycle structure allows for built-in events called lifecycle hooks or lifecycle methods. Programmers can override these methods and code desired behaviors into an app. Let’s cover a few of the methods that arise during a component’s lifecycle. They are invoked or called in the order they’re listed below.

CONSTRUCTOR

Programmers can implement the constructor to initialize state or bind methods. It’s called before it’s mounted which provides an opportunity to set the initial state of a component. This can be used to capture a user’s input on a form that once submitted can be stored in a list for the user to reference at a later date (ex. todo list, vocabulary words list, etc).

Note, do not call setState in the constructor. The constructor is the only place to set initial state by assigning this.state directly. In all other methods, use this.setState.

COMPONENT DID MOUNT

The componentDidMount method is invoked immediately after a component is mounted (created and inserted onto the DOM tree). Programmers can load data from a remote endpoint (backend database) for use in an app. This can be used to display browser views when a user visits a website.

COMPONENT DID UPDATE

The componentDidUpdate method is called immediately after an update happens. Programmers use this to change the DOM when the component has been updated. This can be used to show different browser views as a user clicks for various information on a website.

COMPONENT WILL UNMOUNT

The componentWillUnmount method is invoked right before a component is unmounted and destroyed. Once a component instance is unmounted, it will never be mounted again. Programmers use this method to perform “cleanup” such as canceling network requests or removing any timers that were defined.

There are several other lifecycle methods programmers can use but the ones listed above are the most commonly used. Details on all lifecycle methods are located at this link https://reactjs.org/docs/react-component.html.
A Bit About Getter and Setter in Ruby
By: Daniel Kim
Tags: Flatiron School, Getters And Setters, Ruby

When working in Ruby, there are many instances where one will need to retrieve or get the value of an instance variable. This can be done with the getter method. Without the getter method, you can not retrieve the value of an instance variable from outside the class it was instantiated from.

Here is an example without a getter method.

Without a getter method, you will end up with an error.

Now with a getter method.

With the getter method, we end up with the desired output.

There will also be moments where one will need to reassign a value to an instance variable. This can be done with the setter method.

Here is an example of trying to reassign a value without the setter method.

This results in a NoMethodError as seen below.

This can be taken care of by using the setter method.

As you can see, with the setter method, we are able to get our desired output.

In Ruby, we are provided an easy way to create getter and setter methods through accessor methods. These are also known as macros.

The three macros in Ruby are attr_reader, attr_writer, and attr_accessor.

The attr_reader is used to create a getter method.

So

Can replace

The attr_writer is used to create a setter method.

So

Can replace

The attr_accessor is used to create both a getter and a setter method.

So

Replaces both

Thus, in this example using the attr_accessor macro, our input and output will be the following.

We can also add multiple instance variables to these macros.

One can see how when working with a class that has many instance variables and requires multiple getter and setter methods, using these accessor methods would be helpful. These methods help one write code as clear and concise as possible, which is always best practice. I hope that this quick simple breakdown and example can be helpful to you on your coding journey.

Thank you for reading!

References

https://www.geeksforgeeks.org/ruby-getters-and-setters-method/
Sorting Objects By Key/Value Pairs in JavaScript
By: Jzavier Timm
Tags: Javascript Method, Flatiron School, JavaScript, Objects, Javascript Tips

Objects are pretty handy data structures that consist of a key and value pairs. What they can contain can differ however, a key can be a symbol or a string while the value can be any data type.

“animals” is the object. The animal names are the “key” while the integers are the “value”

Sometimes there may be some occurrences where you want to sort your object by the key or value but unfortunately there are no built-in JavaScript methods to sort t by object properties.

Up above we have an object called animals. The keys are strings which serves as the type of animal. Where as the value is an integer which represents the number of specified animal. There are 3 object methods that can be used to shift through the given data.

Object.entries()

This method returns an array of a given object’s enumerable property pairs.

With the following method, the object gets converted to an array so now it can be more easily manipulated to get specified information from the given object. For an example, if we wanted to find which animal had the highest number, we can use a sort method.

This will order the array in descending order. b[1] — a[1] will sort the array by comparing the values.

Now we have a sorted array of arrays and we can easily get the pair with the highest key value.

Object.keys()

This method will return an array a given object’s keys.

Object.values()

This method will return an array a given object’s values.

This method is useful where you only care for the value portion of the object. An example being finding the highest, lowest or most frequent values.

The methods listed above can all convert a given object into an array, allowing us to use built-in JavaScript methods to get the specified data we want.
Async JS, wait what?
By: Chaim, Luzy
Tags: Coding, Flatiron School, API, JavaScript, Software Development

Async JS, wait what?

Mod 4 was definitely different. Challenging but in a good way. We welcomed front end development (Javascript!) complementing our knowledge of Ruby on Rails (a backend framework). What this means is that we can now build full stack web applications: starting with setting up our server side code, configuring an API, setting up our routes and controller actions to creating a user interface with Javascript listening in for different user events.

For my project, I decided to make an app to allow users to review Kosher restaurants. Our projects needed to be ‘single page applications’ which means all requests we’re to happen via Javascript without needing to refresh the page. I implemented 3 requests to the Rails API on the backend. One to load all existing reviews, another to post a new review to the database and a third to delete a review.

To make a request via Javascript, you need to use the Fetch method (which is provided by the Fetch API built into the browser). It essentially acts like a client making requests to different endpoints (much like you and I would enter a URL into the search bar and make a ‘request’ for that website). The cool thing about using Fetch is that while a request is being made, other code can run at the same time. This is where we get into the difference between synchronous and asynchronous code.

Synchronous code is run one line after the next. What this means is that line 2 in my code cannot run until the line 1 has been executed. Take the following ruby code as an example:

puts "hello world"

sleep(10)

puts "finally!"

Line 3 will have to wait for the program to sleep for 10 seconds before executing and printing “finally”.

Asynchronous code takes statements outside of the main program flow, allowing later blocks of code to be executed immediately without waiting. How does this help us? Well, when I start up my application, the following code is being run:

function getReviews() {

fetch(`${BASE_URL}/reviews`)

.then(r => r.json())

.then(reviews => {

reviews.forEach(reviewData => {

const review = new Review(reviewData)

review.render()

})

})

}

This is the client-side request my application is making via Fetch to render all the reviews on the page. This process though may take a few milliseconds (or longer with a slow network). I don’t want this to pause my application code. I still want the other parts of my application to run and be listening out for user events. By using Fetch, I’m essentially saying, “you do you, but i’m continuing on with my other tasks”. Once the request has been made, we are sent back something called a Promise (that’s for another blog post) and I can start chaining on different instructions I want to do with the data we receive back from the API.

That’s the gist of it in a very small nutshell. Hope you enjoyed reading this and I hope to be back soon with my Mod 5 project! Happy coding!
My weekdays, in pseudocode
By: Joan Indiana Lyness
Tags: Teens, Flatiron School, Ruby, Pseudocode, Parenting

So how do you transition from your regular life to a full-time online boot camp?

A lot of folks in my cohort have quit or are about to quit their full-time jobs. I haven’t had an official full-time job since before my teens were born. Instead, I have a lot of little daily tasks that suck up my day.

I do some admin work for the small company I run, I teach four afternoons a week and I drive my teens all over the metro DC area: to and from school, practice, meets, doctor visits and outings with friends.

Doesn’t sound like much, but it’s actually quite complicated. So complicated that I decided to pseudocode it. Pseudocode is a plain English version of what you want your code to do. Writing in pseudocode before writing the actual code is kind of like a framing a house before building it.

I started out by defining a method, homework. For me, that is work I from home, which might include admin tasks, studying coding or doing dishes.

Find_teen2

Before tackling my main schedule, I had to write a helper method, about a huge part of my day: #find_teen2.

I have two teens, one with a serious phone addiction. Parental control software helped … until one night teen2 got so mad about the time limits that he destroyed his phone. Now teen2 does more homework and sometimes even talks to us.

I can’t replace the phone he broke, because that would be bad parenting. He’s in no hurry to buy a new one for himself because he’s shifted his addiction to our home computer (sigh — will tackle that next).

BUT — I miss teen2's phone! Without it, I can’t track or text him. Is practice canceled, ending early or late? Did teen2 skip practice and take the bus home? Is teen2 heading to friend’s house and forgot to say? Without a phone, who knows? Neither one of us is telepathic. Nevertheless, it’s my job to pick him up.

Here’s what it looks like in pseudo code:

Morning

With the find_teen2 block defined, it was easier to pseudocode my weekday schedule. Here’s the morning part. Note: teen1 is in a special program that includes tutors at home and just a few classes a day at the school itself. If all goes well with teen1 and my company, and if there are no snow day/ weather emergencies, school lockdowns etc …. morning gives me about three hours to do Flatiron work.

Afternoon:

I currently teach four afternoons a week. Each class is only one hour long. But they are in different parts of town — some quite close and some not. On teaching days, I’m prepping, driving, teaching or finding teen2 from about 2pm — 6pm. Some of that involves waiting in the car, and sometimes that coincides with a Flatiron study session, so I’ll drop in via phone. Not the best way to participate, but works fairly well.

Evening

Evening, of course, varies by day of week. Evening homework is mostly Flatiron work, and it often keeps me up past 1am …

Here’s hoping I can make this work for the rest of boot camp!

Copyright © Joan Indiana Lyness 2019
How to Bubble Sort in Ruby. So the first week of Flatiron was…
By: Joan Indiana Lyness
Tags: Programming, Flatiron School, Bubble Sort, Ruby

So the first week of Flatiron was great. Almost all of the assignments and labs for the week were included in the pre-work, so if you finished all of the pre-work before starting, you just had a few new labs to do. I found those relatively easy.

I’m nervous about what’s next but for a few sweet moments, I felt like this:

What do you do with extra time during your first week of boot camp? I decided to redo some of those labs I finished for my pre-work. Turns out this was a great idea for me, since … um … I had completely forgotten how to do some of the tougher ones. One of those labs just about crushed me!

yes, I grew up with Mr. Bill ….

While trying to solve that lab (more on that another time), I learned something new: how to sort Ruby arrays into ascending order without the .sort method.

That’s not what I set out to learn, but hey, it’s a good thing to know!

Given this array of integers:

I wanted to write a method that would return:

I started out by comparing the first two elements of the original array, 20 and 5. I wanted the smaller of these two to come first in the list. To do this, I wrote:

Doing this for the first two elements in the original array would return:

Doing the same thing for the second and third elements in the array (20 and -1) would return:

And so on. It turns out this method is called “Bubble sort.” It turns out this method is not very efficient for long arrays. But it is supposed to be a good way to *learn* about sorting.

Setting up the Loop

To get through the entire array once, I had to compare four pairs: the 1st and 2nd elements; the 2nd and 3rd; the 3rd and 4th; and the 4th and 5th.

In other words, for an array of 5 elements (array.length = 5), I had to perform my sorting operation 4 times (array.length — 1).

So I wrote a loop that would perform the operation one time less than the number of elements in the array:

During the first loop, the array would change like so:

Obviously, for most arrays, one loop would not be enough to put the whole array in order.

I knew I had to keep looping through, but I wasn’t sure when to tell it to stop. So I hunted on Google and found this very helpful video.

“swapped”

Following its advice, I declared a Boolean variable called “swapped” with a default value of false. After a swap, its value would change to true.

At the end the loop, if “swapped” == false, everything was in order, so it’s time to break the loop.

But if “swapped” == true, at least one pair of elements swapped places. In their new places, those elements might be out of order compared to their new neighbors. So we’d have to loop through again.

Here’s what the loop looked like with the “swapped” variable:

Finally, I returned the sorted array. Here’s the whole method.

So this is what I love about coding. Sure, it’s totally frustrating to meet a lab you can’t beat (yet). But while you’re trying, you’re likely to learn something else!

Ciao for now!

Copyright © Joan Indiana Lyness 2019
A Beginners Guide to Bash. During my journey to becoming a…
By: Jessica Poe
Tags: Flatiron School, Bash, Fonts And Aliases, Terminal, Function

Along my journey to becoming a programmer, I’ve spent my fair share of time typing commands into the terminal window and navigating through the output. After a conversation with my instructor at Flatiron School regarding terminal commands, I realized how little I actually knew about how my terminal works.

What’s the difference between the Terminal and Bash?

The terminal is a container for the Bash shell. Bash is a Unix shell that gets its name from the acronym for (B)ourne-(a)gain (sh)ell, a pun on the name of its predecessor, Bourne shell.

What’s a shell?

A shell is a command-line interpreter. That means the program interprets user commands to interact with the operating system. The commands are either directly entered by the user or read from a file called the shell script. Within a shell script are multiple lines of commands executed in order.

Why do we use it?

We use the bash shell command-line interfaces to perform tasks more efficiently by allowing users to quickly traverse the file system and configure our computers.

Like all programming languages, Bash expects the inputted commands to be syntactically formatted.

A few popular commands you might be familiar with already include:

ls : listing the files in your current directory

cd: change directory

mkdir : make a new folder in a directory

touch : make a new file in a directory

A few features bash offers is the ability to configure your profile which allows you to personalize your terminal prompt, add aliases, and create functions. I’ve included reference manuals if you’re interested in digging even further!

.bash_profile

When you start a new shell session the first thing Bash does is interpret the shell initialization files. It’s specifically looking in your user directory for files called:

~/.bash_profile

~/.bashrc

The difference is .bash_profile is read on login and .bashrc is read each time you start a new shell (without a login). Below is a snippet from the bash manual rendered by typing the command ‘man bash’ that explains it.
What the heck is the Virtual DOM?
By: Gracie Mcguire
Tags: Coding, Flatiron School, React, Programming, Virtual Dom

source: react-js.us

If you’ve worked in React you’ve heard of the illusive Virtual DOM, but what actually is it, and how is it different from the regular DOM?

To start let’s take a step back and look at the DOM.

“The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.” -MDN Web Docs

Essentially, we use JavaScript to work with and manipulate the node elements on a page and the DOM is what allows us to make that connection.

What are nodes? Everything. Everything is a node. From the inner most text to the document itself everything on the DOM is a node.

The biggest problem with basic JS DOM manipulation is that the DOM isn’t able to update any one item at a given moment, it has to re-render everything to change the one thing. On top of that, as more and more JS frameworks are becoming popular and faster, this manipulation has become slow and outdated. So as the commonality of single page applications and frameworks grow, there had to be a better way to manage this… Enter The Virtual DOM!

“The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.” Straight from the source, -ReactJS Docs

The way we create a Virtual DOM is through React Components. By importing Component from react into our application, we have access to components.

To make any HTML code a static React Component, you just need to return HTML Code in React’s render() method. This is done in the form of JSX, which is like a blend of JavaScript and HTML. Render is one of React’s lifecycle methods, which you can read more about here, but for now know that render is the point in our code when we start to build the react element tree.

Whenever the state in our application changes, the Virtual DOM starts to change/add/update it’s element tree, and the actual DOM remains the same. Then, React compares our Virtual DOM tree to the ‘snapshot’, or previous state of the virtual DOM tree. This process is called ‘diffing.’

Finally, React changes only those elements that have changed on the real DOM.

Essentially, React takes out the tedious traversing of the DOM tree and does this lower level stuff to make everything easier for developers, and run way more efficiently and smoothly.

To Recap:
Learning Software Engineering
By: Dmitriy Malayev
Tags: Flatiron School, Web Development, Learning To Code, Bootcamp, Careers

Hello, my name is Dmitriy Malayev, and I am a current Software Engineering student at Flatiron School.

There are numerous reasons why I choose to pursue Software Engineering at Flatiron. The main reason is that my nephew has graduated from the same program at the same school and he had a rewarding experience, additionally Flatiron has one of the highest reviews and recognition.

Additional reasons would include my passion to continuously learn new things, my desire to increase my income, and utilize my Bachelors of Science degree in Data Communications / Computer Science.

I am grateful for the tremendous knowledge the instructors and coaches have provided me. Additionally, the community online via slack, and learn.co is a joy to use, I have found myself both asking questions and answering some, with enjoyment, passion and having the benefit of reinforcing my knowledge.

I am sure most can agree that a challenging task is a more rewarding task, and easy isn’t as appreciated. Of course, there is also a difference between working hard and working smart. The goal is, to understand that many things regarding learning software engineering, require discipline, patience, logic, and of course not messing with mother nature. Sleep is quite important.

A person can do anything they put their mind into. If you are thinking of taking on the goal of also becoming a software engineer, be prepared. There are numerous free resources, including a free bootcamp prep course on the following website:

www.flatironschool.com