Exercises for work

The average of a working day is 8 hours, in some cases is a little bit more, we spend most of our day working. A considerable percentage of the population works sitting in front of a computer, which brings great benefits in the workplace, but it is not so in the field of health. People who are seated most of the time develop a series of conditions, especially those who are affected by sedentary lifestyle, vision problems and posture. There are other associated problems such as carpal tunnel, low back pain or even spinal disc. That is why in this blog I’m going to share some of the most common conditions that people who work sitting most of the time probably have, as well as some easy exercises they can do to avoid these discomforts.


• Column and cervical: When we are in the chair of our work we tend to adopt a hunched posture which can exaggerate the natural arch of our spine, in addition to the creation of this hump, the disks of the vertebrae are worn, which are shock absorbers and allow you to release the weight when standing, when these discs are compressed they wear out.

  • When staring at screens, we tend to blink less. If we reduce the flickering, the eye gets a bad lubrication. This means that if we spend many hours in front of a screen, we could suffer from dry eyes. This symptomatology occurs in young patients, since their work activities tend to be linked to the use of computers and cell phones. In this case it is advisable to take small breaks during working hours, there are also drops to refresh the vision.
  • Another part of our body that are most affected are the hands, the bad position of our wrist can cause damage to our carpal tunnel, which causes excessive pressure on the median nerve. This is the nerve of the wrist that allows us to have sensitivity and movement on some parts of the hand. Carpal tunnel syndrome can cause numbness, tingling, weakness, or muscle damage to the hand and fingers.
  • Another of the most common problems is work anxiety, the fact that certain things do not work out well in our work causes us great stress levels which can trigger anxiety, so I’m going to leave here some steps that can help us calm down a bit our anxiety
  1. Breathe, just like when we feel nervous, breathing when we have anxiety at work is one of the simplest and most effective methods to calm down
  2. move
  3. Talk to someone
  4. Listen to music
  5. Do not rush
  6. Ask for help
  7. Don’t block yourself
  8. And don’t forget to smile
  • More studies are needed on the discomforts that are caused by sitting and not having physical activity, and how this affects our health. However, it seems clear that sitting less and moving more generally contribute to better health. You can start simply by standing instead of sitting when you have the opportunity or looking for ways to walk while you work.

The simplest GraphQL API with NodeJS – Apollo Server – REST

Here you can see a small exercise of queries to a public Pokemon API where you can consult the REST API with NodeJS, and then with the help of Apollo Server provide your own GraphQL API.

In this blog we highlight the importance and ease it gives us for this case Graphql. There is currently a lot of information about Graphql, if you want to know more details, if you need more information or you do not have something clear you can consult Graphql or comment your question and we will gladly give you an answer, personally I recommend the official documentation, It is quite clear and concise, however it does not detract from any of the other sources that know Graphql very well.
With respect to its comparison with REST there are also many blogs, videos, “influencers” in the technological world with articles on the subject; some will say that REST is better, others will say Graphql is better, others only make comparisons and others think that the integration between the two could work and solve many headaches.

The idea of ​​this little practice is to combine the two technologies in the simplest and most readable way possible with node js as server.

Thus,
– We create a my_project folder.
– We enter the my_project folder and type npm i and create / configure the package.json from the terminal.
– We must have the following architecture creating the folders and files:

src
    index.js
package.json

Our package.json must contain the following dependencies:

To clarify a bit:
apollo-server: it will allow us to build our Graphql API.
Graphql: is our language of queries, that is, the way we will request our data from the API.
node-fetch: we will use it as a channel to make calls to our API.

Ready this, I show you the easiest and fastest way for our API to be configured and everything in the src/index.js file should look like this:

What does the code do?

typeDefs: I create the type of object I am consulting and define the fields that I am going to consult / use.

resolvers: are the methods responsible for calling the query action.

This explanation is extremely brief, since as I announced above regarding all the resources that Graphql has.

When writing to the npm run start terminal, the Graphql interface will open in our default browser to start our queries.

As we can see, our Graphql API is working by connecting to the Pokemons API.

