DEV Community: Rolando

Standards to get into a recruitment process from a developer perspective

Rolando — Sun, 15 Aug 2021 20:01:44 +0000

Software developer is a career famous for having a lot of opportunities in the market, where many companies are looking to fill their multiple positions from arguably a “small” pool of talent.

But, have you ever thought? Is it true the number of good developers is so little? I have seen opinions, where they believe less than 10% are actually good enough, even people who say less than 5%! or perhaps the recruitment process in many companies is not the most efficient neither fair?? From what I have experienced, also from the opinion of some others, the hiring process seems somehow broken. Probably the biggest problem with software recruitment is how companies qualify skills from candidates, I have experience, also heard some interesting stories regarding the way they try to achieve this, from the "nonreal" life algorithm puzzle, to rejections due to the developer not adding eslint to the takeaway home exercise.

Let’s break down some of the different ways companies “makes sure” a developer has the right skills:

The algorithm puzzle Kata

Usually, this test gets sent on an email that contains a link that will redirect you to a coding interview platform like codility, right away, before starting the test, you will see some instructions similar to the following: 

A few things before you start:

This assessment consists of 4 tests. It will take approximately 80 minutes to complete.
The assessment is timed. A timer is shown per test or per question.
Please allow the use of your camera/webcam and do not leave full-screen mode. Snapshots will be taken of you periodically during the assessment. These measures are taken to ensure fairness for everyone.
Your assessment contains one or more coding tests. You may leave full-screen mode while working on the coding test. Full-screen will be re-enabled after you finish the coding test.
Turn on your speakers or headphones (to play audio).
You are free to use a calculator, pen and paper.
We recommend completing the assessment in one go.

From all these things, probably the more interesting one, is when they say “Please allow the use of your camera/webcam and do not leave full-screen mode. Snapshots will be taken off you periodically during the assessment. These measures are taken to ensure fairness for everyone”. This translate as “you can’t cheat”, right? Well, I find this unfair, even somehow rude, we as developers, search for information, “answers”, opinions, etc, all the time, is part of our daily job, some people say, it is even a skill! Also, why would I allow anyone to take snapshots of me because the company can not simply trust its own process?

An important aspect to mention, is once you see the challenge, most of the time, it is a not real-life scenario problem, from a messy piece of data you need to somehow loop in different ways to finally get the expected result, to the ones that require applying complex regular expressions, I can honestly say have almost never written a complex regex without googling, it is just not an every day ( or even a monthly ) task for me to remember, apart from not being fun at all.

Another characteristic to notice from these automated tests is the expected result, there's some unit test checking the output, if you make them pass, a real person will then review the solution at some point, however, if it fails, you can probably get an automatic rejection without even having the opportunity of someone looking at the code, even if the solution is 99% close. Now, how do I know this? I actually did an experiment once, can not exactly remember what was the challenge about, but let’s say after applying the corresponding logic to the algorithm, the expected output was to return a string with “Hello world”, instead I on purpose did “Hello world ” (notice the extra space after the word world), as a result of this, the unit test(s) fail, I still submitted the code this way tough, not long after, a rejection was made, even though it was 99% close to the solution, there is a high probability no one reviewed the code. This is another reason why I do not believe in companies who tries to automate their recruitment process this way, the lack of human involvement is not a very good sign.

In regards to the code interview platforms, usually, they try somehow to offer an experience close to what you get in a text editor but inside the browser, however, is not even close to what you feel when coding with VS Code or even something like code sandbox, this adds a not need it layer of difficulty to the test

The take away coding task

I have done a few of these, they’re somehow fair, the majority do represent a real-life problem, you might be building a mini-app from what you can possibly be doing during the job. The problem sometimes is that you don’t know exactly what they expect, the README file with the instructions might not be the best, some of them mention things like “production code”, but each company have a different idea of the so-called “production code” term or “scalability”, others might expect the opposite, they want you to just focus on a straight solution without overdoing, you sometimes wonder what direction to take, again, this is mainly because the instructions are not well defined, therefore it is recommended to email back asking any question if you don’t feel something is clear enough, otherwise you might be delivery something different from their assumptions.

This test should not take you more than 2 hours

Unfortunately, some of these tasks can come with a time indication that does not seem to represent the reality of what you need to do, I’m not the only one who has seen a weekend test with a 2 hrs expectation. When I was a Jr dev, I use to think, “am I that slow?”, “the good developers can do it in this time frame but not me?”, A lot of the time, it was a wrong estimation from their side, especially when they ask for “best standard”, “production code”, “good file structure”, “testing”, etc, if you want quality code, then enough time is simply need it.

The white board test

Arguably the least favorite one, you spend your career writing code in front of a screen, now's time to go back to school, write on a physical board in front of people you probably don’t know well, an unnecessary intimating process were the candidate is supposed to explain his approach while writing also.

I have not been so unlucky to do many of these, but on one occasion a company made me do a whiteboard test which I could not quite solve, at the end of the test, the interviewers almost walk away from the room without explaining what I was supposed to do, I ask them if they could please tell me what was the “right’ approach for the problem. When they tried to explain it, they were not sure either on how to solve it, meaning they did not quite understand their own test, believe it or not.

Live pair programming test

Like the title points out, the interviewer and candidate work on a problem to solve, it can be quite intimidating, not sure many people like being look at while coding, especially when you don’t know the other person well ( it is hard to show your best potential here ), some interviewers might not be "compassionate" enough, where they just stare at the screen while you are coding without trying to make the atmosphere a bit more relaxing, also, if it is a real pair programming, the interviewer should somehow help the candidate out a bit, or give them a little push forward if they seem nervous, especially knowing the interviewer is familiar with the code, she/he knows the test well, is not a surprise for them. If the interviewer want’s to imagine how this person behaves, acts, and code in a real app scenario, then the candidate should be allowed to google as well, if we do it in our everyday job, why would you not do it in a test?

History

Now, who are the persons behind this process?? Well, the answer is none other than the Sr devs who have previously face a similar recruitment process, they just continue with the trend today.

How did all this started? Hard to know, but looking at the past, they are some clues 

Google

The giant company ( maybe a couple of others as well ) were famous for doing the whiteboard test some years ago, not sure what is their process now, but back then a lot of developers “dream” of getting a job in one of these companies, due to this, a book called Cracking the coding interview came out, becoming very popular, all sort of companies from 2 person startups to mediums ones became to copy the Google approach, if they did not do the whiteboard test, at least asked about the famous Big O theory explained deeply in the mentioned book. What these other companies did not do, is ask themself, are we Google? are we that big? do we faced the same type of challenges? I guess you know the answer, if you are not Google or Facebook, why would you qualify people so similar to them?

Fizz buzz

Probably the most famous coding test ever to be made, when you do a search on Fizz buzz, the following definition is found : “The "Fizz-Buzz test" is an interview question designed to help filter out the 99.5% of programming job candidates who can't seem to program their way out of a wet paper bag”, wow, some big words are written here, “99.5% who fails on this test can’t write code”, boy, how did they end up with this conclusion? Where was this experiment made?

