OK — Enough excitement. Let’s get down to the question:

Write a function that takes in an array of distinct integers and an integer representing a target sum.

If any 2 numbers in the array sum to the target sum, return those numbers in a sorted array.

If no 2 numbers sum up to the target sum, the function should return an empty array.

Sample input: [2, 5, 9, -1], 8

Sample output: [-1, 9]

Since I don’t want to just spoon feed the answer, I am going to talk through both solutions as though I were white boarding instead of just copy/pasting a gist.

Double ‘for loop’ way:

• I would begin by creating a for loop to track the first number which I would save to a variable inside this for loop
• The I’d create the second for loop to track the second number and save that number to a variable as well
• Then, I’d create an if statement to check if those two number sum to the target sum…if so, I would return the two numbers in a sorted array
• Otherwise, I’d return an empty array!

Takeaways:

Time Complexity: O of n squared because there are two for loops (we can do better than this!)

Space Complexity: Constant

Hash map way:

• Declare an empty hash
• Run a for loop over the length of the array (yes we have just one for loop in this solution) and inside this for loop declare a variable that is the difference between the target sum and the current number ==> we want to do this because if this number exists in the hash, we know we have found a pair that sums to the target sum!
• Check if the hash contains that number, and if so, return the two numbers in a sorted array
• If the hash doesn’t contain that number, add it as a key to the hash
• Otherwise, return an empty array!

Takeaways:

Time Complexity: O of n where n represent the length of our input array and we only traverse this array one time → after that, we just access values in the hash which is done in constant time

Space Complexity: O of n as well since we are adding values to the hash which nears n values

I personally enjoy completing these problems first in the less efficient way, and then in the more efficient way. In doing so, I am confident that I can solve the algorithm with the “brute force” approach which usually involves more fundamental knowledge, i.e., nested for loops. After solidifying that approach, I look for more efficient solutions.

I hope this helps!

Sources:

https://www.algoexpert.io

• n is an integer denoting the size of the staircase
• print a staircase of size n using # symbols and spaces and make it right-aligned
• Example: n = 4 should print:

At first, I didn’t know where to start so I drew out a staircase with an n = 3 to see if I could identify the patterns and/or relationships between n and the number of spaces in the row. The following is a real picture of the whiteboard that I used to make this discovery:

As you can see…

The first row has n-1 spaces before the #, the second row has n-2 spaces, and the last row has zero spaces.