But, what is it for? Well, most API’s are made in REST, and we are exposed that at some point we need to make our Graphql API from data that is only consulted via REST. In addition to that, I think that we should always experience all the technologies that are offered to us, and not necessarily discard existing ones, we could instead and depending on each project strengthen the knowledge with this type of integrations.

You can get the code here: github.com

I hope you take advantage and remember any questions, comments or input is welcome in our comments section.

How to Manage High Perfomance Virtual Teams

virtual or remote team (a small number of people with complementary skills, who are committed to a common purpose and performance goals) is comprised of team members who share responsibility for achieving defined objectives and who perform from a flexible mix of stationary, mobile and/or remote work environments.What is the difference between manage on site developers or virtual employees worlwide, today the re is not a real difference and companies are improving new ways top manage virtual teams.

Virtual teams versus traditional teams

There are several important differences between traditional teams and virtual or remote ones:

  • Meetings are not always face to face
  • Workplaces of team members may be in different locations and time zones
  • Culture – team members’ cultures can be vastly different
  • Relationships tend to be more difficult to build as team members have different styles and behaviours and there is little or no time for personal interaction
  • Communication may be hampered because it is not always possible to see body language, facial expressions or gestures and non-verbal cues.

Today with emerging technologies is usually companies have to adapt to new challenges and lifestyles, now people prefer stay at home and share with family, not waste time not is a life rule, with new technologies and new commercial trends.

What is the difference between Remote vs Virtual Teams?

A remote team works directly for their manager to deliver defined work, but members are not geographically co located. This means that time zone is similar and guarateed a live comunication and interaction between employees and managers. Remote team member usually have specific funtional role and experience, software development, designers and data science are part of remote teams worldwide. Companies are open to contract remote position because is difficult get experienced talent.

Virtual Teams are brought together to perform specific tasks or resolve specific issues, virtual employees usually work inside the organization but have option of Work- from- home or inclusive freelance or part time jobs, but this can of position are the support team in specific tasks. Virtual Assitance, Call centers or Support Engineer are example of virtual teams and activities that they do.

A real advantage of virtual and remote teams is management in time and workflow that traditional employees not have, define KPis is key tool to measure performance of this teams. Not means that can have control all the time, but can guaranteed analytical data about workflow and deadline.

Software Versioning

What is software versioning

  • Software versioning is the process of numbering different releases of a particular software program for both internal use and release designation. It allows programmers to know when changes have been made and track changes enforced in the software. At the same time, it enables potential customers to be acquainted with new releases and recognize the updated versions.

How to version my Software?

  • Why do we need a version anyway? Well, you need some way to uniquely identify the software you have delivered. 
  • When you add extra information to it, it is also possible to give information about the state of your software. 

Best practices for versioning my software

  1. New projects start at version 0.1.0
    • You are starting with a set of features, not bug fixes.
    • Increment the minor version for each subsequent release.
  2. Start versioning at 1.0.0 if:
    • Your software is already used in production.
    • Other users depend on your software and care when the API changes.
    • You are worrying about backwards compatibility.
  3. The initial development phase is represented by MAJOR version 0
    • Make as many breaking changes as you want before v1.0.0
  4. Once you have released v1.0.0, API adjustments or other breaking changes are not acceptable without a new MAJOR version change.
  5. If you are adding new features without breaking the existing API or functionality, increment the MINOR number.
  6. If you are fixing bugs, increment the PATCH number.

The Versioning Problem

It is common for some users of software to ignore how to interpret the sequence of numbers and letters that we usually call version and from there lose all associated information.

It may actually be difficult to understand a software versioning scheme, as there is no one-size-fits-all model. On the contrary, there are multiple versioning schemes with different precepts and characteristics.

Switching away from software version numbers to years seems like one of the wisest decisions.

Users don’t care about version numbers. A model year is easy to understand. Version numbers don’t scale. 
Major, minor, alpha, beta, build number.. what does it all mean? What users might care about is knowing whether or not the software they’re running is current.  Why should it take two arbitrary numbers and a decimal point to identify what software you’re using? We identify tons of consumer products using a simple model year designator.  Once you get beyond ten versions, what’s the point of meticulously counting every new release? Better to stamp it with a date and move on.  

