Forem: Rohit Pratti

Why we should be testing with Cypress!

Rohit Pratti — Sun, 24 Nov 2019 01:50:07 +0000

Hello everyone, today I will explain why to use Cypress to test your front-end components its really easy and honestly anyone can learn to use it!

Why Cypress...

THE UI

The awesome part about Cypress Testing is the Cool GUI that comes with the software so you don't have to test everything in CMD line, it is really self explanatory and uses google chrome to test your program!

All you need to do is have your front-end and back-end(if the components require the back-end) servers running and click run tests! It looks like this!

The top Image is the dashboard this allows you to pick which tests you want to run...

The Second Image is the actual tests being run in google chrome, the great advantage of this is you can actually watch the tests being run... and find out exactly what step in the process the tests are failing! this makes bug hunting so much easier and trust me it makes you a better programmer!

Cypress does not use Selenium

Most end-to-end testing tools are Selenium-based, which is why they all share the same problems. To make Cypress different, they built a new architecture from the ground up. Whereas Selenium executes remote commands through the network, Cypress runs in the same run-loop as your application.

Cypress works on any front-end framework or website.

Cypress tests anything that runs in a web browser. All of the architecture surrounding Cypress is built to handle modern JavaScript frameworks especially well. They have hundreds of projects using the latest React, Angular, Vue, Elm, etc. frameworks. Cypress also works equally well on older server rendered pages or applications.

Cypress tests are only written in JavaScript.

While you can compile down to JavaScript from any other language, ultimately the test code is executed inside the browser itself. There are no language or driver bindings - there is and will only ever be just JavaScript.

Cypress is all in one.

Writing end-to-end tests takes a lot of different tools to work together. With Cypress you get multiple tools in one. There is no need to install 10 separate tools and libraries to get your test suite set up. They have taken some of the best-in-class tools you are likely already familiar with and made them all work together seamlessly.

Cypress is for developers and QA engineers.

The tests don't require you to be a developer to understand or write them they are super readable and the one can learn how to write cypress tests within minutes and all you need to start is npm install cypress

This is good for devs because we don't have to waste time writing tests that could be used for solving tests

and this is good for QA engineers because they don't have to know complex javascript logic to understand what the test is supposed to do.

Cypress runs much, much faster.

These architectural improvements unlock the ability to do TDD with full end-to-end tests for the very first time. Cypress has been built so that testing and development can happen simultaneously. You can develop faster while driving the entire dev process with tests because: you can see your application; you still have access to the developer tools; and changes are reflected in real time. The end result is that you will have developed more, your code will be better, and it will be completely tested.

Their Dashboard service pushes this optimization even further!

To learn how to use cypress visit cypress.io or check out their docs at

https://docs.cypress.io/guides/overview/why-cypress.html

or maybe I'll just write another blog... we'll see

How do I.... useState?

Rohit Pratti — Sun, 10 Nov 2019 05:46:24 +0000

Hey Its me back again with another React Hook blog, this time its useState!

What is useState?

well as I mentioned earlier, useState is a react hook that lets you access state in functional components, if you were not aware functional components don't have access to a state! however the useState hook lets you work around this.

Step 1, import useState

This is a simple step and it gives you access to the useState library

you could simply say React.useState() every-time, however that can be bothersome so when you import React you can destructure(which is not a real word btw..) by going

Import React, {useState} from 'react';

this is basic stuff but now every-time you want to use the function you have access to it as useState.

Step 2, how do you use it?

Using this hook is almost as simple as importing it..

So theres two things you can notice right off the bat, there is an array in this case we have a count and a setCount function, and basically what this does is the first value of the array is what is being stored in the state in this case we are storing some count,

and the setCount is a function(which can be named anything "updateCount" "blah" anything..) we are assigning to the count value in state and we are saying every-time I use setCount, do this with that state... and update the value of count...

for example if I have a button that increases the count every time you click it, all you have to do is...

simply "set the count" to whatever the original count is +1, you may find this similar the setState function in class functions, and thats because thats exactly what it is doing, except this setCount is specific to the count value in state..

Step 3, updating multiple Values at once

Unlike this.setState() where it automatically merges the rest of the state... you can run into a problem where if you have multiple counts for example..

well now if you try to update the state you need to change the function otherwise it won't know which count to update, and even worse it'll reset the value of the second one unless you merge the state

so you can fix this issue like this..