In terms of the number of hashes (#) in each row, they simply increment by 1 until the row number equals n, in this case, 3.

At this point, I still wasn’t totally sure on how to proceed, but my instincts told me I would need to use at least one for loop — if not 3 — in order to print this out correctly: an outer for loop to keep track of the number of rows, and then two inner for loops to keep track of the spaces and hashes in each row…

Solution A: It works but it ain’t elegant or efficient…

Now that’s a lot of for loops. And this method of solving the problem is very error prone because of all of the variables in each loop…I knew there had to be a better way.

This is when I discovered Javascript’s String.prototype.repeat().

Please see Solution B:

I am no wizard though…it took some time for me to understand how to use .repeat() before I was able to pass the tests on HackerRank again. But it was a great lesson on how to read documentation and then apply it.

I look forward to using .repeat() in more ways!

What is JSX?

JSX looks a lot like HTML, but guess what? It’s not HTML. Technically, it’s JavaScript. Hence, the name JSX…JavaScript eXtension…

But, Why JSX?

JSX enables us to write HTML-like code inside of JavaScript. However, browsers do not understand JSX code, which is why we use tools like Babel to turn JSX in to JS.

While JSX is not required to use when writing React, it is highly recommended for two reasons:

1. It makes code less verbose.
2. It makes visualizing the UI a lot simpler.

For example:

Behind the scenes…

Each JSX element created (the <div> above for example) is just “syntactic sugar” for calling React.createElement() which takes in the following as arguments: the type of element we are creating, an object containing properties, aka, “props” that get passed to the component, the children of that component.

JSX vs. HTML

The four main differences between JSX and HTML are:

Inline styling

• The outer curly braces indicate a reference to a JavaScript variable inside of our JSX.
• The inner curly braces reference a JavaScript object.

Naming CSS Classes

• Since “class” is a keyword in JavaScript, and JSX is an extension of JavaScript, React must use className instead of class.

for → htmlFor

• To prevent the browser from thinking “for” is referencing a JS for loop.

Referencing JS Variables

In plain old HTML…you essentially “hard code” what will render to the DOM.

Whereas in JSX, you can make use of variables and then pass those to what will render to the DOM.

So, all in all, JSX seems super helpful to developers. Then, why are there still haters? A prolific software developer once said,

And the haters gonna hate, hate, hate, hate, hate
JSX, just gonna shake, shake, shake, shake, shake

Well, that’s because, as software developers, we like to abide by something called the separation of concerns, which means that the logic, the view, the styling, etc. should be in separate files. JSX turns this idea on its head.

But, think about it; JSX was made for a reason…that reason being to help the developer. So even if JSX feels wrong or yucky at first, I’d recommend to keep using it since it makes writing React a lot easier and more readable.

Sources:

• Introducing JSX - React
• Understanding JSX
• React Without JSX - React
• You’re Going to Hate JSX

https://www.udemy.com/react-redux/

This is getting into the range of one of the fastest unconscious actions the human body can perform — an eye blink.

Human-Computer Interaction (HCI)

Researchers in this field study the interactions between people (users) and computers. They also design technology that lets humans interact with computers in new ways.

In most applications/websites, “users are constantly performing operations that require some sort of communication with a server”.

This communication can include loading content, sending a message, clicking a like button, etc.

So, what makes this even possible?

Well, not exactly lies... but there is a little deception involved via manipulations of the user interface.

Enter optimistic rendering…

Simply put, rendering is the act of loading a web page. And, as I stated above, users expect websites to render very quickly…as fast as an eye blink.

The thing is, that’s not actually possible; when you actually consider ALL of the actions that must take place.

For example:

1. User presses submit to create a post on a social media website.
2. That request is sent to the server.
3. The server must send back the response (hopefully it’s successful).
4. Render the view the user is expecting.

This could take up to three seconds…That’s three times the optimal response time for a simple interaction.

So, many websites deceive users by immediately skipping to step 4. Render the view the user is expecting — this makes a website appear extremely fast even though the actual data has not been sent back from the server.

Why do users accept this deception?

Well, could you imagine waiting and waiting for a Like button to register? NO! HCI researchers will tell you that humans prefer speed over almost anything!

78% of consumers feel negative emotions as a result of slow or unreliable websites.

Moreover, according to a survey conducted by Harris Interactive for Tealeaf, 23% of users confess to cursing at their phones, 11% have screamed at them, and a whole 4% have actually thrown their phone when experiencing a problem with an online transaction.

Delays are among those problems.

Also…companies are not taking a huge risk by “banking” on this response to come back OK. Let’s say that the server’s response was NOT OK…failure to implement a “Like” action is not a big deal.

However, can you think of cases where the failure to implement an action would be a big deal?…

That’s why Pessimistic rendering must exist!

Although users prefer speedy rendering, there are certain scenarios in which it would be dangerous to “deceive” users that an action occurred before it was actually confirmed by the server.

And HCI studies show that users actually “accept” that specific actions will take longer, especially those actions involved with very important personal data.

Take my rent payment app…

Yea, that spinning circle isn’t fun, but I’d prefer to know that my rent payment went through FOR SURE. Otherwise, if it optimistically rendered and the response DID NOT come back OK, I might close my browser before the error comes back and never know that I didn’t actually pay my rent…not good! I smell lawsuits.

While it may seem like a no-brainer to always use optimistic rendering, there are a few critical use cases for pessimistic rendering. These are scenarios where receiving the state of the response outweighs the need for speed in the UI.

SOURCES:

• https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction
• https://academy.realm.io/posts/360-andev-2017-joe-birch-pessimistic-android-ui/
• https://medium.com/@duncandevs/ui-rendering-optimistic-vs-pessimistic-e8e0f4df264
• https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/
• https://www.computer.org/csdl/proceedings/afips/1968/5072/00/50720267.pdf

For all developers, and especially novice ones, it is critical to understand all of the code in your app, even code that is pre-generated for you! That’s why I decided to look through all of the pre-generated files that “rails new” creates.

Before long, I came upon the controllers directory inside of the app folder. I opened up application_controller.rb file and this is what I saw:

Protect from forgery? Who and what are we protecting ourselves from?

At first, I thought my computer had been hacked, but then I did some research and realized that this line of code is actually extremely helpful to protecting Rails applications and users of those applications. To understand how and why, let’s first discuss the concept of CSRF, Cross Site Request Forgery.

CSRF: Cross Site Request Forgery

CSRF, also known as, “Session Riding”, “…is an attack vector that tricks a web browser into executing an unwanted action in an application to which a user is logged in”.

Well, that’s a lot of words. Here’s a diagram (that I made!) to help you better understand CSRF:

So, back to the original code snippet from above:

protect_from_forgery with: :exception 

# This comes from a built-in Rails module called RequestForgeryProtection that gives access to protect_from_forgery.

# with: :exception tells rails how to react to a CSRF attack.

# Rails checks the authenticity token and if it cannot be verified, it will raise an exception. 

This is exactly where the form_authenticity_token comes into play…

The form_authenticity_token makes it possible to validate a user’s token. The form_authenticity_token takes into account two factors when determining a token’s validity:

1. A user’s Session ID, AND
2. Whether or not the user viewed the original form to get to the current page (when you “Session Ride”, you never see the original form page)

Therefore, even if a hacker has the same session id as the user and he/she would like to view the “Transfer Money” page, the browser will know that the hacker did not come from the form on the original website to get to that specific page whereas the real user went through the real bank interface.

There are a ton of files that I still have to explore in the Rails new structure, however I found this one especially interesting because it’s at the heart of understanding GET and POST requests and how those requests are affected in the world of cyber security.

Sources:

• The Rails Command Line - Ruby on Rails Guides
• Understanding Rails' protect_from_forgery
• Cross-Site Request Forgery (CSRF)
• What is CSRF | Cross Site Request Forgery Example | Incapsula
• Cross-site Request Forgery - CSRF - WEB SECURITY | Coursera
• Understanding the Rails Authenticity Token

I’ve worked at a large tech company, a start up, and I am currently a student at a Software Development Bootcamp — all of these places share the buzzword, “API” or “Application Programming Interface”.

Up until yesterday, I could not explain what an API is and how it applies to the world of software development. I’d like to share with you what I have learned in a way that both novice software developers and experienced ones can understand.

Let’s begin by looking at a scenario/place to which we can all relate…

A Restaurant:

We have a Chef, a Customer, and a Waiter. (And food of course)

In a Restaurant, how does information flow in order to get food/”the end result” to the Customer?

1. Customer looks at menu and selects what he/she wants to order.
2. Customer tells Waiter what he/she would like to order.
3. Waiter takes down the order and tells the order to the Chef.
4. If Customer has any additional request, Customer goes through the Waiter to tell the Chef information.
5. When the food is ready to be served, the Waiter delivers the food (end result) to the Customer.

In our Restaurant world, the Waiter is our API because the Waiter is the messenger that “takes requests and tells a system” (the chef) what the Customer wants and then returns the response (the food) back to the Customer.

Now, let’s jump into a few software examples…

Booking a flight…

You have a choice between:

(A) Interacting directly with the airline’s website and its database to see if certain flights are available, or

(B) Interacting with a third party like Expedia or Kayak or Travelocity which aggregates all airline flight info.

Let’s assume we go with option B because we like choices and we want to make sure we’re getting a good deal. When you get to Expedia or Kayak, you select from a menu of options in order to select your flight criteria…

This is where an API comes in…

Expedia doesn’t magically have American Airlines’ flight database or Delta’s. Expedia needs an “entry point” or a “doorway” into a part of the airlines’ database. That entry point/doorway is the airlines’ API.

Expedia must interact with the airlines’ APIs in order to gain access to their flight information. The airlines’ API gets sent your requests from the drop down menu and returns any flights that match your criteria. Just like a waiter in a restaurant, the API receives the user’s “orders” and returns the results.

You might be thinking…

Well, imagine there were no APIs…that would mean every single application that needed access to another database of information would have to custom build that database or they might not have a way to access that data at all.

That might be feasible in certain scenarios, but it certainly would not be for websites that need access to such expansive amounts of information like airline flight info that can change at any time based on weather and other factors.

In addition, APIs allow the user to search in one place while the API does the legwork of going back and forth between the other website and the current one. This allows for a more enjoyable and easy user experience.

On the web, APIs make it possible for sites to let other apps and developers use their data for their own applications and purposes.

They work by “exposing” some limited internal functions and features so that applications can share data without developers having direct access to the behind-the-scenes code.

Ultimately, APIs are “doorways” into a portion of a company’s data. With this doorway, other companies can build out applications that rely on this data without having to (re)build it themselves. APIs allow for a more connected and efficient web.

Sources:

• Why Don't All Websites Have an API? And What Can You Do About It?
• What Are APIs and How Do They Work?
• Expedia API Documentation | Public APIs
• What is an API?
• Application programming interface
• What is an API? In English, please.

Collaborizm is an online tech incubator that is aiding underprivileged innovators to achieve their entrepreneurial goals. With most of its user base coming from the Eastern hemisphere, and more specifically, Asia and Africa, Collaborizm is changing the lives of millennials in poorer parts of the world, and has actually inspired somewhat of a quasi-religious movement in some of its users.

Here is one story about Areous Ahmadtj, a native Nigerian, who is now on a mission to spread the word about Collaborizm to other young innovators by contacting local universities. Here is Areous’ story:

Areous grew up in Jos, Nigeria, aka, “J-Town”, where he had to contend with many struggles due to lack of educational resources, technology, and electricity. In spite of these obstacles, Areous taught himself graphic design and programming with the help of his older brother Nas, a computer science student. Areous recalls one of his first lessons with Nas: “He (Nas) said that computer programming language is made of ‘IF AND ELSE IF’. I was a little kid at the time and didn’t really understand what he meant. A big problem I faced then was having no Internet access so my learning process was so slow.”

Therefore, when Areous came across Collaborizm, a platform which enables anyone from across the world to build projects and meet other makers, he was instantly hooked — this platform was giving him access to things he had never had access to before.

The idea of this journey started whilst sitting in his room thinking deeply about a project he had started several months prior on the Collaborizm platform, Taking Collaborizm to Students. Living in Nigeria, it was clear to him, being a student himself, that there were a lot of students that wanted to make something of their lives, but had no way to do so. Collaborizm offered that opportunity; however, most Nigerians were not aware of it. “This was the motivation I needed to get myself off the ground and go to the 5 best universities in Nigeria, I decided to go to ATBU first”, says Areous.

ATBU — Abubakar Tafawa Balewa University is a federal university of technology located in Bauchi, northern Nigeria; its mission is to provide relevant and high quality education and prepare individuals for work, leadership and a meaningful life, through promotion of research, teaching, development and testing of ideas in order to advance understanding and quality of life.

From his home in J — Town, Areous took a three hour taxi ride into the capital of Bauchi State, arriving at the Zaranda Hotel, Bauchi and faced his first challenge: getting in touch with university staff members. He began making some calls to anyone that might be able to help connect him with a staff member and he eventually connected with Aneo Ahmed, one of the university’s computer science and education students, and a friend of his brother, Nas.

Aneco Ahmed explained that the university has a lot of restrictions concerning outside visitors, but that since he is the class representative, he would be able to help connect Areous with the school rector. As a result of this introduction, Areous has a meeting scheduled with the school rector at the end of this month. In the meantime, Areous has a meeting with the Head of Programming where he will introduce him to Collaborizm and explain why it is critical to the university students.

In addition, Collaborizm will be creating a forum for the university students where they can share and develop ideas and post assignments. Areous also plans to create a course at the university’s Information Communication Technology suite (ICT) entitled “Collaborizm Developers”, which will cover concepts of various programming languages and networking skills.

In this short period of time, Areous has already garnered over 1400 sign ups from local Nigerian university students, he has gathered the support of several university professors and has given hope and inspiration to hundreds of aspiring makers and future entrepreneurs. Areous’ current plan is to remain in Bauchi over a one month duration to attract more users before he moves on to Bayero University Kano where we will continue to follow his incredible story.

An Engineering Student Fights for the Future of Nigeria was originally published in Collaborizm Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Beauty of Imagination

The one thing we never lose, even when we grow up to be big, responsible adults (yeah right), is our imagination. You could be a forty-year old businessman, sitting at your desk pretending to look up the financial projections of a company and still doze off thinking of what life would be like if dogs could talk, you were able to fly, could read peoples’ minds, could time travel, etc…there is something so awesome about being able to dream of things that are entirely fictional.

Imagination allows us to transport ourselves out of our normal lives and experience extraordinary things. That’s why people love fantasy in books, movies, and video games.

The Concept

Arti Loftus, one of our top users, is both a talented artist and techie, who started a project that capitalizes on imagination. Her dream is to create not just a story, but an entire fantasy world — hence the name Fantasy World Build — that can one day be used as the basis for a video game.

Now you may be thinking, what about Game of Thrones or Dungeon & Dragons or Lord of the Rings? Well I say, what about them?!?! These games all stem from similar fantasy worlds where men ride horses and wear armor and women only contribute to the world through childbirth or romance. Arti wants to create a fantasy world totally unlike the ones listed above, and it’s up to the Collaborizm community to create it.

Ideas for the Fantasy World

Arti so kindly provided a guide to help build the fantasy world. It has an extensive list of questions to help guide us through the creation process. Here’s an example of a few of the questions you’d have to answer to create a successful fantasy world…and these are just the BASIC questions — imagine the more complex ones!

Are the laws of nature and physics actually different in this world, or are they the same as in real life? How does magic fit in? How do magical beasts fit in?

Is this generally an earth-like world? Is it an “alternate Earth”?

Are there different human races, whether or not there are non-humans like elves or dwarves? How does the cultural and ethnic diversity of this world compare to the real world?

To Conclude

Don’t be overwhelmed — all of these questions don’t need to be answered in one sitting, but they’re very important to think about. I really love this project because it honors and respects the work of truly creative minds, like writers and storytellers. While Collaborizm does have mostly tech-heavy projects that involve drones or robots (and those are great), I think it is very important to highlight projects like these that need just one thing — your mind…

Formulating a Fantasy World was originally published in Collaborizm Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Abhi Verma is the mastermind behind this project, and he was inspired to create this charger because his community in India has extremely limited access to electricity. Abhi points out that the power requirements for the second largest population on earth are prohibitively expensive, so he wanted to find a cost-effective solution…enter solar power!

Understanding the Jargon

Let’s break down the name because WOW, that’s a lot of letters. SMPS stands for “switched-mode power supply” which is an “electronic power supply that incorporates a switching regulator to convert electrical power efficiently” (Wikipedia, “Switched-mode power supply”). Unlike other power sources, such as a linear power source, the SMPS transistor spends as little time as possible in high dissipation transitions, which minimizes energy waste, and therefore, minimizes co$t. As a result, SMPS power supplies are preferable to those who are focused on saving money.

Next, is the PV part of the name, which stands for photovoltaic, which means the conversion of light (sunlight in this case :) ) into electricity — ahhh, now it all makes sense since this is a solar-powered charger.