From stories I heard and read, a few Sr dev got rejected after falling the test, some people argue saying things like: “how can she/he be a Sr dev, charge that type of money if she/he does not know how to solve a simple exercise like this?”

To explain more or less what happen in some of those rejections, I will like to compare it to a sport call baseball, yes baseball. When a hitter faces a pitcher in a professional level, the player usually has his swing timed to hit a ball which is throw at a velocity between 80 and 105 miles per hour ( very hard ), however, they are some “funny” situations, where after a long game, in some random occasions when a team almost runs out of pitchers, they tend to bring a position player to throw ( a non pitcher ), the new “pitcher” tends to throw the ball at a velocity between 50 and 70 miles per hour, this sometimes puts the hitter to a situation were he’s completely out of balance, he’s mind and body are used to much bigger challenges, but now, they are being surprised, resulting sometimes in a fail at bat for the player. Now, does this means the hitter is not good enough? Or he did not deserve to make the team after even decades of hard work?, absolutely not! As a fact, this type of situations last very little ( one inning or less ), the “pitcher” then is taken out of the game, because if the “slow” arm guy stays throwing longer, the opponent hitters will make the adjustment sooner than later and massacre whatever he pitches.

On the other hand, others candidates did pass the test, but the reason why, was not always because they had better thinking or skills, no! You see, the test got so popular, that many companies were testing candidates this way, to the point that many knew the Fizz buzz quiz could come, so of course they came prepare! I sometimes wonder how many wrong hires happened after doing this, or how many good hires were actually missed.

At the end, the Fizz buzz trend did more harm to the recruitment process than any good.

What is the solution?

I have made some arguments on why I think the recruitment process is not great, but, how can we do it better? I can only offer some thoughts that might make a difference.

What ever type of test you do, it is always best to set a challenge that represent a common task your team does on a daily basis, the word common does not necessary means easy, I believe when we hire someone to help our team, is to “push” the product forward by building features, improving code, communicating, planing, sharing ideas, to finally, solving some very hard problems, but, for some reason, most focus on testing the hard problem part, this problems are usually not the most frequents, when they appear, usually the person search, dig, or ask for help, until the solution is found. If your company have to many hard problems, then, there might be some bad decisions made some where else, by the way, who made those decision? The same person who pass the 4 tricky kata interview?
There is also ways of qualifying someone by just having a technical chat, specially if they already on a senior level. Many topics, fundamentals, approaches, etc, can be discuss by just talking with the person, but, not asking the obscure, edge case, like the famous Kyle Simpson once said “I’ve forgotten more JavaScript than most people ever learn” but off course that does not mean he doesn’t know enough Javascript to find a job in any good company
Take a way test are not so bad, but please remember is a test, something were they can showcase skills, logic, but always small ( 2 or 3 features max ), try assigning something that can be interesting and fun. Remember candidates are doing this in their spare time when they might feel tired, they could also be doing other tests from other companies, appreciate their time and effort
If you are going to do a live pair programming test, try to be as kind and friendly as possible, make the first move if you notice the candidate is somehow a bit unsure on where to start
It might sound obvious, but the test should be something members of your team can solve with confidence, otherwise you might have to review the recruitment process applied in the pass

Conclusion

Personally I do not participate in process that involve algorithm puzzle kata neither white board tests, more than happy to face a well done take away test, a "friendly" pair programming, and off course a technical chat about different interesting and challenging topics

Before getting into a recruitment process, make sure to ask what type of process they fallow, how many stages they do? how do they test technical skills? look at recent interview reviews in Glasssdor, do they even bother to give feedback to the candidates? the more you find out, the better, If they don’t meet with your standard, is better not to get involve, you will be saving a lot of hassle, be patientan, the right opportunity will eventually come. On the other hand, If they do meet with your standards, and you decide to participate, please add your experience in Glassdor, so it can be public for everyone, the more open, transparent this process are, the better community we will be able to build and offer

Auth flow with Aws Amplify, ReactJs, and Tailwind CSS

Rolando — Wed, 24 Mar 2021 21:24:51 +0000

Source code for this post can be found here

Not too long ago, writing a full authentication flow for an app, was a task that required a lot of effort and care, nowadays with tools like Aws amplify and modern UI libraries ( exp: ReactJS ), we are just hours away from building this essential functionality.

Let's start by creating an app with create react app

npx create-react-app my-login-app

Environment & prerequisites

Before we begin with all the other setups, make sure you have the following installed:

Node.js v10.x or later installed
A valid and confirmed AWS account

Installing and Initializing an AWS Amplify Project

NPM
$ npm install -g @aws-amplify/cli

cURL (Mac & Linux)
curl -sL https://aws-amplify.github.io/amplify-cli/install | >bash && $SHELL

cURL (Windows)
curl -sL https://aws-amplify.github.io/amplify-cli/install->win -o install.cmd && install.cmd

Let's now configure the CLI with our credentials.

If you'd like to see a walkthrough of this configuration process, Nader Dabit has a video that show's how here.

$ amplify configure

- Specify the AWS Region: us-east-1 || us-west-2 || eu-central-1
- Specify the username of the new IAM user: your-user-name
> In the AWS Console, click Next: Permissions, Next: Tags, Next: Review, & Create User to create the new IAM user. Then return to the command line & press Enter.
- Enter the access key of the newly created user:   
? accessKeyId: (<YOUR_ACCESS_KEY_ID>)  
? secretAccessKey: (<YOUR_SECRET_ACCESS_KEY>)
- Profile Name: your-user-name

Let's initialize a new amplify setup by running: >$ amplify init

? Enter a name for the project myloginapp
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Do you want to use an AWS profile? (Y/n) y
? Please choose the profile you want to use: your-user-name

Now, let's open the src/index.js file and add the following lines:

import App from './App';
....
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

We now need to add our authentication service, Amplify uses Amazon Cognito as the main authentication provider, which gives all the tools to handle registration, authentication, account recovery & other operations.

Let's follow the next steps:

amplify add auth

❯ Default configuration 
  Default configuration with Social Provider (Federation) 
  Manual configuration 
  I want to learn more. 

 How do you want users to be able to sign in? (Use arrow keys)
❯ Username 
  Email 
  Phone Number 
  Email or Phone Number 
  I want to learn more. 

 Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done. 
  Yes, I want to make some additional changes.

Finally, we can push our progress to our account so that AWS can know about it, by doing amplify push, this will build all your local backend resources and provision them in the cloud.

Tailwind CSS

We want to have a nice looking design without spending too much time on the CSS side, let's install Tailwind CSS quickly by running:

npm install -D tailwindcss postcss autoprefixer

Then, let's do:

npx tailwindcss init -p

Inside the package.json file let's add the following lines inside the scripts object:

  "scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.generated.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
.....

Let's create a new file inside our src folder src/tailwind.css, where we are going to be importing tailwind default styles, add the following lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