Who should care about software version numbers?

As a software consumer, the two most important things to understand when reading software version numbers are:

  1. What (if any) numbering convention is being used?
  2. What changes have been made to the updated version?
  • Enterprise Software Customers: Understand how the provider presents software version numbers.
  • Product Development Team: Developers should use software version numbers to help their customers understand how their product has changed and what kind of support they can expect for older versions.
  • Software Consumers: Even individual consumers such as smartphone users encounter software version numbers on a regular basis. 

Software Version Conventions Done Right

One of the most effective software version conventions involves semantic numbering. Other software version numbering conventions include, date-of-release, alphanumeric codes, sequential numbering, and unary numbering.

Different Types of Versioning

There are numerous variations to think of how you can version your software. Which variation you choose is not so important as long as you keep the following aspects in mind:

  • The version identifier must be unique, never re-use the same identifier;
  • Choose an identifier which has some logical sequence in it, e.g. alphabetical, numbers.

There are quite a lot of different types of versioning schemes:

  • Name Versioning Scheme: Another variant is to use names for your releases.
  • Basic Versioning Scheme: Single incrementing digit (e.g. version 1, version 2, …).
  • Internal Versioning Scheme: This is the versioning scheme which is visible for your users and which will be used when communicating about releases between you and your users. 

Semantic versioning

Semantic Versioning is a 3-component number in the format of X.Y.Z, where given a version number MAJOR.MINOR.PATCH, increment the
MAJOR when you make incompatible API changes,
MINOR when you add functionality in a backwards-compatible manner, and
PATCHwhen you make backwards-compatible bug fixes.
  • Versions by number

Something common is to handle versions using 3 numbers: X.Y.Z and each one indicates a different thing.

  • Versions for stability.

In addition to having versions by numbers, we can add a classification for project stability.

  • The options we have for this are: Alpha, Beta.
    • Alpha is an unstable version that is very likely to have many options to improve.
  • Beta a more stable version than Alpha in which we have the product in its entirety.
  • Patch Version

In the case of patches we can add a digit to indicate the patch: X.Y.Z.Patch

  • Version by date.

We would need to know exactly the date the software was published.

  • Public version is intended to be simple and memorable, indicating to customers that it is new & shiny (assuming people generally want “new & shiny”). People don’t understand “10.6.6527.14789” – but they get “2013” or “5”.
  • “Windows 7”, “iPhone 5S”, “Office 2013” – are all examples of a public version.
  • Private version is what we’re used to in the software world. An internal stamp that (hopefully) uniquely identifies a particular piece of software. 

Software versioning is a simple way of how to give a “name” to a unique part of the software. With just a few numbers, you can convey a lot of information about your project’s developmental progress, let users know when there are new important updates, and generally keep things organized. No matter what scheme you decide to use it will be ok as long as it is comprehensible for developers, testers and users.

Also for the QA area is easy when working with continuous integration due to the easy of download the build to test and send it and approve it.

DRY using props in React

When we are learning about React and we just begin to understand its structure we can face the need to avoid the repetition of logic in the application we are creating, for that reason today we are going to know about the use of props to reuse code and implement DRY ( Don’t Repeat Yourself) in our React project.

First of all, what are the props?

The props are the way in which React can send information between its components, the props are passed from superior components called parent components to inferior components also called child components.

Some features of the props are that they are immutable, which means that the child component should not change the value of the prop since they are used as read values, using props we can pass any type of data such as strings, numbers, booleans, arrays, objects or functions.

Ok, after what we have read, it’s time to put it into practice what the theory says.

In the next example we can see the use of props to send a string  from one component to another.

class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent name={"Child component"}/>
       )
   }
}

export default ParentComponent;

We can see that to send the data we call the child component and we pass the argument “name”, and to access it from our child component we only should do the following.

class ChildComponent extends Component {
 render() {
   return (
     <div>
       <p>{this.props.name}</p>
     </div>	
    )
  }
}

export default ChildComponent;

We only get this.props and the name of the variable we sent.

In the same way if we want to send a numerical value we do the following.

class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent number={1}/>
       )
   }
}

export default ParentComponent;