now,
it first gets the state of everything,
then it knows to update the first count (once again currentState can be called anything, "state" , "blah" you're just saying take the state and only update this one value)

and to simply just replace the rest of the values with the original data.. now if I click the button it will still increase the value that is specified in this case just count...

however another great thing about useState is you can call it anywhere and call multiple useStates for multiple different values..

so now count2 isn't affected unless you call the setCount2 function because that is the only updater function tied to that value in state!

Thats it for my quick introduction to useState.. I hope it is helpful..

its very easy to use and is usually the base for a lot of custom Hooks which I may talk about in my next blog!

How to useEffect vs componentDid/Will-unmount

Rohit Pratti — Tue, 29 Oct 2019 10:16:14 +0000

I was working on a project and I had to close out some modals, and realized there were both Class component modals and Functional component modals that were involved... so I decided for the class component I would use the life cycle methods and use useEffect for the functional components heres what they look like

Lifecycle method

useEffect Method

The Similarities

Let's get the easy stuff out of the way how are they similar..?

thats right!

the handleClick function is the same barring the minor difference of using "const" in the functional component the logic of the actual function is pretty simple, if you click on the modal background or hit the esc key it should call the function that closes the modal.

The Differences

Now whats the difference? its how you handle the event-listeners,
you might notice that in class components if you have an event-listener
in it, and it console.log("hello") and go to you google-developer tools
and checked console, you might notice it console logs it 3 times, this is because you haven't done what I call a clean up listener aka the removeEventListener function call so it doesn't know when to stop listening to the click, once the modal is closed there is no need for the event listener to be active! other wise it would open and close immediately when you tried to open it!

in the useEffect you do this using a "clean-up function" which you can see in the return function, this removes the event listener when the component is no longer rendered,

the equivalent to this in the class component is componentWillUnmount
inside this you can add the clean up function and now the event listener is only active while the modal is open!

pretty fun and simple function that uses some cool features!

How to install and Set up Python on Mac

Rohit Pratti — Thu, 24 Oct 2019 06:14:50 +0000

Hello Everyone this is a simple guide on how to quickly set up python on a mac and be able to switch between versions using pyenv!

First Note that all Mac OS come with Python 2.7 out the gate which can be helpful to learn but You might want to use Python 3 for more serious development!

This Blog will help you set this up in a quick and simple fashion!

Step 1 - Set up Homebrew

You will first need homebrew installed to be able to install everything straight from terminal.

just copy and paste this into your terminal:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2 - Install pyenv

Now we will install pyenv to help us manage and install different versions of Python, the pyenv docs describe its functionality as

"pyenv lets you easily switch between multiple versions of Python. It’s simple, unobtrusive, and follows the UNIX tradition of single-purpose tools that do one thing well."

Use Brew install

brew install pyenv

Add pyenv initializer to shell startup script

echo 'eval "$(pyenv init -)"' >> ~/.bash_profile

Reload your profile

source ~/.bash_profile

Step 3 - Install Python using pyenv

## List of Python versions

    You can look at a list of all the different python versions that 
    can be installed using the command 

   `pyenv install --list`

## Installing Selected Version

    Once you have selected a version you want to use install it using 
    the command 

   `pyenv install <version>`

Step 4 - Switching to the installed version

## Viewing all installed versions

  You can look at the list of all installed versions of python using 
  the command 

  `pyenv versions`

## Setting Global Version

 Set the global or default python version using the command

 `pyenv global <version>`

## Setting Local Version

  Set the local version for the repo by cd'ing into the repo then 
  using the command 

 `pyenv local <version>`

## Checking Current Version in user

  You can always check what version of Python is currently being used 

  by using the command

python -V or python --version

Conclusion

pyenv is a great tool to use to easily manage and switch between Python

for more about pyenv look at their documentation here :
https://github.com/pyenv/pyenv/wiki

Machine Learning: Intro

Rohit Pratti — Tue, 20 Aug 2019 16:36:30 +0000

In the world around us Algorithms surround us in our daily lives all the time, you might be reading this blog because of you searched something on google which put your search term through some algorithms and brought this Blog to you because I clearly understand machine learning at the highest level possible.... (NOT)

Anyway when you click on this blog the algorithm takes note...when you visit facebook or youtube there is an algorithm that brings your the stuff you see on the home page based on stuff you like, when you buy something online there is an algorithm that is watching your purchase and making suggestions to you based on stuff other people may have purchased..

here you can see its college season and an algorithm has brought me stuff I might need when I go back to school...

Theres also algos at your bank watching transactions to make sure there aren't any fraudulent transactions..

And in the stock market there a bunch of bots trading with....

You guessed it! More bots..

So how do these algorithms work??

In the OLDSCHOOL days we built this algorithm bots with stuff we could explain like If (number === 1) {return number} and you would get the output "1"!

But there are many problems in the world that we can not just write simple instructions for.. like for example there are billions of stock transactions happening in the world at once, how can a bot determine which one are legit and which ones are fraudulent?

Theres a BAJILLION videos on youtube which 8 should the bot bring to you to watch? in our daily world these bots are constantly being asked questions and They are giving us answers... now these might not be perfect answers but it is the best answer it knows that it can give us at the time and most of the time its pretty accurate!

However how do these bots work not really anyone knows.. including the people that "build" these bots

This is because the companies that use these bots aren't only secretive about the information because these bots are very valuable employees to the company but they are also not completely sure themselves... see its similar to how a person learns if I point at a bee and tell you that it is a bee.. you are able to understand and now every time you see a bee hopefully you are able to tell that it is a bee and not one of those nasty wasps

but if I were to ask you how did you remember that was a bee.. you would be like IDK and if someone asked me how did I teach you that was a bee I would be like... uhhh IDK!
While an individual neuron in the brain and clusters of neurons in code may be understood.. the whole is beyond the grasp of our knowledge

this is kind of similar to how machine learning works on the basic level.

To begin we must first build a builder bot and teacher bot...
These bot brains are much simpler to understand and a really good programmer could make them given the time and effort.
And their job? well its just like their name suggests..

The builder bot builds bots although its not very good at them, this is because the builder bot is building these robots towards a direction but almost at random...

this leads to some pretty... special student bots for the teacher bot to.. yes teach... however the teacher bot itself doesn't know the difference from a 3 and a Bee because if it did then... why is this blog even a thing?

Instead we give the teacher bot a bunch of 3 photos and a bunch of bee photos and the answer key to which is what.

Teacher bot can't teach... but teacher bot sure as hell can test..

The student bots try really really hard on the test but they are bad at what they do.. like really bad.. like they can't even pass the tests...

And its not really their fault.. I mean after all they were made by a bot that doesn't know what a 3 and Bee is so how is it going to make a bot that knows what a 3 and Bee is while just making random connections in the bot brain.. So the poor little student bots take their bad tests home unlike me in 6th grade however they don't know the fate that awaits them...

The ones that did the best are put to one side... and well the others...

yeah...

anyway builder bot takes the ones that are left makes copies and makes a bunch of random changes again and sends these new bots off to school again.. some of them a little smarter

And this cycle happens again... and again... and again... and again..

you may ask me hey Rohit, if the builder is building at random and teacher that doesn't teach and only tests, in theory shouldn't work or at the least it shouldn't be efficient.
Well you would be right, if we were working with just 1 or 13 bots like a regular school classroom and it took the builder bot real world time to build these new bots.

however teacher bot isn't just teaching any regular old 13 student classroom but instead its teaching an infinite warehouse of student bots

The test isn't just 10-15 questions but more like a million questions all asking whether something is a bee or a 3 and each bot is being taken back and built instantly with the "improvements" random or not when its a million random changes one of them has to eventually lucky enough to be barely tell the difference between a bee and a 3

As the process keeps repeating the score keeps going higher and higher
and the score required to survive keeps going higher and higher

Eventually you do get a bot that can really tell the difference between a bee and a 3 from a picture it has never seen before

but how the student bot does this neither the builder bot or the teacher bot of the person who is overseeing this project know... after making so many random changes some useful some not the code for the bot gets very complicated...

While a single line of code and multiple functions may be understood the whole is beyond our grasp of knowledge..

And this can be frustrating because although the bot is doing what it has been taught to do very well... it is only good at that one thing and to teach it a new thing you would have to start the whole process over again with the new lesson implemented into the testing,
in our scenario the bot is very good at pictures but what happens if a picture is upside down or if its a video? the bot is stumped again...

or things that are very clearly not a bee.. get put into the bee folder.

and this why companies are always collecting data because now the human overseers have to write longer tests which more questions and try to include questions the best bots get wrong.. so when you click on the traffic signals in the picture to check if you are not a bot they are also collecting information to see what makes us humans different from the bots!

This is because more data means longer tests which means more efficient bots

and this is the basics of how machine learning next we are going to talk about how this concept is used in combination with your ads that are being tracked to keep you on certain companies products longer DUN DUN DUN heres some words for thought if the student bot could learn to like the same stuff as you... would it be able to find you new stuff to keep being engaged?

I would like to credit: https://www.youtube.com/watch?v=R9OHn5ZF4Uo

For the great pictures and awesome video on this topic in better depth and understanding would definitely go check it out!

Personalizing your Google Ad Settings

Rohit Pratti — Thu, 08 Aug 2019 17:29:25 +0000

Google Ads

You see google ads everywhere whether its a youtube video or a just a gaming website, but have you ever noticed sometimes the ads are about stuff that you were thinking about and now you're paranoid that the govt is listening to you and the FBI guy behind your screen knows all your deepest darkest secrets...

welll... while that isn't completely wrong it isn't exactly completely right either

So today I will be talking about google ad settings and how to personalize them...

Lets begin with how to get to your google ad settings... simple click this

I'm just kidding although you can just google the term "google ad settings" you can also just go directly here

BEGIN

This is the first thing you should see clearly it allows you to choose targeted ads, now Ideally you do want targeted ads because they would be catered to you specifically, however the coolest thing about this page is you can see what google thinks about you and who you are as a person based off all the activity you've had open while exploring google.. so if you had some music playing while on google, google knows the song and then adds it to your profile.. here is where you can see them

As you can see google has my correct age.. which can be updated by just clicking on it so if you guys wanted to know your internet age based on what you browse this is a great way to check it out! Now i've also noticed a couple ads that I particularly don't care for which are the auto insurance and Chevrolet, which means I don't want to see ads for these things... well the fix for that is simple!

Just click on the ads you dont want to see like so

And just click turn off.. now google understands you don't want to see those ads but if google "feels" like you've been watching videos about auto insurance it may turn that ad setting back on again and adjust your age based of those videos.

Getting Deep

But the google ad settings can be even more indepth.. you can click on the ad setting, and manage what activity google tracks and doesn't in this page right here.. https://myactivity.google.com/myactivity

Your activity page shows all the history and data that google keeps about you.. this is technically that fbi agent behind your desk that knows everything about you including stuff you didn't know you likes.. now how it has this information and how its able to use this information to bring you the right video to watch next I will explain in my next blog about basic machine learning.. for now I will explain the activity page

In my case we are looking as some of my YouTube history.. google is using my Youtube history to give my profile categories of things it "thinks" I would like and brings me ads related to this... However note that websites you visit while incognito or using a private browser that doesnt save cookies will not let google gather the information about you... however don't be fooled because every ad you click on still saves cookies about you and thats why when you're up at 2 am you get that dating app ad because google knows you're lonely coder and seek and want friends, ANYWAY YOU GET THE POINT... make sure you know who's tracking what cookies 😂

Using this to your Advantage

You can use your ad settings to your advantage in different ways... first being you can edit your profile to more represent you however google will now be still throwing the same old ads and that can get boring... fast..

So the best way to use this to your advantage is to be specific but broadly specific remove the intricate details and let google take random shots at you checking whether or not you like the ad... and send it to its teacher bots....

...foreshadowing for my next blog

Game Development and Programming

Rohit Pratti — Tue, 02 Jul 2019 07:28:31 +0000

Studies from as recent as 2017 show that the video game industry is worth more than $80Billion and projected to cross $90Billion by 2020 and this is just in the US

as you can see every year more and more video games are being bought and as a gamer myself I don't see this trend changing anytime soon, games are super popular because there are so many genres with so many companies pumping out games in just about every category and the graphics and stories and levels just keep getting better and better!... but behind every great video game is a poorly credited video game developer team

Here are some video game companies that you may know... you may even play games by some of these companies.. I personally am a huge nintendo smash bros fan and participate in melee tournaments when I get the chance pretty often! however when you see these game companies you immediately know what your favorite games by them are.. ok so lets try this Lets look at this list of people

Hideo Kojima
Gabe Newell
John Carmack
Masahiro Sakurai
Markus Persson
Andrew and Paul Gower
Alex Seropian

You probably don't recognize any of these names much less the games they helped mostly create... now granted all these men are very well compensated for their contribution to the video game world and are all worth millions of dollars, as a coder that is the secret goal is to be rich for something you made and nobody knows about you... however although I find it odd at first I realize that its pretty normal in the entertainment industry, Usually every movie only has the studios that made it at the beginning, and musicians usually are given the credit but their labels do present themselves all over the product... and in video games and movies and music however there is an end credits where everyone is give their rightful due...

So instead of complaining about it I decided to give these some of my favorite game developers credit and talk a little about their games and what code they used!

1.Andrew, Ian and Paul Gower - Runescape

Created by the three Gower brothers and published in 2001, Runescape is an MMORP or better known as a Massive Multiplayer Online Role Player, which if you've played any role playing games is pretty easy to understand you are a person born in a world called runescape and you have different skills and levels and quests that you can do and everything is basically controlled with a mouse! such a simple game mechanics and its ability to be afk is what made the game madly popular and still has over 70k active users online almost at all times! although the Gower brothers are no longer with the company jagex, they all walked away very rich worth over 305 million dollars in total...

However we are here to talk about what made their game so revolutionary.. lets begin with what it was written in...

"We write in a scripting language called RuneScript, which our Game Engine team has created specifically for making RuneScape content. The Java-based game engine then reads this RuneScript code and makes it all work. RuneScript is constantly being changed and expanded as we add new features to it to allow it to do new things." - Mod John Jagex Dev Team

Thats right, runescape is written in its own language that is similar to javascript and wiki html, it uses a java engine to translate the code into html

"Hmm, syntax wise it's similar to any C-style language, except variable names are prefixed with their type (eg. %varname is an integer). We also lack full array support. Other than that, it'd do pretty much anything you could do in C or Java." - Mod Chris E Jagex Game Engine QA

Here is some sample code.. if you notice the syntax is very similar to a basic object oriented language such as ruby or java!

to learn more about runescape visit : https://runescape.wiki/ and https://oldschoolrunescape.fandom.com/wiki/Old_School_RuneScape_Wiki

learning about runescript is difficult however and jagex keep it real top secret however they do have forums with active mods who are happy to answer questions about runescript and runescape they keep dev blogs similar to these! @ https://www.runescape.com/community

2. Masahiro Sakurai

ahh Sakurai, boy do I love and hate this man.. I love him because he created possibly the greatest video game of all time.. Super Smash Bros melee a cross over fighting game between all of nintendo's video game franchise all stars

However he also divided the community almost released two of the worst sequels ever, blah blah blah he has redeemed himself with the most recent version smash ultimate however today we are here to talk about smash and what it was written in.. which are C++, C and assembly language 6502 personally I don't know alot about these languages and plan to educate myself more but I do know that both Hal Labs and Sakurai's team worked night and day and many overtimes just to get the characters to work and the game to work perfectly, I bring up melee in this blog because till this date it is widely agreed that there has been no game inside and outside the smash bros franchise and fighting game franchises that has been able to match the movement options and fighting style of smash bros melee that mixes king of the hill concepts equally well with fighting game concepts and really somehow made the best fighting game of all time all through an accident, a code they had written to fix "clipping" along the ledges allowed characters to move and slide across the ground and this created a technique called "wave-dashing"

This along with Dash dancing:

and other advanced techniques allowed melee's movement to push the game to become one of the most watched competitive fighting games at most major competitive tournaments with huge crowd and pot prizes over $15k at a time!

3. Alex Seropian/Bungie

See growing up as a kids everyone I knew played Halo : Combat evolved, and until I wrote this blog I never thought about hey I wonder what code Halo was written in, Halo of course is one of the best first-person shooter series of all time, atleast the original series made by bungie and then its arguable if the new halos are really that good or not BUT once again we are not here to talk about my elitist opinions on video games... but we are here to talk about the code behind the game and the people behind it... Bungie was established by Alex Seropian, and their first really successful game was Myth.. dont know much about Myth but it gave them enough traction to be bought out by Microsoft from take two which led to make Halo and actually this is where I started to learn that Runescape having its own language was actually an outlier and that Bungie just like most game developing companies used C++ and Java to create halo and used the same engine as Doom, Call of duty, which is the Quake 3 engine if you guys remember that game which was basically a stripped down version of all these games that they made as a test game of which most modern first person shooters are made and this realization led me to my final conclusion that not all games are original in terms of development yet they are code built on top of engines that already pre exist and then from there its a bit easier to make the game how you want when you dont have to create all the things such as movement and character models from scratch.. although most game developers do end up making their own models they try to avoid having to create a game engine... anyway focussing back on halo, halo would be one of the best selling games of the early to mid 2000's and would eventually loose out to the aforementioned call of duty.. another game built on the same engine also written in C++ The engine however can handle C, C++ and Python.. python games are more commonly found on the nintendo systems where the graphics burden isnt as heavy although I am once again not sure why that would matter for the language itself but its what I have discovered. So as I journey down this path about Game developers and their code I discover my next big target... the GAMING ENGINES!! coming soon to you

I know my thoughts are really ADD and random but my blogs are a reflection of how my research progressed so its safe to assume the beginning and end of most of my blogs may not have a finite beginning and end point!