These two steps will generate a new tailwind.generated.css file which we then need to import into the App.js file in order to be able to use tailwind classes across the whole app.

import './App.css';
import './tailwind.generated.css';

Finally, let's clean our App.css file by just leaving this amount of code:

.App {
  text-align: center;
}

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

React router

We are going to need the help of a router "system" to manage a few screens, lest's install react-router:

npm i react-router && react-router-dom

Let's also update the App.js for the following:

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Router>
          <Switch>
            <div>
              My app
            </div>
         </Switch>
        </Router>
      </header>
    </div>
  )
}

export default App

Time to create our first screen for the auth flow, on a component/Register.js file, add the following code:

import React, { useState } from 'react';
import { Auth } from 'aws-amplify';
import Input from '../../common/Input';
import { Link, useHistory } from 'react-router-dom';

const Register = () => {
  let history = useHistory();
  const [user, setUser] = useState({ username: '', password: '', });

  const handleInputChange = (event, keyName) => {
    event.persist();
    setUser((user) => {
      return { ...user, [keyName]: event.target.value }
    })
  }

  const signUp = async () => {
    try {
      await Auth.signUp({
        username: user.username,
        password: user.password,
        attributes: {
          email: user.username,
        }
      });
      history.push("/confirm-register");
    } catch (error) {
      console.log('error', error);
    }
  }

  return (
    <div className="container w-4/12 w-medium">
      <div className="bg-white shadow-xl rounded px-12 pt-6 pb-8 mb-4">
        <h3 className="text-lg text-gray-700">Register</h3>
        <Input
          labelName='Email:'
          value={user.username}
          handleInputChange={(e) => handleInputChange(e, 'username')}
        />
        <Input
          labelName='Password:'
          type="password"
          value={user.password}
          handleInputChange={(e) => handleInputChange(e, 'password')}
        />
        <div className="flex items-center justify-between">
          <button
            className="mt-4 mb-4 w-full sm:w-auto border border-transparent px-6 py-3 text-base font-semibold leading-snug bg-gray-900 text-white rounded-md shadow-md hover:bg-gray-800 focus:outline-none focus:bg-gray-800 transition ease-in-out duration-150 hover:bg-gray-600"
            type="button"
            onClick={() => signUp()}
          >
            Send
          </button>
        </div>
        <div className="w-full">
          <hr />
          <p className="text-gray-700 pb-2 pt-2 text-sm">You already habe an account?</p>
          <Link
            to={{
              pathname: '/log-in'
            }}
            className="pt-2 text-sm text-blue-500 hover:text-blue-600"
          >
            Long in
          </Link>
        </div>
      </div>
    </div>
  )
}

export default Register;

Create a common/Input.js file for our small but practical input component.


import React from 'react';

const Input =({ labelName, value, type="text", handleInputChange }) => {
  return (
    <div className="pb-15">
      <label className="block text-gray-700 text-sm font-bold mb-2">{labelName}</label>
      <input
        type={type}
        className="account-input bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-sm py-2 px-2 block w-full appearance-none leading-normal"
        value={value}
        onChange={handleInputChange}
      />
    </div>
  )
}

export default Input;

We are still not ready to test our app, after users add their register details (email and password), they will receive a confirmation email with a unique code to activate their account. Let's create a component/ConfirmRegister screen for this step.

import { Auth } from 'aws-amplify';
import React, { useState } from 'react';
import Input from '../../common/Input';
import { Link, useHistory } from "react-router-dom";

const ConfirmRegister = () => {
  let history = useHistory();
  const [user, setUser] = useState({ username: '', authenticationCode: '', });

  const handleInputChange = (event, keyName) => {
    event.persist();
    setUser((user) => {
      return { ...user, [keyName]: event.target.value }
    })
  }

  const confirmSignUp = async () => {
    try {
      await Auth.confirmSignUp(user.username, user.authenticationCode);
      console.log('success confirm sign up');
      history.push('./log-in')
    } catch (error) {
      console.log('error', error);
    }
  }

  return (
    <div className="container w-4/12 w-medium">
      <div className="bg-white shadow-xl rounded px-12 pt-6 pb-8 mb-4">
        <h3 className="text-lg text-gray-700">Confirm your account</h3>
        <Input
          labelName='Email:'
          value={user.username}
          handleInputChange={(e) => handleInputChange(e, 'username')}
        />
        <Input
          labelName='Code:'
          value={user.authenticationCode}
          handleInputChange={(e) => handleInputChange(e, 'authenticationCode')}
        />
        <button
          onClick={() => confirmSignUp()}
          className="mt-4 mb-4 w-full sm:w-auto border border-transparent px-6 py-3 text-base font-semibold leading-snug bg-gray-900 text-white rounded-md shadow-md hover:bg-gray-800 focus:outline-none focus:bg-gray-800 transition ease-in-out duration-150 hover:bg-gray-600"
        >
          Confirm
        </button>
        <div>
          <Link
            to={{
              pathname: '/register'
            }}
            className="pt-2 text-sm text-blue-500 hover:text-blue-600"
          >
            Back
          </Link>
        </div>
      </div>
    </div>
  )
}

export default ConfirmRegister;

Our app is ready to start registering new accounts, you don't necessarily need to use your personal email, this brilliant 10 min email site can provide you a temporary one.

Now that we have registered user(s), let's create our components/Login.js page by adding this code:

import { Auth } from 'aws-amplify';
import React, { useState } from 'react';
import { useHistory, Link } from "react-router-dom";
import Input from './common/Input';

const LogIn = () => {
  let history = useHistory();
  const [user, setUser] = useState({ username: '', password: '' });

  const handleInputChange = (event, keyName) => {
    event.persist();
    setUser((user) => {
      return { ...user, [keyName]: event.target.value }
    })
  }

  const logIn = async () => {
    try {
      await Auth.signIn({
        username: user.username,
        password: user.password,
      });
      history.push('./home')
    } catch (error) {
      console.error('error', error);
    }
  }
  return (
    <div className="container w-4/12 w-medium">
      <div className="bg-white shadow-xl rounded px-12 pt-6 pb-8 mb-4">
        <h3 className="text-lg text-gray-800 mb-2">Log In</h3>
        <Input
          labelName='Email:'
          value={user.username}
          handleInputChange={(e) => handleInputChange(e, 'username')}
        />
        <Input
          labelName='Password:'
          type="password"
          value={user.password}
          handleInputChange={(e) => handleInputChange(e, 'password')}
        />
        <div className="flex items-center justify-between">
          <button
            onClick={() => logIn()}
            className="mt-4 mb-4 w-full sm:w-auto border border-transparent px-6 py-3 text-base font-semibold leading-snug bg-gray-900 text-white rounded-md shadow-md hover:bg-gray-800 focus:outline-none focus:bg-gray-800 transition ease-in-out duration-150 hover:bg-gray-600"
          >
            Log in
          </button>
        </div>
        <div className="w-full">
          <hr />
          <p className="text-gray-700 pb-2 pt-2 text-sm">Don't have an account?</p>
          <Link
            to={{
              pathname: '/register'
            }}
            className="pt-2 text-sm text-blue-500 hover:text-blue-600"
          >
            Register
          </Link>
        </div>
      </div>
    </div>
  )
}