And to get it.

 class ChildComponent extends Component {
 render() {
   return (
     <div>
       <p>{this.props.number}</p>
     </div>
   )
  }
}

export default ChildComponent;

If we want to send another type of data such as an array.

class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent array={["value 1", "value 2"]}/>
       )
   }
}

export default ParentComponent;

We get the array in the same way as the other types of data.

class ChildComponent extends Component {
 render() {
   return (
     <div>
       <p>{this.props.array}</p>
     </div>
   )
  }
}

export default ChildComponent;

If we want to go through it, we can do it in the following way, the result is that it will show each value within the array.

class ChildComponent extends Component {
 render() {
   return (
     <div>
       {this.props.array.map((data) => (
           <p>{data}</p>
       ))}
     </div>
   )
  }
}

export default ChildComponent;

In the next example we are going to send an object.

class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent object={{name: 'My object'}}/>
       )
   }
}

export default ParentComponent;

In order to show the information we access the object that we sent and then to the property,  you can choose the names of the props as you like.

class ChildComponent extends Component {
 render() {
   return (
     <div>
           <p>{this.props.object.name}</p>
     </div>
   )
  }
}

export default ChildComponent;

Now something that we may be very interested in, is in sending a function, in order to not repeat  code and make DRY.

 class ParentComponent extends Component {
   constructor(){
       super()
       this.sum = this.sum.bind(this)
   }

   sum(a,b) {
       console.log(a + b)
   }

   render() {
       return (
           <ChildComponent function_sum={this.sum}/>
       )
   }
}

export default ParentComponent;

In the example we can see how to send a function to our child component, for example, the function is sent with the name of function_sum but we can use the name we want, we must declare the function in the constructor of our parent component otherwise we could obtain errors when we try to access it.

In our child component we access to the function in the next way:

class ChildComponent extends Component {
 render() {
   return (
     <div>
           <p>Press the button to sum a + b</p>
           <button onClick={() => this.props.function_sum(1,2)}>Sum</button>
     </div>
   )
 }
}

export default ChildComponent;

By pressing the “sum” button we can see in the console the sum of 1 + 2, executing the function found in our parent component.

Using all these methods that we saw, we can reuse code of our application, for example passing functions and not create them in one component and repeat it in others, to achieve DRY in react using props.

Angular vs React vs Vue.js

We are in a time when there are many JavaScript frameworks/libraries for frontend programming, among the most we have the following: Angular, React.js and Vue.js, this are the first three frameworks/libraries most used by developers, behind them are Ember, Meteor and Node.js

A few years ago we were in the era where many developers did not know what to use, Angular or React, since these were the most popular and more complete in the frontend environment, but in the year 2018 we saw a new member called Vue.js. This new member is a mix between Angular and React, and because of this it has taken a lot of power in the current market by it’s speed and sturdiness. That’s why Vue.js is amazing and we can see it in the top 3 places of the best frameworks/libraries for the frontend development.

In this blog, let’s explain a little bit about each one of them, so we can know important aspects and which one is better for our projects.

Angular is the oldest framework, when you compare it with React and Vue.js, since it was released in the year 2010 by Google. This framework remains among the top 3 positions, due its speed and performance, also that has been improving each of one of its versions to continue competing in the actual marketing of the JavaScript Frameworks. In the year 2018 Angular launched its stable version that is Angular 7.

React.js is one of the most popular libraries of the moment and every time more developments use it. Also React was created and maintained by Facebook and more communities support it. This library is focus in the creation of user interfaces. For this, React has many modules and components that already have many integrated functions that helps the development of the application in and easy way and faster.

Vue.js is another framework/library, this was created by a former Google employee. This framework it’s becoming popular even when it does not have the support of a big company, its stable version was release in 2018. This framework is progressive, its functionality is to build user interfaces, every day Vue.js is growing thanks to new versions and communities, and all the advantages that it has.

Vue.js has plugins like Vue-Router which manage all our project routes, it also contains plugins to connect to external services such as Vue-axios or Vue-Fire. We also have Vuex that is inspired a bit in Redux, this is a very important part since it helps us to manage our project’s data.