The Design and Prototype

It’s pretty incredible that Abhi’s design on the left turned into the physical device on the right. With input from the Collaborizm community, Abhi was able to make the correct adjustments to create the best prototype.

Watch it Work!

Below is Abhi’s original charger, which he first built to charge his drones’ lipo battery. With new improvements, the charger can now charge any kind of battery by adjusting the output voltage. Currently, the max voltage current is 3 amp.

Why this is AWESOME

Not only can Abhi help his community obtain access to electricity, he can help India find cheaper ways to obtain electricity. One idea for a community can now help a continent.

No Power Outlet? No Problem! was originally published in Collaborizm Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

I can finally say my dreams have come true. No…Brad Pitt didn’t ask me out on a date, but the greatest invention of my lifetime has been created — the Coffee Bot, a robot that delivers coffee and can be controlled from anywhere in the world.

Let’s say your boss asks you for a cup of joe, but you have tons of work to do and don’t want to get up and deliver it to him/her…that’s where the coffee bot comes in. Sure, you still have to actually make the coffee, but no more delivering the coffee like a lowly intern! Or, let’s say you know your co-worker is getting up from her desk to get some coffee, but you feel lazy and don’t want to get up — you simply tell your friend to pour you a cup of coffee and send it over with the Coffee Bot!

Don’t worry, the coffee bot doesn’t only deliver coffee around the office — I mean how boring would that be? — it can deliver letters, small packages, and anything else it’s able to hold on to with its cute little gripper, which is controlled from the user’s laptop.

A Little Coffee Bot History

The creator of the Coffee Bot is one of Collaborizm’s top users, John Rodriguez. John was inspired to create this project because he was fascinated by the idea of controlling a robot from his computer. Also, John loved the idea behind Collaborizm Founder, Steven Reubenstone’s, pizza drone (yes, a drone that delivers pizza) and was inspired to create a robot that could deliver something everyone loves, coffee. I cannot forget to mention Harsha Alva, who has also made tremendous contributions to this project.

Below is a video of the working prototype!!!

First-Person View

The coolest feature of the Coffee Bot is that the person controlling it can see exactly where the Coffee Bot is going through a camera. So, when your coffee gets to delivered to its desired location, you can see the reaction of the person to whom you are sending the delivery! (Desired reaction is photographed above) In addition, the camera can be moved in multiple directions so that the Coffee Bot won’t bump into desks or chairs and therefore, won’t spill your precious coffee.

I don’t know about you, but once this product comes to market, I will be the first one to buy it. I can pair my laziness with more coffee — how perfect, right!?!

Your Coffee Break Just Got A Lot Easier! was originally published in Collaborizm Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.