export default LogIn;

After the user is login successful, we can finally grant them access to the home page.

Let's create a simple components/Home page component:

import React from 'react'
import Auth from '@aws-amplify/auth';
import { Link } from "react-router-dom";

const Home = () => {
  let signOut = async() => {
    await Auth.signOut();
    console.log("Sign out succesfully")
  }
  return (
    <div>
      <h2 className="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-lg text-gray-900">
        Home page
      </h2>
      <div className="ml-3 text-base">
        <Link
          to={{
            pathname: '/log-in',
          }}
          onClick={signOut}
          className="pt-2 text-sm text-gray-500 hover:text-gray-600"
        >
          Log out
        </Link>
      </div>
    </div>
  )
}

export default Home

We just need to put all these routes together to make the connection between pages with the help of react router, let's change our App.js file to look like:

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';
import ConfirmRegister from './components/ConfirmRegister';

import './App.css';
import './tailwind.generated.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Router>
          <Switch>
            <Route component={Home} path="/home" />
            <Route component={ConfirmRegister} path="/confirm-register" />
            <Route component={Login} path="/log-in" />
            <Route component={Register} path="/" />
          </Switch>
        </Router>
      </header>
    </div>
  )
}

export default App

Finally, we can start testing our app, create accounts, logging in, etc! let's run npm start or yarn start, our registration page at http://localhost:3000 should be the first one to come up, looking like this:

But wait, this app is not fully done! someone can actually navigate to the home page (http://localhost:3000/home) without having an account or being authenticated, that's pretty bad!

Let's write a private route to solve this issue and secure our app, create a new components/PrivateRoute file.


import React, { useState, useEffect }  from 'react';
import { Redirect, Route } from "react-router-dom";
import { Auth } from 'aws-amplify';
import Homepage from './Home'

const PrivateRoute = ({ children, ...rest }) => {
  const [signInUser, setSignInUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    let getUser = async() => {
      try {
        let user = await Auth.currentAuthenticatedUser();
        await setSignInUser(user);
        setIsLoading(false);
      } catch (error) {
        setIsLoading(false);
        console.log(error)        
      }
    }
    getUser();
  },[]);

  if(isLoading) {
    return <p>...Loading</p>
  }
  return (
    <Route {...rest} render={({ location }) => {
      return signInUser? <Homepage/>
        : <Redirect to={{
            pathname: '/log-in',
            state: { from: location }
          }} />
    }} />
  )
}

export default PrivateRoute;

In the App.js file, let's "wrap" the home page with our private route component

.....
import PrivateRoute from './components/PrivateRoute';

import './App.css';
import './tailwind.generated.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Router>
          <Switch>
            <PrivateRoute path="/home">
            </PrivateRoute>
            <Route component={ConfirmRegister} path="/confirm-register" />
            <Route component={Login} path="/log-in" />
            <Route component={Register} path="/" />
          </Switch>
        </Router>
      </header>
    </div>
  )
}

export default App

Conclusion

We have our custom auth flow thanks mainly to AWS amplify and react, it even has a navigation security layer (the private route), all done in just a few steps.

Todo

You can do some homework by adding a forget password feature to the flow, let me know in the comments if you have questions.

If you think other people should read this post. Tweet, share and Follow me on twitter for the next articles

Create an online C.V with NextJs + AWS Amplify + Tailwind CSS

Rolando — Mon, 01 Feb 2021 21:39:33 +0000

Source code can be found here

I decided to create all my new solo projects with AWSAmplify and NextJs, so far the most efficient way of building great full-stack serverless apps that I have come across. Tailwind CSS is also a nice piece of technology that I'm playing with, which fits great for this small example.

Environment & prerequisites

Before we begin, make sure you have the following:

Node.js v10.x or later installed
A valid and confirmed AWS account

Next Js

Let's set up our Next Js project by first running:

npx create-next-app online-dev-cv

Let's go to our new repo:

cd online-dev-cv

Tailwind CSS

The next thing is to install and configure Tailwind CSS inside our project.

Let's run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest postcss-preset-env

After installing these two, let's do:

npx tailwindcss init

The npx tailwindcss init command will create a tailwind.config.js file, after this, we need to create another file called style.css

touch styles/styles.css

Moving further, add the following lines to the styles.css file.

 @tailwind base; 
 @tailwind components; 
 @tailwind utilities;

When the app builds, some CSS is generated with these lines of code, for example, the @tailwind base is the equivalent of a Normalize.css

Post CSS

We are almost done adding TailwindCSS, what’s left, is to create the postcss.config.js file, which stores the configuration for PostCSS.

Let's do:

touch postcss.config.js

Now let's add the following to the recently created file:

module.exports = {
   plugins: ["tailwindcss", "postcss-preset-env"],
};

Finally, add import '../styles/styles.css' to pages/_app.js file. We can now use Tailwind everywhere in the application!

Installing and Initializing an AWS Amplify Project

Installing the CLI

AWS Amplify CL

NPM
$ npm install -g @aws-amplify/cli

cURL (Mac & Linux)
curl -sL https://aws-amplify.github.io/amplify-cli/install | >bash && $SHELL

cURL (Windows)
curl -sL https://aws-amplify.github.io/amplify-cli/install->win -o install.cmd && install.cmd

Let's now configure the CLI with our credentials.

If you'd like to see a walkthrough of this configuration process, Nader Dabit has a video that show's how here

Run: $ amplify configure

- Specify the AWS Region: us-east-1 || us-west-2 || eu-central-1
- Specify the username of the new IAM user: your-user-name
> In the AWS Console, click Next: Permissions, Next: Tags, Next: Review, & Create User to create the new IAM user. Then return to the command line & press Enter.
- Enter the access key of the newly created user:   
? accessKeyId: (<YOUR_ACCESS_KEY_ID>)  
? secretAccessKey: (<YOUR_SECRET_ACCESS_KEY>)
- Profile Name: your-user-name

Let's initialise a new project by running: $ amplify init

? Enter a name for the project: onlinedevcv
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building: javascript
? What javascript framework are you using: react
? Source Directory Path:  .
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use: your-user-name

Next, we need to define the schema models for our database, to do this, let's run:

$ amplify add api

? Please select from one of the below-mentioned services: GraphQL
? Provide API name: CV
? Choose the default authorization type for the API: API key
? Enter a description for the API key: public
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API: No, I am done.
? Do you have an annotated GraphQL schema?: No
? Choose a schema template: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
? Do you want to edit the schema now? Yes

We should now see the schema open in our text editor, which we are going to modify to look like this:

type MainDetails @model {
  id: ID!
  name: String!
  lastName: String!
  email: AWSEmail!
  location: String
  description: String
  skills: [Skill] @connection(keyName: "bySkill", fields: ["id"])
}