The History between React, Angular and Vue.js and some differences among them


Licenses

Before using an open source framework we must verify the licenses, these three frameworks/libraries use the same license called MIT, which provides limited restrictions for reuse, we must know very well the restrictions that these licenses have before using any framework or software.I have attached the link so you can know more about this MIT license: MIT License.

Community

This three frameworks/libraries has many documentation, also they have big communities in which they provide many benefits as new functions and also repair or report errors that are found. Next we can see the statistics of the repositories of these frameworks/libraries

Components

The components are an important part of these frameworks. The components receive inputs and change the behavior within it. These changes are always seen in the user interface somewhere on the page. By using these it facilitates the reuse of code and this makes the development more efficient. Now let’s explain how it works in each of these frameworks.

  • Angular: Here the components are known as directives. These directives are only bookmarks in DOM elements. Angular separates the UI part of the components as well from the attributes of the HTML tags, and their behaviors in the form of JavaScript code.
  • React: This framework combines the user interface and the behavior of the components
  • Vue.js: In this framework, the user interface and behavior is also part of the components, which makes things more intuitive. Vue is also highly customization, this allows us to combine the user interface and the behavior of the components with a script. You can also use preprocessors instead of CSS, and Vue is great at integrating other libraries, such as Bootstrap.

Learning Curve

We always ask ourselves how difficult it is to learn in each of these frameworks / libraries, for that we will know how long it takes for us to learn a little about these Frameworks / libraries.

  • Angular: Angular has a rather complex learning curve, since to master Angular we must know concepts such as TypeScript and MVC, so Angular takes time to learn it.
  • React: On the main page of React, this offers a guide to configure it that can last approximately one hour. The documentation is exhaustive and very complete; These guides contain how to solve common errors and other features that require third-party libraries. This means that React does not have a big learning curve.
  • Vue: As we mentioned before, Vue provides a greater capacity for personalization, therefore it makes it easier to learn than previous Frameworks. But simplicity and flexibility can be a double-edged sword, since it makes debugging difficult and allows poor code.

Related image

Installation

Angular
To install Angular do the following:

  • git clone https://github.com/angular/quickstart.git quickstart
  • cd quickstart
  • npm install
  • npm start

To install the Angular CLI (Command Line Interface) use the command below:

  • npm install -g @angular/cli

React
React can be installed using the NPM command below:

  • npm install react –save

To install the React CLI, you can use the Create-React-App as seen below:

  • npm install -g create-react-app

Vue
Vue can be installed using the NPM command below:

  • npm install vue

The Vue CLI can be installed with the command below:

  • npm install -g @vue/cli
Related image

¿Which one will be the winner between Angular, React and Vue?

Now that we know a little more about the history of these three Frameworks / libraries and all their characteristics that makes them be among the top three of the best Frameworks / libraries for Frontend.

Angular is the oldest of the frameworks, it also contains many and big contributors and is a complete package, but its learning curve is quite complex. This framework is a good option for companies with large teams that use TypeScript.

React already has several years in the market and also has a large number of libraries, this makes it gain acceptance quite quickly. React has a large labor market and its future looks bright.

This framework is a good idea to start using frontend JavaScript frameworks because its learning curve is not so complex.

Vue is one of the new competitors in the arena of the Frameworks world and without the backing of an important company, it has performed very well, fighting against its opponents, Angular and React, that has big companies under. Vue, given its simplicity and flexibility, makes it a quite easy to learn framework and that its development is quite effective.

The big question is: Which one is the winner in the world of JavaScript frameworks? The truth is that you can’t pick a winner. Because each of them has its own benefits and disadvantages,  so this makes none better than the other. When we want to use any of these libraries we must know very well what we want to do in our project, so we must first investigate which one is the right framework for our project.

Best 4 Marketplaces to Find the Right Software Engineer in 2019

Hi 4Geeks Nation! Probably some of you have been getting issues to find software developers or software engineers for your company. You’re not alone. We have experienced this feeling at the past. And let me tell you, in business SPEED IS THE KEY.

You know, hiring is hard, frustrating and it consumes much time. Agree? A typical process includes pre-screening, technical interviews (3 in average), negotiation, etc.

