Meet Diego Méndez

Welcome to another interview of the series Meet our Geek Team. On this occasion we talk to Diego Méndez, which is an software engineer here at 4Geeks. Diego is creating amazing products under 4Geeks branding, own software to make the world easier.

He is from Zarcero, which is a nice place un Costa Rica, They produce a lot of dairy products such as milk, cheese and sour cream. In Zarcero we can find a really amazing park with some tree sculptures. But let’s meet Diego:

How will you describe yourself?

I consider myself a cheerful, respectful, kind person, and always willing to help people who need it, also a person who loves their profession and that is why I always try to do my best.

What do you do in your free time?

 In my spare time I like to play soccer, go to the beach, take a walk in the mountains to clear my mind. I like to spend time with my family and friends but also I try to to learn new things about technology.

Best series you have ever watched?

  1. The Walking Dead
  2. La casa de Papel
  3. Vikings
  4. Marco Polo
  5. Game of thrones
  6. Z Nation
  7. West World

Mountain or Beach ?

I prefer the two options, since both are quite nice and they are places to have fun and recover from stress, also, both are part of nature and serve to clear the mind of all situations.

Do you do sports (adventure, extreme, endurance) ?

At the moment the sport that I practice is soccer, but then I hope to practice other sports both extreme and adventure. If we talk about extreme sports I would like to practice skydiving and motocross, and in adventure sports it would be mountain biking, diving and climbing

Which type of music do you like?

I like music electronic, pop, rap and a little rock

What are your top 5 books of all the time ?

  1. The Lord of the Rings
  2. The Hobbit
  3. The Art of Loving
  4. The Challenge of Love
  5. The Art of War

What are your top 5 movies of all the time ?

  1. Titans of the pacific
  2. BattleShip
  3. Avengers
  4. Saw
  5. The Purge

What is the most excited part of being Software Engineer ?

The most exciting part is that every day there are new challenges to be solved and with this, every day, I gain more and more experience.

What is the most challenging situation you had faced in your current position ?

The most challenging part of my current project is to implement different designs within the project, giving users the ability to select their preferred UI. 

Which is the best part of being part of 4Geeks team ?

The best part was meeting the team of 4Geeks, as they are always willing to help or evacuate the doubts you have, and the good thing is that you work in an environment where you always feel encouraged and with all the desire to work.

What are your goals for this year?

My goals in this year are to learn more programming languages ​​in order to have more experience, in addition to certify myself in the JavaScript part, another goal is to get my English improved.

Whenever you need help on how to start making ideas into reality though technology, 4Geeks team is up and ready, just reach out to us at hello@4geeks.io.

E08: Robotic Process Automation

Robotic Process Automation (RPA) is how business are getting a lot of customers, automatically. 24/7.

You can subscribe to this podcast on your favorite platform; iTunes, TuneIn, iVoox and YouTube included. Rate us and share with your community. You can always send us your questions by voice 🙂

Wait the next episode on next week.

If you plan to invest in RPA, or if you need help (or simply you need a friend), you already knows what to do.

Hosts: Allan Porras and Sergio Monge.

Deploying a ReactJS and NextJS project to Firebase

We are in one of the best moments as developers, living among wide range of technologies, tools and trends that every day only grows and grows, and if you are passionated about learning and applying technologies during your spare time, today is the time.

Today we will focus precisely on ReactJS and the performance we can provide to our applications using the scalability of Firebase with Cloud Functions itself.

In addition, we will use the NextJS framework to server rendering, which will help us to easily configure and solve SEO issues but, more importantly, the lower degree of latency between server and client to offer the users the best experience.

Let’s start!

We need first to install Next.js in our work environment:

npm install -g create-next-app

Followed We create a project named “firebase-nextjs”:

create-next-app firebase-nextjs: this command will create the project but it will also install the react and react-dom dependencies, which can be seen in the package.json file.

We run yarn dev and our project will run, by default, on port 3000 (localhost:3000).

NextJS will search the corresponding file in the pages folder for each route, for example: the path “/” indicates that the file pages/index.js will be searched.

The framework is built on React, it maintains a structure appropriate to it, which is why we can see a folder called “components”, where each component we want to use for our views will be store.

So, if we use NextJS and React, why not to add Material-UI?

Let’s install locally Material-UI: npm install @material-ui/core.

We will create two very simple pages to observe the behavior of these three frameworks made to make life easier!

In the folder pages we create “page1.js” and “page2.js”.

We add the following code to pages/page1.js:

import Card1 from ‘../components/card1’

 

const Page1 = () => (

 <div>

   <Card1 />

 </div>

)

 

export default Page1

In the folder components we create “card1.js” and add any of the examples in Material-UI in the cards section and personalize it in our own way.

To see the content of the page page1.js we can go to “http://localhost:3000/page1” or use Link of NextJS to redirect us.

We do the same steps for “page2” and “card2”.

Up to this point, we should have a NextJS application working perfectly with React components.

We are ready to enter the most interesting part of this post. We are going to structure our project according to the guide of James Hegedus.

Therefore, at the root of our project we create a folder called “src”, inside this folder you will find another another called “app”, where our entire application files will be stored, we might move all the files to the “app” folder.

We will go to the firebase console and create our project.

We will be presented the general panel of the project, as you can see, Firebase gives us Authentication, Database, Storage, Hosting, Functions and ML Kit, each of them very interesting, but we will focus on Functions.

Why Functions? If we do not use NextJS, and it is enough that in our source code of the application we see only some ‘<script>’ tags then the option would be Hosting, but we want to get the server rendering and the magic of NextJS that is really amazing.

Next we run the following commands in the root of our project:

  • yarn global add firebase-tools
  • firebase login
  • firebase init

When we run firebase init, a series of questions will be displayed:

  • Which Firebase CLI features do you want to setup for this folder? | Select “Functions” and “Hosting”.
  • Select a default Firebase project for this directory: | Select the project that you created earlier in the firebase console.
  • What language would you like to use to write Cloud Functions? | In my case is “Javascript”.
  • Do you want to use ESLint to catch probable bugs and enforce style? | Write “N”.
  • Do you want to install dependencies with npm now? | At this time it is not necessary, write “n”.
  • What do you want to use as your public directory? | Write “src/public”, two files will be created that will be created to show the first view in case of not finding any and the other in case of error.
  • Configure as a single-page app (rewrite all urls to /index.html)? Write “N”, in our case it should be a more complex application.

Ready!

We will find in the root of our project a folder called “functions”, just move it inside “src” folder.

In our file firebase.json we remove the existing code and update it by the following:

{

 “hosting”: {

   “public”: “src/public”,

   “rewrites”: [

     {

       “source”: “**/**”,

       “function”: “next”

     }

   ],

   “ignore”: [

     “firebase.json”,

     “**/.*”,

     “**/node_modules/**”

   ]

 },

 “functions”: {

   “source”: “src/functions”

 }

}

In the package.json of the functions folder we add the following dependencies (after several tests I consider that they are the versions that present fewer errors):

“@material-ui/core”: “^1.4.3”,

   “classnames”: “^2.2.6”,

   “firebase-admin”: “~6.0.0”,

   “firebase-functions”: “^2.0.0”,

   “next”: “^6.1.1”,

   “prop-types”: “^15.6.2”,

   “react”: “^16.4.2”,

   “react-dom”: “^16.4.2”

In the case of dependencies “classnames” and “prop-types”, they are needed for this example that we are developing, also as a tip, each dependency we need for our project must go in this file as well as src/app/package.json , therefore, also add the dependencies to src/app/package.json.

To make sure that NextJS runs successfully in Cloud Functions, we remove the contents of functions/index.js by:

const functions = require(“firebase-functions”)

const next = require(“next”)

 

var dev = process.env.NODE_ENV !== “production”

var app = next({ dev, conf: { distDir: “next” } })

var handle = app.getRequestHandler()

 

exports.next = functions.https.onRequest((req, res) => {

 console.log(“File: ” + req.originalUrl) // log the page.js file that is being requested

 return app.prepare().then(() => handle(req, res))

})

Now we proceed to install the dependencies in functions and in app, within src/functions and src/app run yarn or npm install depending on the manager you use.

We create a .gitignore inside the functions folder and add only “next”.

We need our material-ui components to be displayed correctly, thanks to NextJS we should only add the following to src/app/next.config.js:

const path = require(‘path’)

const glob = require(‘glob’)

 

module.exports = {

 distDir: “../functions/next”,

 webpack: (config, { dev }) => {

   config.module.rules.push(

     {

       test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,

       use: [

         {

           loader: ’emit-file-loader’,

           options: {

             name: ‘dist/[path][name].[ext]’

           }

         },

         {

           loader: ‘file-loader’,

           options: {

             name: ‘dist/[path][name].[ext]’

           }

         }

       ]

     },

     {

       test: /\.(css|scss)/,

       loader: ’emit-file-loader’,

       options: {

         name: ‘dist/[path][name].[ext]’

       }

     },

     {

       test: /\.css$/,

       use: [‘babel-loader’, ‘raw-loader’, ‘postcss-loader’]

     },

     {

       test: /\.s(a|c)ss$/,

       use: [‘babel-loader’, ‘raw-loader’, ‘postcss-loader’,

         { loader: ‘sass-loader’,

           options: {

             includePaths: [‘styles’, ‘node_modules’]

               .map((d) => path.join(__dirname, d))

               .map((g) => glob.sync(g))

               .reduce((a, c) => a.concat(c), [])

           }

         }

       ]

     }

   )

   return config

 }

}

Let’s update our package.json that is in the root of the project with the scripts with which we will handle the application:

{

 “name”: “firebase-nextjs”,

 “version”: “1.0.0”,

 “license”: “MIT”,

 “scripts”: {

   “install”: “yarn build-all”,

   “next”: “yarn build-firebase && cd \”src/app\” && yarn && yarn dev”,

   “preserve”: “yarn build-all”,

   “serve”: “firebase serve”,

   “predeploy”: “yarn build-all”,

   “deploy”: “firebase deploy”,

   “build-all”: “yarn build-next && yarn build-firebase”,

   “build-next”: “cd \”src/app\” && yarn && yarn build”,

   “build-firebase”: “cd \”src/functions\” && yarn”

 }

}

Now, in the root project run yarn init and then you have the next options:

yarn next: We run the project locally by port 3000 by default.

yarn build-all && firebase deploy –only functions: we build our project for production and deploy to firebase.

With all the steps above the application must run successfully, the test project is available in github, so you can compare, to get a better guide and understanding of the code.

Conclusion

This is a contribution that is made from the same learning obtained, so we are willing to feedback and/or answer your concerns about the technology and the project as such.

We try to be aware of the frameworks and tools of the moment to get the most out of each one, so you can expect more from this type of blogs.

Enjoy it!

Support:

Resources we used:

  • NextJS: 6.1.1
  • React: 16.4.2
  • Firebase functions: 2.0.0
  • Material-UI: v1.5.0

References:

E07: QA process with Meli Arce

Hi 4GeeksNation! Welcome back to a new episode on The 4Geeks Podcast. Today we are talking with Meli Arce, our QA Lead here at 4Geeks, about all the entire QA (Quality Assurance) process.

You can comment always every single episode. Please rate / share to help us reach out more people. You can always send us your questions by voice 🙂

Happy listening!

Hosts: Allan Porras and Sergio Monge.

Meet Maria Laura Gonzalez

Welcome to another interview of the series Meet our Geek Team. On this occasion we talk to Maria Laura, which is the person in charge to find 4Geeks talent around the world. Most of our engineers and talent is here because of her. She is from Venezuela.

Maria Laura answered some questions about her and her tastes:

How will you describe yourself?

I describe myself as a very organized person, I don’t like improvisation and I always endeavour to doing good. If it’s possible, on my part, live at peace with all.

What do you do in your free time?

 I like to listen to music, rehearsing with my choir, reading books and watching series and movies.

Best series you have ever watched?

  1. Black
  2. American Crime Story
  3. How I Met Your Mother

Mountain or Beach ?

Beach, always beach. I just love the relaxing sound of the sea and swimming.

Do you do sports (adventure, extreme, endurance) ?

I currently don’t practice any sport. I just sing in a choir.

Which type of music do you like?

All good sounds of rock, reggae, tropical rhythms, classical, instrumental music, jazz, blues.

What are your top 5 books of all the time ?

  1. Animal Farm.
  2. Harry Potter.
  3. Cien años de soledad.
  4. La tregua.
  5. The Goal

What are your top 5 movies of all the time ?

  1. Star Wars.
  2. Whiplash.
  3. 12 Years a Slave Mask.
  4. Obsessed.
  5. Finding Nemo.

What is the most excited part of being 4geeks talent acquisition ?

Knowing people from many different places.

What is the most challenging situation you had faced in your current position ?

In one opportunity, I provided distorted information to a candidate, because I wasn’t familiar with the Costa Rica laws. Fortunately, the situation was solved.

Which is the best part of being part of 4Geeks team ?

I love the working methods and the coworkers always are willing help you. Unfortunately I can’t join them in all outdoor activities (she is in Venezuela).

What are your goals for this year?

1. To spend a wonderfull time with my family at the Margarita Island.
2. Buy a car.
3. Emigrate.

Whenever you need help on how to start making ideas into reality though technology, 4Geeks team is up and ready, just reach out to us at hello@4geeks.io.

E06: Blockchain industries

Hey guys! Welcome back to a new episode in The 4Geeks Podcast. Today we are talking about Blockchain, and it can be used to disrupt some industries.

Banking, Supply Chain, Security, Insurance, Crowdfunding, Government, Health, Online Music and Real Estates are some industries that we talked about on this episode.

This was our agenda:

  1. Banking:
    • Citi Coin, from Citi Bank. (“equivalent to bitcoin”).
    • HSBC has made what it claims is the world’s first commercial trade-finance transaction using blockchain.
  2.  Supply chain (https://goo.gl/ntYkvW )
    • Supply chain is more complex than before
    • Difficult for customers or buyers to truly know the value of products
    • All process with IoT gaining transparency
  3. Security
    • Blockchain-based systems don’t have a single place to attack due to the technology’s basic principles, where each block is immutable and cryptographic.
    • Each block has previous hash references (composed from the data)
    • Proof-of-work (latency) and proof-of-stake(based on percentage)
  4.  Insurance
    • Fraud: $40B a year in loses for fraud, paperwork process increase fraud. Eliminate double booking, ownership and reduce premium division.  
    • Health insurance: records secured and shared between.
  5.  Charitycrowdfunding (Kickstarter, IndieGogo)
    • Most of the time we don’t know where the money is.
  6.  Government (https://goo.gl/exJmbu ):
    1. National Identity Management Systems
    2. More transparency to manage citizen’s data.
    3. Tax and Internal Revenue Monitoring
    4. Voting
    5. Dubai and Estonia
  7.  Healthcare
    1. Share your own data
    2. Portable around the world.
  8.  Online Music:
    1. Listen directly from artists
    2. April 2017 — Spotify acquires blockchain startup Mediachain to solve music’s attribution problem … Mediachain is an startup based on NYC (“they will work on developing better technology for connecting artists and other rights holders with the tracks hosted on Spotify’s service.”)
  9.  Real Estate (http://ubitquity.io  — https://imbrex.io/ )
    1. Title records
    2. Transparency on property improvements
    3. Easy to mapping available properties to buy, real time updated.
    4. Possibility to gain younger investors (equity fund).

Don’t forget to rate us and share with your team! You can always send us your questions by voice 🙂

Hosts: Allan Porras and Sergio Monge.

Have you ever thought about how Internet works?

If you are reading this article you have an Internet connection (or a very special power that should be sharing with the world). We know that the data is going to travel from our devices to the Internet and then come backs. But, what is the Internet? Popularly the Internet is a “network of networks”, all the devices that are participating in the Internet are connected to a company that serves that connection. We know them as Internet Service Provider (ISP).

The ISPs connect each other to keep the data traveling from one place to another. As you can imagine, there are a lot of ISP and some of them have better infrastructure than others. Depending of their characteristics, we have tiers that allow us to classify them in Tier 1, Tier 2, and Tier 3.

The Tier 1 ISP allows the communication between each other, they do not bring services to the end user (you and me), and their infrastructures is bigger than other tiers. Can represent big land extensions, for example, continents, and allows the data exchange through sea cables.

Tier 2 ISP are in charge of connect Tier 1 with Tier 3 through agreements. Their size is less than Tier 1 and they could be part of them. Tier 3 conforms Tier 1 and Tier 2 and bring the different services to the end user. Now that we know the different tiers, it surge a big question: how do they allow that communication between each other?

The Autonomous System (AS)

Until this moment we only know about the ISP definition, but there is another important concept that have not been touched: an Autonomous System (AS). Basically, an AS is a system that could change its behavior in response of an unexpected event. At network level, it is a collection of devices that their behavior are under common administrative control. It could be a company, an university, an ISP, a organization or a mix of them.

To allow data exchange, they work under the Border Gateway Protocol (BGP). This protocol is not an automatic one that calculates the best way for the data to get from one point to another, but it takes in count different aspects that could be political or economical.

Many AS have contracts that allow another AS to use their networks to transmit data without cost, this practice is called Peering. On the other hand, when an AS charges to transmit data through its networks is called Transit. These contracts obligate to an AS to choose a route that cannot be the optimal.

Let us think in a little example. AS C is located in Brazil and needs to exchange data with AS Z from Australia. AS C does not know which route have to use. It has two possible options: send the data via AS I that is far away from AS Z, the data has to travel to another AS T before arrives Z, and it is very expensive, or AS M, which is really close to AS Z and the best option to choose. Which option do you think AS C it is going to use to send data? AS M ? No, it decides to send it via AS I.

Visual representation from our example.

The data that pass through AS I also needs to travel through AS T before reach its destination. Vectors graphics designed by Freepik.

AS I was not the best option, but we did not know that the organization in charge of AS C has an economical agreement, which obligates all the data to travel via AS I. In case that AS I gets down, the data will travel via AS M  (the AS C needs to send the data, if the other AS is available, why not send the data through AS M?)

In real life, AS are identified by numbers. Internet Assigned Numbers Authority (IANA) is the nonprofit organization in charge of assign those numbers to each different system. Each region in the world has a register (member of IANA) that has a pool of numbers available to be assigned according to their necessities.

Now you know how the data is transmitted from one side to another. As you could noticed, we have a big political problem: some AS could deny to transmit all the information from a specific AS, many places even countries could be banned from Internet applying this restriction. But this is another topic that we will see in another article.

E05: DevOp tools

Hi there! Welcome to this new episode! Today we are talking about DevOp tools we use for all entire DevOp cycle.

We started describing and mention some tools we have used here at 4Geeks to build products. Some of them steps we talked about are Plan, Code, Build, TestRelease and Deploy, Operate and Monitor.

If you are a software engineer, or if you just are dealing with servers, coding and something like that, you will love this episode.

Remember you can subscribe on iTunes, TuneIn, iVoox or even you can listen it on our YouTube channel. Don’t forget rate us to reach more people. You can always send us your questions by voice 🙂

Hosts: Allan Porras and Sergio Monge.

Meet Erifranck Nuñez

Welcome to another interview of the series Meet our Geek Team. On this occasion we talk to Erifranck Nuñez, which is an software engineer here at 4Geeks. Eri is a proactive and self-learner person. He is always trying new technologies and looking forward to become a better engineer.

He has a youtube channel where he helps developers to be better and he teaches technology stacks, demonstrating his willing to help to the community. We decided to know Eri deeper, that’s why I asked some questions, check it out:

How will you describe yourself?

Passionate and creative frontend developer.

What do you do in your free time?

 Draw, learn about other programming languages or programiming paradigms, read about productivity, record videos for youtube to teach about development, listen disney sounds

Best series you have ever watched?

  1. Stranger things.
  2. How to train your dragon.
  3. Sense8

Mountain or Beach ?

Beach, because i’m from the coast of Venezuela.

Do you do sports (adventure, extreme, endurance) ?

In only workout at gym.

Which type of music do you like?

Rock music.

What are your top 5 books of all the time ?

  1. Eloquent javascript.
  2. You don’t know javascript.
  3. Scala for the impatient.
  4. The 7 Habits of Highly Effective People.
  5. Rich dad poor dad.

What are your top 5 movies of all the time ?

  1. A beautiful mind.
  2. Infinite war.
  3. The internship.
  4. Hercules
  5. Mulan

What is the most excited part of being Software Engineer ?

Learn everyday about javascript frameworks and so.

What is the most challenging situation you had faced in your current position ?

Learn about react and flux and migrate to react redux.

Which is the best part of being part of 4Geeks team ?

They are very funny, you can learn a lot from the team.

What are your goals for this year?

Learn more about software architecture, learn ilustrator for create my own content

You can follow Eri on his different social networks like Instagram, LinkedIn and Twitter an check the content he is creating.

Whenever you need help on how to start making ideas into reality though technology, 4Geeks team is up and ready, just reach out to us at hello@4geeks.io.

E04: Native vs Hybrid Mobile Apps

Do you prefer to develop a native mobile app or a hybrid mobile app? Maybe this comparison can be useful if we talk more about the context… the pros and cons.

In this episode, Sergio Monge and Allan Porras talked about some important factors to consider if you plan to choose one “format”.

For example, one of the most important things on native mobile apps is the performance, security and the capability to access device so easily. The thing is you need to establish separated development teams for each platform (Android or iOS). It can increase the budget.

If you want to know the completed pros and cons, just listen this episode 🙂

Well, enjoy the conversation and remember to subscribe to this podcast on iTunes, iVoox, TuneIn, and rate us to help us reach more people. You can always send us your questions by voice 🙂

Hosts: Allan Porras and Sergio Monge.