type Skill @model @key(name: "bySkill", fields: ["skillID"]) {
  id: ID!
  name: String!
  skillID: ID!
  mainDetails: MainDetails @connection(fields: ["skillID"])
}

We now have two basic models related to each other, the next thing to do is to push these changes so AWS can know about it, for that, let's simply run:

$ amplify push

You will be asked some additional questions while running this process, answer to them with the following:
? Do you want to generate code for your newly created GraphQL API: Yes ? Choose the code generation language target: javascript ? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.js ? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes ? Enter maximum statement depth [increase from default if your schema is deeply nested]: 2
You should now have a graphql folder with the queries, mutations, subscriptions ( all with code examples for getting, updating, and deleting data ), and the schema files.

Let's add some details to our C.V directly through AWS AppSync by running:

$amplify console

? Which site do you want to open?  
  Amplify admin UI
❯ Amplify console

Your AWS console page for your app should be open in the browser, click on the API tab, then on the right corner click the View in AppSync button:

On our left menu, let's click on the query link and add our following mutation:

mutation CreateMainDetails{
    createMainDetails(input: {
      name:"Joe",
      lastName: "Satriani",
      email:"jsatriani@email.com",
      location: "Lima",
      description: "I'm Jamstack developer",
    }) {
      id
      name
      lastName
      email
      location
      description
    }
}

This should create for us, a new object with the person's main details, including a fresh id that we will be using for also adding skills to this person.

Save that id somewhere, let's now add a new skill by placing this mutation to our AWS AppSync console:

mutation CreateSkill {
  createSkill(input: { name: "AWS amplify", skillID:"your-main-skill-id" }) {
      id
      name
      skillID
      mainDetails {
        id
        name
        lastName
        description
        skills {
          items{
            id
            name
          }
        }
      }
    }
  }

A new skill has been added, we now have enough data to pull out our online C.V

Configuring Next Js with AWS amplify

Let's go to the pages/_app.js file, import the auto-generated aws-exports.js and add the Amplify.configure function with our config settings, the file should look like this:

import '../styles/globals.css'
import '../styles/styles.css'

import Amplify from 'aws-amplify';
import config from '../aws-exports';

Amplify.configure({
  ...config, ssr: true
});

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

We are now ready to code this full-stack application! Let's open our pages/index.js file and first import what we need:

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { API } from 'aws-amplify';
import { listMainDetails } from '../graphql/queries'

With the API function, we can call our Graphql query, to then pass it to a React state once it is resolved. We are also going to replace the default boilerplate created by NextJs with something simpler for now

export default function Home() {
  let [mainDetails, setListMainDetails] = useState(null);

  useEffect(() => {
    fetchListMainDetailss()
  },[])

  async function fetchListMainDetailss() {
    const mainDetails = await API.graphql({
      query: listMainDetails
    });
    const { data: { listMainDetailss } } = mainDetails;
    console.log(listMainDetailss.items[0])
    setListMainDetails(listMainDetailss.items[0]);
  }

  return (
    <div className="relative py-3 sm:max-w-xl sm:mx-auto">
      <Head>
        <title>My online C.V</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>
  )
}

We can create as many C.V as we want, but we are only going to need one, that's why we did listMainDetailss.items[0]

Next, let's start the app: $npm run dev

When opening http://localhost:3000/, we should not see anything on the screen, but if we open the console, our data should appear there:

{id: "c6db2857-36a5-4d3c-a96d-9e4dcf199c77d", name: "Joe", lastName: "Satriani", email: "jsatriani@email.com", location: "Lima", …}

Let's add a loading state to not break the app while waiting for our data plus some JSX with Tailwind CSS classes, our final page should look like this:

import Head from 'next/head';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { API } from 'aws-amplify';
import { listMainDetails } from '../graphql/queries'

export default function Home() {
  let [mainDetails, setListMainDetails] = useState(null);
  let [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetchListMainDetailss()
  },[])

  async function fetchListMainDetailss() {
    const mainDetails = await API.graphql({
      query: listMainDetails
    });
    setIsLoading(false);
    setListMainDetails(listMainDetailss.items[0]);
  }
  if(isLoading || !mainDetails) {
    return <p>..Loading</p>
  }
  return (
    <div className="relative py-3 sm:max-w-xl sm:mx-auto">
      <Head>
        <title>My online C.V</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="mt-5 md:mt-5 md:col-span-2">
        <div className="bg-white shadow overflow-hidden sm:rounded-lg">
          <div className="px-4 py-5 sm:px-6">
            <h3 className="text-lg leading-6 font-medium text-gray-900">
              My Online C.V
            </h3>
          </div>
          <div className="border-t border-gray-200">
            <dl>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Name
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.name}
                </dd>
              </div>
              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Last Name
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.lastName}
                </dd>
              </div>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Email address
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.email}
                </dd>
              </div>
              <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Location
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.location}
                </dd>
              </div>
              <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt className="text-sm font-medium text-gray-500">
                  Description
                </dt>
                <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                  {mainDetails.description}
                </dd>
               </div>
               <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <Link href={`/edit/${mainDetails.id}`}>
                  <div className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Edit
                  </div>
                </Link>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>
  )
}

Notice we created an edit "button" with a href tag href={'/edit/${mainDetails.id}'}, that means we will need a new page where will be updating our C.V based on the mainDetails id.

Let's create a new folder inside our page directory called edit, then we need a new file name [id].js inside

Open the new page (page/[id].js) copy and paste the following code:

import { useState, useEffect } from 'react';
import { API } from 'aws-amplify';
import { useRouter } from 'next/router';
import { getMainDetails, listMainDetails  } from '../../graphql/queries';
import { updateMainDetails } from '../../graphql/mutations';