Today I want to share with you some websites (or marketplaces) to find software developers on your budget in this 2019. Some of this marketplaces are assisted by AI, others are based completely by humans experts.

Option #1 – 4Geeks Teams:

4Geeks Teams is the first platform to find and hire top in-house software developers in Latin America, launched early 2017. Most North America-based startups and companies prefer worker in their same timezone, and Latin America is pretty near for them, compared with Asia or Europe.

You could rent part-time or full-time developers.

4Geeks Teams is completely assisted by humans on every step to find out your next software engineer skilled in Python, Java, Ruby on Rails, Microsoft .NET, PHP, React.js, React Native, Salesforce or Data Analysis, in 72 hours. So you just need to focus on building and growth… on your vision. Check out full covered technologies.

Some US-based companies like SmarterSelect are currently boosting their product development by leveraging on 4Geeks Teams. Watch what Robert Davis, SmarterSelect CEO says.

Hourly prices start in $40 USD.

Option #2 – Turing:

Turing is a AI-backed marketplace to find remote software developers around de world. Platform will show you some posible options to your approval.

In their website they don’t show any great information about skills, capabilities or technologies. Pricing is no clear at this time. If you need more information about terms, hiring process, agreements or even pricing you need to fill out the contact form on their website.

They offer 2 weeks trial.

Option #3 – Toptal:

TopTal is a popular marketplace where companies or individuals could rent software developers according to their needs, globally. Developers will work remote, so they could be at any place in the world. This is good or bad, depending your business life, because of different timezones.

They offer 2 weeks trial.

Hourly prices start in $70 USD.

Option #4 – UpWork:

UpWork is a global freelancing platform where businesses and independent professionals connect and collaborate remotely.  According to their website: a client puts up a job posting and deposits some money in Escrow. Freelancers then apply for the job for the client to hire the best.

You can also look at freelancer’s rating, comments and past work, in order to decide if they are a good fit for your team.

So, pricing terms depends on how much a freelancer charge.

Analyzing videos with Python

The analysis of videos is an important part of the current society, and the uses go further and further everyday, from security in the airports, to sports, cinema, transport, health, home automation, etc. Look closely at your environment, and maybe you can find a camera, and probably there is a system running on the background, that is analyzing all the content.

To analyze videos, the first question you should ask yourself is not ‘How’ but ‘What’. What I want to do? What do I want to analyze? What are my scopes or limits? For example, maybe you want to analyze balls? Perfect. What kind of analysis do you want to perform? An example is to detect balls, but you can also track balls. But this does not stop here, there are a number of other options that you should consider before starting. For example, how many balls do you want to analyze, do you have a maximum, a minimum, what happens if those limits are ignored? What happens if a ball enters in the middle of the video, should you detect it or ignore it? These and many other are questions to consider when you try to analyze videos, and each one has a better solution that works perfectly for that situation, but maybe not for the rest. That’s why we need to know what to track before start.

Once you defined your scope and limits, you can begin to investigate how to carry it out. We will start with a simple example, and from there we will add more things to analyze. And the simplest is to detect movement, a ball as in the previous example. At the moment we are not interested in anything other than finding our ball inside our video.

First, we create a Python virtual environment to separate the packages globally, and only install them locally on the environment.

> python3 -m venv env

> source env/bin/activate

Now we are going to install the packages that we need, make sure you have updated pip to its latest version.

> pip install opencv-python

> pip install opencv-contrib-python

This will install OpenCV in its latest versión( 4.1). With opencv-contrib you have access to many more features within the same cv2. Also, installing OpenCV also install Numpy by default.

First we will make the general structure, which is open a video and play it, nothing else. I’m going to use this video, which is just an orange ball rolling on a white background.

import cv2

import numpy as np

from time import sleep

class Detector:

    def __init__(self):

       self.height = 0

       self.width = 0

    def detect_movement(self):

        cap = cv2.VideoCapture(‘assets/vid_test.mp4’)

        if not cap.isOpened():

            raise ValueError(‘The path specified is not valid.’)

        while cap.isOpened():

            success, frame = cap.read()

            if not success:

                break

            # Your video analyzer goes here!

            cv2.imshow(“Display the result”, frame)

            cv2.waitKey(0)

    cap.release()  # Don’t forget to release your video!

if __name__ == “__main__”:

    detector = Detector()

    detector.detect_movement()

    cv2.destroyAllWindows()  # Close all the opened windows

Here’s the result!

Apply a Mask

Now let’s start with the analysis. First, we are going to apply a mask to our frame, so we can only see the ball.

          lower_red = np.array([0, 130, 75])

          upper_red = np.array([255, 255, 255])

          hsv = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV)

          mask = cv2.inRange(hsv, lower_red, upper_red)

          contours, _ = cv2.findContours(

              mask, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE

          )

          red = cv2.bitwise_and(frame, frame, mask=mask)

I created a red mask, so I can ignore the rest. If you put another object on the video, as long is not red, is going to be ignored! Since our ball is orange/red, is displayed. Check it out!

Difference between two frames

Now, we are going to see the difference between two frames. We need one frame to compare with the rest, I’m going to take the first frame.

Make sure you put this piece of code before the while.

_, first_frame = cap.read()

After that, we are going to add this line inside the while.

diff = cv2.absdiff(first_frame, frame)
Our first frame is the white background RGB(255, 255, 255), and our ball is orange, let’s say RGB(255, 127, 0). If we take the difference between these two colors, the result is light blue RGB(0, 128, 255).  Our background is still white on the rest of the frames, so when we take the difference between RGB(255, 255, 255) and RGB(255, 255, 255) the result is RGB(0, 0, 0), black! Here is the result.

Using a Detector

Now we are going to add a real detector. OpenCV has several options to detect objects. For example Haar cascades if you want to detect faces or pedestrians. Our example is far simpler, so we are going to use one that fit our needs, for example SimpleBlobDetector. This one allow us to detect simple objects like balls.
def getBlobParams(self):
    params = cv2.SimpleBlobDetector_Params()
    params.filterByColor = True
    params.blobColor = 255  # 0 is white, 255 is black, on the grayscale
    return params
detector = cv2.SimpleBlobDetector_create(self.getBlobParams())
keypoints = detector.detect(frame)
im_with_keypoints = frame.copy()
if keypoints:
    x_pt, y_pt = int(keypoints[0].pt[0]), int(keypoints[0].pt[1])
    ball_diameter = round(keypoints[0].size)
    cv2.circle(
      im_with_keypoints,   # Image output
      (x_pt, y_pt),   # X, Y coordiantes
      int(ball_diameter/2),   # Radius of the ball.
      (255, 0, 0),   # Color, BGR.
      3   # Thickness of the line.
    )
The blue circle around our ball means that our detector is working. If you check the original video, you will see a black border around the ball. I’m actually detecting this perfect circle instead of the ball, just by saying to my detector that I want to track something black, SimpleBlobDetector tracks circles by default. This will give you the exact coordinates of the ball, which can be used on many things, like tracking
As you can see, OpenCV is a really powerful tool that works for you, you just need to have a clear idea of what you want, and OpenCV does it for you!

An Internet weakness: BGP hijacking