const UpdateDetails = ({ mainDetails }) => {
  const router = useRouter();
  if (router.isFallback || !mainDetails) {
    return <div>Loading...</div>
  }
  const [onChangeDetail, setOnChangeDetail] = useState({ 
    name: '',  
    lastName: '' , 
    email: '', 
    location: '',
    description: '',
    skills: { items: []},
  });

  useEffect(() => {
    setOnChangeDetail(mainDetails);
  },[]);

  const handleInpuChange = (event,keyName)  =>  {
    event.persist();
    setOnChangeDetail( (onChangeDetail)  =>  {
      return  { ...onChangeDetail,  [ keyName ] : event.target.value }
    });
  }

  const updateDetails = async () => {
    delete onChangeDetail.skills
    await API.graphql({
      query: updateMainDetails,
      variables: { input: onChangeDetail },
    })
    router.push(`/`);
  }

  return (
    <>
      <div className="shadow sm:rounded-md sm:overflow-hidden relative py-3 sm:max-w-xl sm:mx-auto mt-4">
        <div className="px-4 py-5 bg-white space-y-6 sm:p-6">
          <h2 className="text-lg">Main Details</h2>
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
              Name
            </label>
            <div className="mt-1">
              <input 
                type="text" 
                name="name"
                value={onChangeDetail.name}
                onChange = { (event) => handleInpuChange(event ,'name') }
                className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" 
              />
            </div>
          </div>

          <div>
            <label htmlFor="last name" className="block text-sm font-medium text-gray-700">
              Last name
            </label>
            <div className="mt-1">
              <input 
                type="text" 
                name="last name" 
                value={onChangeDetail.lastName}
                onChange = { (event) => handleInpuChange(event ,'lastName') }
                className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" 
              />
            </div>
          </div>

          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              Email
            </label>
            <div className="mt-1">
              <input 
                type="email" 
                name="email" 
                value={onChangeDetail.email}
                onChange = { (event) => handleInpuChange(event ,'email') }
                className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" 
              />
            </div>
          </div>

          <div>
            <label htmlFor="location" className="block text-sm font-medium text-gray-700">
              Location
            </label>
            <div className="mt-1">
              <input 
                type="text" 
                name="location"
                value={onChangeDetail.location}
                onChange = { (event) => handleInpuChange(event ,'location') }
                className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" 
              />
            </div>
          </div>

          <div>
            <label htmlFor="description" className="block text-sm font-medium text-gray-700">
              Description
            </label>
            <div className="mt-1">
              <textarea 
                name="description" 
                rows="3" 
                value={onChangeDetail.description}
                onChange = { (event) => handleInpuChange(event ,'description') }
                className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" 
                placeholder="Some words about yourself"
              />
            </div>
          </div>
        </div>
      </div>
      <div className="text-center mt-1 px-4 py-5 space-y-6 sm:p-6">
        <button 
          type="submit"
          onClick={updateDetails}
          className="inline-flex justify-center py-2 px-20 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          Update C.V
        </button>
      </div>
    </>
  )
}

export async function getStaticPaths() {
  const postMainDetails = await API.graphql({
    query: listMainDetails,
  });

  const paths = postMainDetails.data.listMainDetailss.items.map(post => ({ params: { id: post.id }}))
  return {
    paths,
    fallback: true,
  }
}

export async function getStaticProps({ params }) {
  const { id } = params
  let mainDetails = await API.graphql({
    query: getMainDetails,
    variables: { id }
  });
  return {
    props: {
      mainDetails: mainDetails.data.getMainDetails
    }
  }
}

export default UpdateDetails

If you are not familiar with Next js notice there is a couple of interesting functions at the end of the page.

getStaticProps is for enabling the MainDetails data into the page as props at build time.

getStaticPaths is for creating dynamically pages at build time based on the MainDetails coming back from the API

The rest is the normal React code seen in many apps plus our corresponding query and mutation to GET and POST data ( make sure the updateDetails mutation includes the skills{ items } object)

We have not forgotten about our skills data yet, we will take care of this one in a separate component, outside our pages folder let's create a new file components/skillsUpdate and paste the following code:

import { useState, useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { createSkill } from '../graphql/mutations';
import { onCreateSkill } from '../graphql/subscriptions';
import { v4 as uuid } from 'uuid';

const SkillsUpdate = ({ skills, id }) => {
  const [onChangeSkill, setOnChangeSkill] = useState('');
  const [newSkills, setNewSkills] = useState([]);

  useEffect(() => {
    setNewSkills(skills)
  },[])

  useEffect(() => {
    const subscription = API.graphql(graphqlOperation(onCreateSkill)).subscribe({
      next: (eventData) => {
        const newSkill = eventData.value.data.onCreateSkill;
        const id = uuid()

        setNewSkills([...skills, { id, name: newSkill.name}])
      },
      error: error => console.error(error)
    })
    return () => subscription.unsubscribe()
  }, [])

  const addSkill = async() => {
    await API.graphql({
      query: createSkill,
      variables: { 
        input: { skillID: id, name: onChangeSkill }
      }
    }); 
    setOnChangeSkill('');
  }
  return (
    <div className="shadow sm:rounded-md sm:overflow-hidden relative py-3 sm:max-w-xl sm:mx-auto mt-4">
      <div className="mt-1 px-4 py-5 space-y-6 sm:p-6">
        <h2 className="text-lg">Skills</h2>
        <input 
          type="text" 
          name="skill"
          value={onChangeSkill}
          onChange = { (event) => setOnChangeSkill(event.target.value) }
          className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300" 
        />
      <div className="flex flex-wrap -m-2 mb-4">
        {newSkills.map(skill => (
          <div
            key={skill.id}
            className="bg-green-400 px-10 py-2 text-white text-center rounded-full mb-3 mr-2"
          >
            {skill.name}
          </div>
          ))
        }
      </div>
      <div>
        <button 
          type="submit"
          onClick={addSkill}
          className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
          Add skill
        </button>
        </div>
      </div>
    </div>
  )
}

export default SkillsUpdate;

Here we are tackling 3 things:

Rendering the skills data through props coming from our [id].js page
Adding skills to our data, thanks to our Graphql mutation
Managing subscription so we can have real updates every time we add a new skill ( make sure the onCreateSkill subscription includes the skills{ items } object)

Finally, we need to import and place our SkillsUpdate component into our [id].js page (about the update button) to get all the pieces together

.....
import SkillsUpdate from '../../components/skillsUpdate';

and

.....
     <SkillsUpdate 
        skills={mainDetails.skills.items}
        id={mainDetails.id} 
      />
      <div className="text-center mt-1 px-4 py-5 space-y-6 sm:p-6">
        <button 
          type="submit"
          onClick={updateDetails}
          className="inline-flex justify-center py-2 px-20 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          Update C.V
        </button>
      </div>

Deployment

Create a new file, name it serverless.yml, and place the following code :

nextamplified:
  component: "@sls-next/serverless-component@1.18.0"

Run npx serverless

After a few seconds of creating all the necessary files, you should see a message with your deployed URL

You now have two new big folders created /.serverless and /.serverless_nextjs, they both can go to the .gitignore file

Done, if you have any questions, feel free to ask in the comment box.

If you think other people should read this post. Tweet, share and follow me on twitter

Error boundaries with React

Rolando — Sat, 07 Nov 2020 00:03:27 +0000

One thing React does well ( among other things ) is to show console error and warning messages, they point out meaningful stuff: bad practices, bugs ( or potential bugs), and recommendations. If we don't pay attention to them, they will somehow follow us to soon or later make their point, however, during my career, I have work in several React apps where opening the console means looking at a long list of yellow and red messages left by previous tasks.

One error message I confess had not paid the necessary attention to, it is the one bellow saying:

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries

This error can appear at different, hard to predict circumstances like data fetch error, bad rerender of a component, a throw newError exception coming from somewhere, among others. We sometimes don't know how our app is going to behave when unexpected events like this happen, that's why React offers this type of messages with even a link included that can guide us to offer a better UI experience for our users.

Let's see the following code

I have this simple component called Title that throws an error exception if the props argument has not been included.

I'm planning to now pass it inside another component as a child:

As we can see, the title prop was not passed over to the Title component which is going to make our app break as soon we hover on the element, but the worst part is the user experience, the user won't see anything on the screen, like literally.

To communicate this much better, we are going to grab the error boundaries example component from the React Js documentation which works perfectly for this problem.

It is a simple wrapper class component that updates a state error depending on if something doesn't work as expected by making an error state change from false to true, if indeed something has gone wrong, we can then display something to the screen like a text message for example. We can also console some error details which will help us tackle the issue better thanks to the componentDidCatch lifecycle method

Note: There is no version of hooks for this one because the getDerivedStateFromError and componentDidCatch "old school" lifecycle do not have an equivalent effect yet, more info here

We will wrap it on top of our App component.

Now when the user hovers, we can show something to the screen instead of leaving them blank.

But this could be even better, notice the Title component is the one that can potentially bring issues, we do not need to wrap the whole App component with the error boundary, we can move it closer down like:

We now have a part of the app displaying content while the other it's not, which might be better than showing one big error.

Full code example here

Conclusion

When building software, some unexpected things could happen in our apps, it is our responsibility to give users the best experience by providing minimal information about these events, an error boundary component could help us achieve this with not a lot of effort. Be also mindful of other React errors and warning displaying in the console, as they usually point at problems or potential ones.

Follow me on Twitter for more content

Como escribir un C.V de programador para búsqueda de trabajo en el exterior

Rolando — Sun, 11 Oct 2020 19:04:58 +0000

Escribir un curriculum enfocado en el mercado internacional puede ser un poco distinto a países de Latinoamerica O quizás España, la manera cómo se redacta y presenta, tiene detalles importantes que debemos conocer.

Cuando llegue a Londres desde Venezuela, por supuesto tenía un C.V escrito el cual pensaba me daría varias entrevistas o por lo menos algunas llamadas, aplique a muchas vacantes, espere un par de días pacientemente, pero no recibí respuestas o atención de muchos. Este puede ser un momento duro ya que intentas descifrar lo que los demás piensan de ti, te realizas preguntas como: por qué no me llaman?, que sera lo que no les gusta? etc.

Afortunadamente me encontré con personas que conocen "el sistema laboral" del Reino Unido mejor que yo, tuvieron la paciencia de revisar mi C.V, apuntarme las cosas que debía mejorar, estos detalles incrementaron considerablemente el numero de respuestas por parte de empresas y reclutadores.

El C.V quizás apropiado se divide en las siguientes 7 secciones:

Personal details (datos personales)
Summary, el cual también se puede llamar about o personal statment (resumen o acerca de mi)
Experience (experiencia)
Skills (habilidades)
Education (educación)
Languages (lenguajes)
Personal interest (intereses personales)

Personal details (datos personales)

Nos presentamos, por supuesto con los siguientes datos:

Nombre y apellido (el primer apellido basta, no hace falta el segundo)
Nacionalidad: Si tienes mas de una nacionalidad, puedes poner las dos, en mi caso pongo: Dual Venezuelan/Italian
Dirección física: En Latinoamérica por ejemplo hay direcciones un poco largas, no hace falta escribir la calle exacta e incluso el código postal, el país, la ciudad o pueblo, bastan
Datos de contactos: correo electrónico y teléfono ( con el código de area ) o solamente correo electrónico si eres de los que no les gusta mucho conversar por el móvil
Por lo menos uno de los siguientes enlaces o todos (si los tienes): Cuenta en Github, Twitter, Blog o pagina personal, y Linkedin

*Importante: Este tipo de curriculum no posee fotos, países como Estados Unidos y muchos de Europa, tienen leyes donde supuestamente las empresas deben ofrecer oportunidades igualitarias, independientemente del color, genero, raza o religión. Además, es probable miren tu foto de perfil en tus cuentas de Linkedin, Github, etc o simplemente hagan una búsqueda en Google de tu nombre

Summary (resumen o acerca de mi)

Esto es una especie de introducción donde explicamos un poco quienes somos como profesionales, cual es tu enfoque, ética de trabajo, que intereses tienes como programador y tus meta en el futuro cercano, puedes también mencionar tecnologías preferidas (librerías, frame works, etc) y lo que actualmente estas aprendiendo, si es el caso

Es muy importante dar un mensaje claro, conciso y bien redactado en esta sección, ya que aquí nos estamos "vendiendo" como profesionales, queremos dejar la mejor impresión de nosotros, abajo coloco lo que tengo en mi C.V sobre esta sección

Summary

A React JS developer who gets thrilled from creating great pleasing solutions that deliver user-friendly. Since I started programming with different tools and languages, I have focused my career in not just doing a job but delivering quality work, along with great interest in Javascript development with commercial experience in React Native, ReactJs, and backend frameworks like Ruby and Rails and Node Js

In my spare time, I am currently focusing on learning serveless technologies with Aws amplify and Dynamo DB

Experience (experiencia)

Si posees una carrera larga, lo mas recomendable es colocar solo los últimos 5-7 ańos de trabajos, no queremos que la persona ocupen mucho tiempo leyendo un C.V, cada una de tus experiencias debería tener los siguientes datos:

Nombre de tu rol, ejemplo: Full stack developer
Fecha de inicio del rol y final (si es tu trabajo actual, colocas "present" en el final)
Lugar donde ejerces el rol (si trabajas remoto, colocas "remote")
Enlace de la empresa
Descripción del trabajo, este es probablemente el punto mas importante, aquí es donde cuentas un poco acerca de tu rol, tus responsabilidades, tareas diarias y sobre todo, tus logros o desafíos mas relevantes, este tipo de cosas no tienen un número de lineas o palabras ideales pero no debe ser muy largo o muy corto, solo conciso. Aquí también mencionas tecnologías y lenguajes empleados, otro aspecto que me gusta incluir, es el tipo de metodología Agile usado en el equipo, por ejemplo: Scrum o Kamban

Aquí coloco una de mis experiencías como ejemplo:

React Native developer

May 2016 - May 2018

Newport, United Kingdom

Sumoshift

Developing a hiring staff mobile app from scratch called Sumoshift, the app instantly connects businesses with staff when they need each other the most

My role was divided between the development, design, and deployment ( IOS and Android ) of a mobile app build with React Native, the maintenance and development of a web app built in Ruby and Rails, other tasks also, including Rackspace deployment, code reviews, and agile planning between the team

Stack and tools used: React Native, ReactJs, Redux, Jest, Ruby and Rails, Rackspace, Git, Bootstrap CSS, Xcode, Expo, and Android Studio

Agile methodology: Scrums

Skills (habilidades)

Aquí básicamente colocas los lenguajes y herramientas que posees, colocolas por orden de importancia, las mas fuertes primero, no tienes por que mencionar todos los lenguajes que en algún momento usaste, aveces menos es mas

Education (educación)

Tu(s) diploma(s) universitario (si los tienes), cursos o calificaciones, si tienes muchos, al igual que tu experiencia y habilidades, solo coloca los que te hacen más orgulloso. Cada uno de tus diplomas o certificados debería tener los siguientes datos:

Nombre de la institución
Nombre del estudio realizado, por ejemplo: Master en data science
Lugar donde se realizo
Iníco y fin de la fecha de realización
Explica un poco lo que aprendiste, cual fue la enseńanza mas importante, las herramientas nuevas que adquiriste, etc

Aquí coloco un ejemplo:

Makers Academy

Software boot camp

January 2015 - April 2015

London - United Kingdom

Makers Academy is a highly selective, 12 week full-time intense programme that teaches web development in London based, some of the knowledge I learned, are listed below

Agile values, principles, and practice, object oriented principles and design, test driven development pair programming, Ruby 2.0, PostgreSQL, unit testing with Rspec and Jasmine, behaviour driven development with Cucumber, version control with git and GitHub, JavaScript, HTML5, CSS3, Sass and Bootstrap, deployment to Heroku

Languages (lenguajes)

Tu lengua materna y probablemente lo mas importante, tu nivel de ingles, también puedes colocar otro idioma que manejes (si es el caso), en mi C.V, aparece así:

Languages

Spanish - Native language

English - Advance

Italian – Basic

Personal interest (intereses personales)

A los empleadores también les interesa saber un poco tu personalidad fuera del trabajo, en esta sección puedes colocar hobbies, deportes que practicas o incluso decir te gusta ver películas en Netflix, en mi C.V tengo algo corto que dice:

Gym, sports, reading, playing guitar, and traveling

Conclusión

Trabaja en tu C.V con empeńo escribiendo cada una de las secciones mencionadas, tomate el tiempo en explicar cada una de tus experiencias, habilidades, estudios, etc, no te expandas demasiado o coloques detalles poco relevantes, recuerda lo que escribes debe ser conciso y llamativo para conseguir una entrevista, en un siguiente paso (ejemplo, una llamada) puedes explicar un poco más acerca de tu persona

Si te gusta este post, por favor sígueme y compártelo en Twitter

Que es JAMstack?

Rolando — Sat, 10 Oct 2020 23:21:22 +0000

Es un poderoso nuevo enfoque creado para satisfacer las demandas de aplicaciones modernas, rápidas, dinámicas y escalables que no requieren de una infraestructura de front end tradicional. Su lenguaje “madre” es Javascript, pero puedes utilizar otros como Python, Ruby or Go, cuenta además con una comunidad creciente con un futuro prometedor

Porque JAMstack?

“Performance” o rapidez es una de las razones principales por la cual desarrolladores se están inclinando hacia este concepto, los usuarios cada día tienen menos paciencia al navegar e interactuar con los navegadores, el uso del teléfono móvil cada día incrementa mas, los videos deben reproducirse instantáneamente, etc. JAMstack es un movimiento, una colección de mejores prácticas y flujos de trabajo que dan como resultado sitios web y móvil de alta velocidad, los cuales además son un placer trabajar

JAMstack posee un flujo de trabajo basado en Git, creo no es osado decir todo programador tiene por lo menos conocimientos básicos de Git, así que en este aspecto no hace falta mucha adaptación o aprendizaje, el proceso de deploración o despliegue también se realiza atraves de esta famosa herramienta, lo cual hace todo mas fácil

Algunas de las empresas que apoyan este nuevo concepto son:

Herramientas modernas y emocionantes como Next Js, Gatsby y Contentful también han ayudado a promover el movimiento, la comunidad está creciendo rápidamente

Como funciona la autentificación de usuarios con JAMstack?

Una aplicación JAMstack a menudo crea un token de identificación seguro almacenado en el navegador. (Este tipo de token se llama JavaScript Web Token, o JWT). Luego, la identidad se pasa con cada llamada a la API para que los servicios conozcan al usuario. Particularmen he experimentado con este proceso usando AWS amplfy y es sencillamente una experiencía placentera, sencilla y segura, es muy poco codigó el que se requiere para lograr una autentificación eficiente.

Pero que tienen de malo las aplicaciones actuales?

Pensemos por un momento en el enfoque más común en la actualidad para servir contenido web: para todas y cada una de las solicitudes realizadas a una app, los datos se extraen de una base de datos, se procesan en una plantilla, luego en el HTML, para que finalmente se envíen al navegador que la solicitó a través de la red

Cuando los servidores web crean repetidamente cada página por cada solicitud, comienza a parecer que ocurre demasiado trabajo en el lugar y momento equivocado. Después de todo, una regla general para el máximo rendimiento es realizar la menor cantidad de pasos posibles. ¿No deberíamos crear un nuevo HTML solo cuando el contenido o los datos cambian? y no cada vez que se solicita?

Resulta que así es exactamente como funciona JAMstack, este es su flujo de trabajo moderno

Miremos los siguientes pasos:

La fuente del sitio es un repositorio alojado que almacena contenido y código juntos como archivos editables
Siempre que se realiza un cambio, se activa un proceso de compilación que presenta el sitio, creando el HTML final desde unas plantillas, contenido y datos
Los activos preparados y renderizados se publican globalmente en un CDN, colocándolos físicamente lo más cerca posible de los usuarios finales

De inmediato podemos ver que muchas menos cosas suceden para satisfacer cada solicitud. Hay menos puntos de error, distancia lógica para viajar y sistemas interactuando para cada solicitud. El resultado es un rendimiento mejorado en la infraestructura de alojamiento de forma predeterminada. Los "assets" se entregan en la interfaz lo más rápido posible porque están listos para ser servidos, ya están lo más cerca posible del usuario gracias al uso del CDN

Este enfoque elimina grandes cantidades trabajo innecesario. Dada la eficiencia y la simplicidad de ofrecer contenido previamente reproducido directamente desde una CDN, no es de extrañar que las app realizadas con JAMstack tienden a obtener las puntuaciones más altas en pruebas de velocidad.

Este tipo de arquitectura es simple, mas fácil de escalar, ademas de poseer un estructura mas segura

Seguridad

La complejidad reducida de JAMstack ofrece otra ventaja: un perfil de seguridad muy bueno para nuestras apps

Menos piezas de infraestructura significan menos cosas para atacar y menos cosas en las que debe dedicar esfuerzo para colocar parches o proteger. Reducir la superficie es una buena estrategia para mejorar la seguridad y minimizar las vías de ataque, se reducen las oportunidades de comprometer el sistema, por lo tanto, la seguridad también mejora

Conclusión

JAMstack es un concepto novedoso, poderoso y con un futuro prometedor, parece tener mucho más sentido construir aplicaciones con este enfoque en comparación a las apps tradicionales, son mas rápidas, dinámicas, seguras y fácil de escalar

Hay muchas otras cosas interesantes acerca JAMstack, con este post solo estamos rozando la superficie, te invito a que comienzas a explorar este mundo atravéz de las herramientas y tecnologías mencionadas

Cuaquier duda acerca de este tema u otro relacionado, me puedes escribir atravéz de mi Twitter