As we were talking before BGP is the protocol that reings the Internet (if you didn’t read the last post, check it out here: https://4geeks.io/blog/have-you-ever-thought-about-how-internet-works/). BGP was created with an idea in mind: connect Autonomous Systems (AS) around the world, but security was not taken into account.

    A simple action as change (as AS) my information about the best route that I know for another AS, it could redirect all the traffic to a “blackhole”. Also it could increase the response time for a site or region in a considerable quantity. These actions are known as: BGP hijacking.

    The BGP hijacking (or IP hijacking) could be generated in an accidentally way or on purpose. In 2008, Pakistan wanted to restrict the access from inside the country to the video site www.youtube.com. There was a misleading configuration that derived in all traffic to Youtube went to Pakistan. For sure, the site was unavailable for a few time until the BGP tables were updated with the correct routes.

    Another similar case, this time from Iran in 2017, was looking for censor some websites to its citizens. The politics were applied and effectively those sites were banned in the country , however this rules were propagated to other AS provoking that users from other countries like China or India couldn’t access to them. Zach Julian made a good analysis about the incident and how the rules were propagated. If want to read it, here’s the link: https://know.bishopfox.com/blog/2017/01/in-the-news-a-bgp-hijacking-technical-post-mortem.

Even all the IP addresses from an entire city could got redirected to a blackhole. Image obtained from: https://www.freepik.com/free-photo/keyboard-social-business-young-person_1088171.htm

    An attack generated on purpose, categorized as a Phishing attack, was detected last year: Amazon’s Route 53 service were hijacked and affected all the traffic that went to this service. The attackers redirected the traffic from MyEtherWallet.com, a cryptocurrency website, to an identical fake side and they stole a small amount of currency. With the attack, the users were entered to the correct address, but they were redirected to a fake server located in Russia.

BGP hijacking as a censorship tool

    As we can see, it’s totally possible to restrict content to a province, state or even a country. In a fictional context of a “cyber war”, a group of attackers could make that sides from a whole country cannot be accessed from other places. This could provoke considerable economic losses while the hijacking is active.

    Also a group of institutions could agree to ban another institution or country from their AS and groups that does not have relation with the agreement could be affected by this. For example: AS1 and AS2 want create a “blackhole” effect in all the traffic that is for AS4, so they will not redirect to that AS. Exists another AS (AS3) that depends on AS1 and AS2 to connect to AS4, but the agreement will not allow the traffic to AS4. It does not matter if  AS3 and AS4 has excellent relation, they will not could connect with each other.

It has happened more than 25 years since BGP creation and the protocol still vulnerable to this kind of attacks. Of course, there are strategies to avoid a possible attack, but the BGP hijacking still active and all the internet structures remains on it. It is necessary to move to another protocol more secure than the actual and one that does not allow the censorship to another AS.

Server Side Rendering in React with no configuration

Creating a React.js application is simple, but especially those who are beginners (included me) in this world of programming, sometimes we let slip certain terms, for example, Server Side Rendering (SSR).

There are many articles dedicated to this topic and certain professions dedicated to this area, for example SEO. But quickly, to place ourselves in this context; our pages/applications have labels with information that allows browsers such as Google to define the theme, category, type of content, among other parameters, which is our focus on the web or where we want to go (target market).

With good practices in the SEO trade, the “crawlers” will give the information to Google, and after a certain analysis the search engine will define the position of our website among the search results.

But React, by default, does not perform this type of task or at least does not offer us the possibility of doing it.

A few months ago we shared with you a blog dedicated to the creation of a React application but with the SSR feature (here). In the small demonstration application we use a small framework called Next JS, who makes SSR work accurate in Javascript applications.

We’ve been working with Next JS, and we can say that it is very good, however it has some characteristics unrelated to React (because Next JS can be added to any JS application) that makes us configure some files in a slightly more complex way; as technology lovers we know that every resource is being improved with the passage of time, and with that comes practicality and ease of use.

Now, we met a new tool called Razzle. It is simply the same work that is done with Next, but Razzle tries to deviate as little as possible from React, as well as configuring as little as possible and therefore brings some of the libraries by default.

For example and perhaps the most valuable thing for those of us who have dealt with the use, is the navigation and Razzle allows you to use react-router-dom already integrated.

Also Razzle is useful with Reason, Vue, Elm and Angular according to their own documentation.

To create the Razzle project just type in your terminal:

npx create-razzle-app app-name

The above command will create the necessary files to start working, start by modifying your App.js in the same way you do with a React project. You can see the configuration of server.js and check the use of express, as well as react-router-dom and react-dom for your backend and frontend work.

yarn start

In conclusion, I am really fascinated by Razzle, the use has been little, we are still in full investigation of the tool, we write this according to the experience we have obtained, therefore if you have something to share about this tool we thank you participate in the comments section to help the community.

It can be simply your appreciation to Razzle or some problem or error that you are getting, so we can help you or someone could also contribute to that solution you need.

We are willing to learn with each contribution assuring us of the benefit of all of us who are in this beautiful and great world of programming.

[30% off] Detect missed growth opportunities for your businessClaim an Audit
+