DEV Community: michelada.io

The michelada guide to delimit, solve and validate solutions.

michelada.io — Tue, 27 Oct 2020 16:52:50 +0000

Or how a Product Design Sprint could help streamline your business.

It happens to all of us, it doesn't matter how many processes and years we've been doing something, there is always something that can be improved. It doesn't matter if you're a giant, like Amazon (with its Fire smartphone, which only lasted a year in the market) or Microsoft (remember Zune? Don't worry, neither do we).

Such was the case of one of our clients, a clothing company - so important, that you probably have at least a pair of their signature items in your closet - that when they developed one of their processes for nothing more and nothing less than receiving purchase orders to stock to its brick-and-mortar third-party retailers, they started with something to barely do the work. Several years and growth later, that process stopped being a small rock in the shoe to become a kidney stone: painful, annoying and with the potential to incapacitate if not taken care of, but not necessarily fatal. (I come from a family of doctors, the medical analogy was inevitable)

After they presented their problem, we used a methodology called Product Design Sprint. Why? Well, problems may have more than one solution and this methodology allows to define the problem, understand their cause, their consequences and validate the proposed solution with potential users from the hand of the stakeholders, allowing to have a basis to avoid deviating from the business goals in the creative process (which happens more frequently than we would like to admit) or avoid the omission of small logistical details that could be omitted due to assumptions during the planning of the project.

But what is a Product Design Sprint?

A Product Design Sprint (PDS), is a five-day process to assess ideas and solve challenges through rapid prototyping and user testing. This methodology is based on the book "Sprint: The method to solve problems and try new ideas in just 5 days" by Jake Knapp which in turn, is inspired by Knapp's work in Google Ventures.

While the goal of a Design Sprint is to streamline processes we know that for various professional reasons, it is difficult to take five days from our agenda to dedicate them to a small part of our business, which although critical, remains only one. Conveniently, there is a four-day version 2.0 where you only need the entire team (i.e. stakeholders, creative minds, technical minds ...) for two days, so instead of a whole week, you only have to make space for two days .

The creation of the solution

During the first two days, our PDS team composed of three product designers, a software engineer, a quality control engineer, a content specialist and three stakeholders, had an interview where they presented their current situation and we determined the critical area of action that helped us to identify the actors involved and their stage of interaction, we sketched a solution and carried out usability tests to the proposal that followed an interview script to avoid variations in the testing environment so that we could assign real monetary value as well as of project length should the client choose to bring the prototype solution to a real execution.

Much better than trying to fix a problem and then realize that you need more resources than you had originally allocated (another of the most common negative experiences when developing software). In this particular case, users showed a positive predisposition to adapt the solution in real scenarios and ease to complete the tasks.

Now, the PDS does not promise to be a definitive or long-term solution, not because it lacks the ability to, but because it's ability to will directly rely on the nature of each case for which it is being implemented. What it can promise is to give us enough information to know if it is worth investing resources to execute our solution, help us to define a problem and have better tools to execute a solution, and avoid the dread of investing in something that'll cost us more than it helps us.

Optimistic locking of ActiveRecord models

michelada.io — Tue, 27 Oct 2020 16:49:48 +0000

Did you know that Rails can help avoid data overwrite when multiple users are editing the same record?

Yes, you can use optimistic locking on models, and it turns out it's pretty easy to enable it too.

To be honest, I've never heard about this functionality until recently while browsing the Active Record Basics Guide looking for info on a totally different problem that I had.

When I read about the lock_version field, I was curious and surprised by what I found.

It basically works like this:

If you add the lock_version field to any ActiveRecord model, every time that record is saved it will be checked for modifications after the record was loaded.

So, if for some reason the record changed in the database while you were editing it, when you try to save it an ActiveRecord::StaleObjectError exception will be raised.

Example:

require 'active_record'

ActiveRecord::Base.establish_connection(adapter: 'sqlite3', database: ':memory:')
ActiveRecord::Base.logger = Logger.new(STDOUT)

ActiveRecord::Schema.define do
  create_table :orders do |t|
    t.integer :total
    t.string :lock_version
  end
end

class Order < ActiveRecord::Base ; end

Order.create

object_1 = Order.find(1)
object_2 = Order.find(1)

object_1.total = 100
object_1.save # Succeeds!

object_2.total = 200
object_2.save # Raises ActiveRecord::StaleObjectError

You can see from the example that both object_1 and object_2 were loaded at the same time.

When you modify and change the first object, it will be saved without any problem and the save method will return true as expected, but when you try and save the second one (object_2), the ActiveRecord::StaleObjectError will be raised because the object has been modified already.

You can read more about this feature directly on its API documentation.
It is worth mentioning that there is a more aggressive way to lock records by using Pessimistic Locking.

ARM-Based Macs from the developer's perspective

michelada.io — Tue, 27 Oct 2020 16:34:35 +0000

A few days ago, Apple revealed its plans to integrate processors with ARM architecture in its desktops, leaving aside Intel processors with x86. But what does this mean for us developers? Currently, the vast majority of projects do not consider the architecture to which our software will be destined, since the heavy load is carried by compilers that allow us to distribute our software for different platforms.

This does not mean that we leave the problem unattended in the medium and long term.

ARM is everywhere

First of all, let's talk about the elephant in the room. ARM architecture is everywhere: from our mobile devices to our vehicles, and even on our consoles and graphics cards. This is because ARM's business model is not manufacturing but the design and licensing of its processors. That is why companies such as AMD, Qualcomm, Nvidia, Nintendo, Apple among others, can have their own custom chips at a low cost. Also, with the internet of things gadget makers have enough processing power with low power consumption. That is why in the last decade this market has exploded, and surely there is an ARM processor near you.

High-level languages

Most of us work with very high-level languages and in our work we do not focus on low-level issues, such as compatibility for different processors. As I mentioned before, this workload is left to the compilers, which allow us to have binaries for any architecture. In the case of Java with the introduction of android, its virtual machine had to be able to run on ARM processors and the only thing the development community did was adapt the ecosystem to limited resources and improve performance. In the case of languages that depend on an interpreter, such as ruby or python, they work perfectly well on embedded systems or on the raspberry pi. Even in Japan, the use of ruby focuses more on this type of system. So this change should not concern the vast majority.

Third party dependencies

However, not all the code we produce comes from our hands. Many times we depend on the work of others, who in turn depend on others and so on. This practice of free software has made life easier for us and thanks to it we have avoided reinventing the wheel in each project. However, we may have dependencies that are tied to a certain architecture, and this may be happening without us noticing.
To avoid this we have to test our code on different platforms. The most accessible option would be to test our production project on a RaspberryPI or BeagleBone. Maybe our software requires much more processing power, but at least we will know if in the near future our dependencies work, or if we need to make adjustments.

But it works in my local

For those who are familiar with this phrase, "Brace yourself" because if you are a backend developer, we may say it more often than we are used to. Since the difference in the instruction set of our development environments, with our production environments, will be considerable. Although if we make the transition well, the problems in development environments could be annoying but manageable.
Fortunately, mobile development would benefit, since the applications would be developed in environments very close to mobile devices. Both the Android emulator and the iOS simulator will have a significant advantage.

ARM on the server?

Currently in the backend, our projects work in the cloud. Whether from Amazon, Google, or another. And while the data center market is entirely dominated by Intel, this does not mean that these cloud service companies are not looking for alternatives with a better cost benefit. In economic terms, reducing energy and cooling costs can have a great impact on the profits of these companies; since feeding and maintaining these facilities at an optimal operating temperature is really expensive, so in the near future it will be more common to see "eco-friendly" options in the backend, without the need to sacrifice performance.

In conclusion, ARM is a technology with more than 30 years in the market, which in the last decade has been embedded in various industries. And thanks to its thermal efficiency and energy consumption, it is very attractive for a future where efficiency is above raw performance. And this technological change should not take us by surprise, because whether we like it or not, Apple leads the trends in the market.

Women and technological development.

michelada.io — Tue, 27 Oct 2020 15:54:45 +0000

Maitetxu Larraechea is a Chilean journalist, historian and currently director of Girls in Tech; an organization with a presence in 40 countries that promotes the participation of women in the development of technology. In November 2015, during his TED Talk in Chile, she shared some information to bear in mind. One of them, which she refers to as a dramatic figure, is that of the total startup founders in the world, only 5% are women.

It is curious that in an era where information technologies have become increasingly important in aspects such as entrepreneurship, inclusion, and problem solving, education and others, the participation of women has been reduced in recent years.International data affirm that in the 80s, the percentage of women graduated from careers related to programming was 37%, while currently the figure has been reduced to 12%.What are the reasons why the presence of women in technological development is markedly inferior to that of men?

In an interview with CNN, Maitetxu believes that it has to do with cultural aspects of parenting; It is very common for girls to be encouraged to opt for careers that make motherhood compatible, so they will grow up perceiving that programming and other sciences are work camps for men.

Another important factor is the lack of visibility of successful women in the development of technology. We know and have enjoyed great media coverage names such as Steve Jobs, Bill Gates and Elon Musk, while most unfamiliar people with information technologies are unaware of the contributions of women like Ada Lovelace, creator of the first algorithm that could be processed by a machine or Hedy Lamarr, a fundamental contributor to the development of WiFi.

Fortunately, not everything is a setback, Larraechea also states that investors are increasingly aware of the profitability of having women in management positions in technology companies. A study by the Kauffman Foundation states that the return on investment of a female CEO can be up to 35% more than a man. Features such as greater meticulousness, organization, and great ease for communication, make them excellent leaders and developers.

The evolution of technology comes hand in hand with creative diversity. A set of unique minds looking for solutions in common for the problems of humanity.If the creative space is reduced to a percentage of individuals, the development of technology and society will be affected.

For Mariana Costa, Peruvian developer, programming is the language of the future. A skill that transforms. After realizing the lack of diversity in this area, the task of creating a program for women called Laboratoria was created, where she started with 16 girls who, she says, went from ignoring what a web browser is to graduate as developers web front end. Today his initiative has managed to train hundreds of women and obtained various awards and alliances with companies such as Google and Microsoft.

Like her, there are thousands of women who, with their talent and skills, are making a great effort to generate awareness and knowledge. There is a long way to go. It is the task of all of us to support the momentum of this growth, eliminating prejudices and recognizing much more its work in an area in which its participation is indispensable for technological development and therefore of humanity.

Ruby on Rails

michelada.io — Tue, 27 Oct 2020 15:46:14 +0000

Ruby is a programming language. It was created 20 years ago by Yukihiro "Matz" Matsumoto. According to most measures of popularity of the programming language, Ruby is in the top ten, although it is generally the tenth (more or less) in popularity, and largely due to Rails' popularity. Like Java or the C language, Ruby is a general purpose programming language, although it is best known for its use in web programming.

Rails is a software library that extends the Ruby programming language. David Heinemeier Hansson is its creator. He named it "Ruby on Rails", even though it is often simply called "Rails". It is a software code added to the Ruby programming language. Technically, it is a package library (specifically, a Ruby Gem), which is installed using the command line interface of the operating system.Rails is a framework for building websites. As such, Rails establishes conventions to facilitate collaboration and maintenance.

These conventions are coded as the Rails API (the application programming interface or directives that control the code). The Rails API is documented online and described in books, articles and blog posts. "Learning Rails" means learning to use the Rails conventions and their API.Rails combines the Ruby programming language with HTML, CSS & JavaScript to create a web application that runs on a web server. Because it runs on a web server, Rails is considered a server-side web application development platform or "back-end" (the web browser is the "front-end").

Rails, in a deep sense, is more than a software library & an API. Rails is the central project of a wide "community" that produces software libraries that simplify the task of building complex websites. The members of this Rails community share many fundamental values, they often use the same tools and support each other with an informal network. That means they do it just for love to the development. The community is something informal, but that does not detract it from professionalism. It forms an economic network that includes: jobs, recruiters, consulting firms, conferences and companies that create websites with Rails and investors that finance new companies.

Rails is popular among web startups, significantly by the set of "libraries" or open source software libraries (RubyGems or "gems") that make possible to build complex sites quickly (although without much style ... please don't kill me ) that work perfectly.Do you need to study Ruby to learn Rails?Your most difficult challenge will be to learn (or understand) the names of the structures where you see code examples. This is why it is useful to follow a brief introduction to Ruby. You should be able to recognize when you are seeing a matrix or a hash. You must recognize when you are looking at an iterator or the syntax of a block with Ruby. Eventually, you will recognize more exotic Ruby formulations such as lambda. It's fine if you can't write a lambda function or even know when to use it; Many Rails developers start working before learning Ruby in depth.

Render dangerous content with React

michelada.io — Tue, 27 Oct 2020 15:27:41 +0000

FYI All the content of this post suits best for some edge cases, and the solution proposed here is probably not the more safe way to do it.
Cross-site Scripting (XSS Attacks)

Among all the web vulnerabilities, one of the most common is cross-site scripting, this type of vulnerability allows the attackers to inject scripts on the page to get access to any sensitive information the browser and the site are sharing (cookies, tokens, etc...).

This attack occurs when the data entered is coming from an untrusted source or the data that is sent to the user include dynamic content without been validated first.Although there are limitless varieties of XSS attacks, Javascript XSS attacks seems to be popular among hackers.

Types of XSS Attacks

There are 3 types of XSS attacks:

Stored XSS Attacks occurs when the injected script is store on the server (i.e. store on a database) so each time the user request a something from the server the malicious script is sent to the client.

Reflected XSS Attacks happens when the malicious script is reflect on the web that's vulnerable, this could be due to a click on an email link that's malformed or any other external source.

DOM Based XSS Attacks is a vulnerability that occurs on the DOM (Document Object Model) instead of the HTML.
Let's say you have this code on your app:

Now, imagine someone visits your site using the URL https://www.nicesite.com/index.html#alert('test'), the script will be executed because the code above writes whatever comes on url to the document using document.write.

We can point one of the main differences between this type of XSS attack and the Stored and Reflected: The servers can't stop this attack, since the hash (#) part of the url is not being sent to the server on the request.

Prevent XSS Attacks
For most of the XSS attacks the solution is simple, just sanitize your input data, even if comes from a trusted source.Doing this will ensure that no matter what's the input or output, is always secure.

Javascript offers us plenty ways to interact with the DOM, so we can works with dynamic content in an easy way, but we need to be careful on how to use it, since it can make vulnerable our websites.

Inputs & Outputs

Here's a tiny list of the most common input and outputs that can be dangerous to use with javascript.

INPUTS:

document.URL
document.documentURI
location.href
OUTPUTS:
document.write
element.innerHTML
element.src (in some elements like img)

React and cross-site scripting

Nowadays all the web apps required some dynamism, from having a multiple step form that shows different question depending on your answers to a simple tables that filter out information, this is where Javascript enters to the equation.
Back in time, when Javascript vainilla was enough to get everything done (which still is, we just 'syntax-sugar' it), one of the way you could handle insertion of dynamic content, was using innerHTML property.

Element.innerHTML:The Element property innerHTML gets or sets the HTML or XML markup contained within the element
So, you can set the HTML content from an element using this property, but what happen when the content has an script inside?

The first 2 lines create a variable that holds a plain string, then using innerHTML set the content of an element to be this value, so far so good, nothing harmless here.
On the next 2 lines of code we do the same, but this time, the string value is html-like with a tag within it, so what would you think will be the output? Well, if you though that this will result on an alert prompting to the user that he has been hacked, well you are wrong. HTML5 specifications says that scripts inserted using innerHTML shouldn't execute. Easy to be safe React follows the philosophy "easy to be safe", that's why we as developers should be explicit if we want to go for the unsafe path, and this is the case for the dangerouslySetInnerHTML prop. This prop allows you to inject dynamic html to an element, all you need to do is pass and object with a single property: __html, with a string html-like of what you want to render: As you can see, seems a little odd that you have to pass an object when it could be a simple string, but this is done intentionally, to remind you that it's dangerous and you should avoid using it as much as possible. innerHTML vs dangerouslySetInnerHTML Writing React doesn't mean that you can't use the features that Javascript offer us, you can use innerHTML to add the dynamic html to a react component and it will work the same (both will update the node with the html), but it can lead to undesired performance issues. React uses a virtual DOM and a diffing algorithm to compare what's been updated and re-render the content, this process is called reconciliation. Using dangerouslySetInnerHTML you can tell React to ignore all the dynamic html during reconciliation When you use innerHTML to set the content, all the dynamic html that was generated is included in the reconciliation process, aside performance issues, React could wrongly update the dynamic html. Since both properties works the same (in fact dangerouslySetInnerHTML implements innerHTML to set the content) they both share kinda the same vulnerabilities, hence the importance of sanitizing your input sources. Render the danger Now what happens when you want to use dangerouslySetInnerHTML but also need to execute any script tag that comes inside the html? That's against HTML5 specifications, but if we dig a little bit more on what innerHTML do to inject the html we can found something interesting: The specified value is parsed as HTML or XML (based on the document type), resulting in a DocumentFragment object representing the new set of DOM nodes for the new elements. This DocumentFragment is a lightweight version of the document, it can have child nodes, the main difference is that since is a fragment, is not actually a part of the active/main document. We can create a DocumentFragment using the document.Range API. This code snippet will create a DocumentFragment object, parse the value of the html variable and store the result on a variable called node. All we have to do is render this variable: If we translate all of this to a React component we end up with something like this: This way we could pass a string with html content that includes <script> tags, and those will be executed (works with <script> .. content .. and )

dangerously-set-html-content is a tiny (297B Gzipped), no-dependencies, library that allows you to render dynamic html and execute any scripts tag within it.
1) Add it to your project:

2) Start using it:

Of course this doesn't prevent any attack (in fact, does the opposite of that), but sometimes this functionally could be what you are looking for.
I built this because I actually needed this functionality.

Conclusions

All the web is full of vulnerabilities that can cause you headaches if you are not aware of how to prevent them. Mostly of the common frontend libraries already handle a few of these in a way, so you don't have to worry about it‌ but still is good to know what we are dealing with as front-end developers.

Additionally of what React offers us, there are several techniques that can help you to prevent an attack, so if you are having a problem of this type just head to the docs and you'll probably find the solution.

While 99% of the time all this magic behind React works perfectly for us, sometimes we can found ourselves struggling with it, but in the end is just Javascript so embracing both will help us to find the solution to our problem.

Thanks!

Full-stack web app with NextJS and GraphQL

michelada.io — Tue, 27 Oct 2020 15:22:25 +0000

When we talk about developing a front end application with ReactJS, we can find three main options:

CRA: focuses on building single-page web applications but has difficulties with SEO positioning.

Gatsby: focuses on static site generation with great performance and cool SEO and data-fetching.

NextJS: in my opinion, the best way to write ReactJS web applications nowadays since it offers server-side rendering with the option of making it client-side, cool built-in routing, zero-configuration philosophy and, since NextJS 9, this framework provides API routes which is a really easy way to provide back-end code to our react app and, this is what we are using for this post.

In this post, we are going to learn how we can implement a GraphQL API running over an API route.

The basic NextJS app

As I mentioned before, NextJS focuses on a zero-configuration philosophy we can easily configure but, to make it even easier, let's just type npx create-next-app todo-app in our terminal to have it ready to use. Once the project is setup, let's run cd todo-app and type yarn dev to run the server and see that everything is running.

The API Route

Cool!, We now have our NextJS web app up and running. Let's create a new file inside pages/api/ called graphql.js and let's add the following code:

export default (req, res) => {
  res.statusCode = 200

  res.send("GRAPHQL")
}

And, if we go to localhost:3000/api/graphql, we'll be able to see the text GRAPHQL written. Easy!. Let's now configure GraphQL!.

GraphQL setup

Install it

First, let's add a dependency called apollo-server-micro by writing yarn add apollo-server-micro

Our Schema

The next thing we need to work with GraphQL is writing our schema, which will define the Queries and Mutations we have and how the data is structured. For now, we want to have a query called hello which will return a string. So, let's add the following to the top of our route.

import { ApolloServer, gql } from 'apollo-server-micro'

const schema = gql`
  type Query {
    hello: String!
  }
`;

Resolvers

We have just written our schema, but now GraphQL needs the resolvers of our schema, which tell GraphQL where to fetch our data from. Below the schema, let's add our resolvers:

const resolvers = {
  Query: {
    hello: (_parent, _args, _context) => "world!"
  }
}

The server

Now, let's create our server with our schema and resolvers.

const apolloServer = new ApolloServer({
  typeDefs: schema,
  resolvers,
  context: () => {
    return {}
  }
})

Cool! With this instance, we can access a handler, which is in charge of handling all the requests and responses and, as we are actually working with NextJS, we need to specify that we don't need bodyParser in our requests.

Let's remove the last export default and change it for the following code:

const handler = apolloServer.createHandler({ path: "/api/graphql" });

export const config = {
  api: {
    bodyParser: false
  }
};

export default handler;

We have now a basic configuration of a GraphQL server; why don't we go to localhost:3000/api/graphql and see what we have now?

And, if we run the following:

query {
    hello
}

We will have our response from the resolver.

CORS

We need another thing to use this API from the front-end so, let's add a new package by typing yarn add micro-cors and let's add the following:

import  Cors  from  "micro-cors";  

const cors =  Cors({ 
    allowMethods:  ["POST",  "OPTIONS"]
});  

// Here is how we connect our handler with CORS.
export default cors(handler);

Data from Postgres with Knex.

At some point, our app would need some sort of access to a database to persist some data. For this, we will need to set up some stuff so let's do it! First, let's add Knex and Postgres with yarn add knex pg

Create a file called knexfile.js with our database configuration:

module.exports = {
  development: {
    client: "postgresql",
    connection: "postgres://postgres@localhost:5432/todo",
    migrations: {
      tableName: "knex_migrations"
    }
  },
};

Next, let's create our first migration, which will tell Postgres how to create our tables. Let's start by typing yarn run knex migrate:make create_todo and inside the folder migrations we will have a new file generated, let's open it and add how we want our table to be created:

exports.up = function(knex) {
  return knex.schema.createTable("todos", function(table) {
    table.increments("id");
    table.string("description", 255).notNullable();
    table.boolean("done").defaultTo(false).notNullable();
  });
};

exports.down = function(knex) {
  return knex.schema.dropTable("todos");
};

And let's build our table by running yarn run knex migrate:up

Now, we need to create a constant which will help us manage the database inside our code. Let's open /pages/api/graphql.js and add the following:

import knex from "knex";

const db = knex({
  client: "pg",
  connection: "postgres://postgres@localhost:5432/todo"
});

Updating our schema

Why don't we change our schema and resolvers?

const schema = gql`
  type Query {
    todos: [Todo]!
    todo(id: ID!): Todo
  }

  type Todo {
    id: ID!
    description: String!
    done: Boolean!
  }
`;

const resolvers = {
  Query: {
    todos: (_parent, _args, _context) => {
      return db
        .select("*")
        .from("todos")
        .orderBy("id")
    },
    todo: (_parent, { id }, _context) => {
      return db
        .select("*")
        .from("todos")
        .where({ id })
        .first()
    }
  }
}

If we now go to localhost:3000/api/graphql, we'll finally be able to fetch and play with our data!

But, wait a minute! How are we going to create data? Well...

Let's go and see how we can add a Mutation which will help us create data inside our database!

Creating data

First, we have to add a new type inside our schema. We first need to specify the name of the mutation, in this case createTodo, and then inside the parenthesis the names and types of values that we will receive. At the end, we need to specify what our mutation will return, in this case, a Todo type:

const schema = gql`
  ...

  type Mutation {
    createTodo(description: String!, done: Boolean): Todo
    completeTodo(id: ID!): Todo
  }
`;

Now, inside our resolvers object, let's add the new Mutation key and the createTodo:

const resolvers = {
  ...

  Mutation: {
    createTodo: async (_, { description, done }, _c) => {
      return (await db("todos").insert({ description, done }).returning("*"))[0]
    },
    completeTodo: async (_, { id }, _c) => {
      return (await db("todos").select("*").where({ id }).update({ done: true }).returning("*"))[0];
    }
  }
}

And with this, now we can create and complete ToDos in our database

Cool, but what about the Front-end?

The client

Until now, we have been building the server-side of our application by integrating GraphQL in an API route: why don't we integrate the client side of our app?

Dependencies

Let's start by adding two dependencies we need to connect to GraphQL:

yarn add @apollo/react-hooks apollo-boost

Provider

First, let's setup the Apollo Client of our app. For this, let's open pages/_app.js and add the following:

import '../styles/globals.css'
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { gql } from 'apollo-boost';


function MyApp({ Component, pageProps }) {
  const client = new ApolloClient({
    uri: "http://localhost:3000/api/graphql"
  })

  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

Query

Now, let's open our pages/index.js and import what we are going to need:

import React, { useState } from 'react';
import { useQuery, useMutation } from "@apollo/react-hooks";
import { gql } from 'apollo-boost';

We first need to declare our GraphQL query exactly as we would do in the GraphQL Playground:

const GET_TODOS = gql`
  query {
    todos {
      id
      description
      done
    }
  }
`

Now, inside our component, we are going to use the query and map through them to render them in the app

export default function Home() {
  const { loading, error, data, refetch } = useQuery(GET_TODOS);

  if(loading) return <p>Loading...</p>
  if(error) return <p>ERROR :(</p>

  return (
    <div>
      <h1>My TODO list</h1>

      {
        data.todos.map((todo) => (
          <div key={todo.id}>
            {todo.description}
            <button
              disabled={todo.done}
            >
              {todo.done ? "Done" : "Complete"}
            </button>
          </div>
        ))
      }

    </div>
  )
}

Now we should see our ToDos on the browser. Let's add a way to create ToDos.

Let's start by adding the createTodo mutation:

const CREATE_TODO = gql`
  mutation CreateTodo($description: String!) {
    createTodo(description: $description) {
      id
      description
      done
    }
  }
`

Now, inside our component, we add some state management, our mutation, and our form to perform the mutation. The file will end up looking like this:

export default function Home() {
  ...
  const [todo, setTodo] = useState("");
  const [createTodo] = useMutation(CREATE_TODO);

  const saveTodo = async (e) => {
    e.preventDefault();
    await createTodo({variables: { description: todo }});
    refetch();
    setTodo("")
  }

  ...

  return (
    <div>
      <h1>My TODO list</h1>

      <form onSubmit={saveTodo}>
        <label>
          New todo
          <input onChange={e => setTodo(e.target.value)} value={todo} />
        </label>
        <button type="submit">Save</button>
      </form>

      ...

    </div>
  )
}

Completing todos

Pretty straightforward! Why don't we add our completeTodo mutation and add functionality to our buttons?

Here we have our mutation declaration:

const COMPLETE_TODO = gql`
  mutation CompleteTodo($id: ID!) {
    completeTodo(id: $id) {
      id
    }
  }
`

And, inside our component, we have:

export default function Home() {
  const [todo, setTodo] = useState("");
  const { loading, error, data, refetch } = useQuery(GET_TODOS);
  const [createTodo] = useMutation(CREATE_TODO);
  const [completeTodo] = useMutation(COMPLETE_TODO)

  const saveTodo = async (e) => {
    e.preventDefault();
    await createTodo({variables: { description: todo }});
    refetch();
    setTodo("")
  }

  const onComplete = async (id) => {
    await completeTodo({variables: { id }});
    refetch();
  }


  if(loading) return <p>Loading...</p>
  if(error) return <p>ERROR :(</p>

  return (
    <div>
      <h1>My TODO list</h1>

      <form onSubmit={saveTodo}>
        <label>
          New todo
          <input onChange={e => setTodo(e.target.value)} value={todo} />
        </label>
        <button type="submit">Save</button>
      </form>

      {
        data.todos.map((todo) => (
          <div key={todo.id}>
            {todo.description}
            <button
              disabled={todo.done}
              onClick={() => onComplete(todo.id)}
            >
              {todo.done ? "Done" : "Complete"}
            </button>
          </div>
        ))
      }

    </div>
  )
}

And, if now we go to our browser, we can see our app working!

Conclusion

GraphQL is a technology that has been growing a lot in the last couple of years and so has NextJS. Now that we can have API routes in our NextJS app, we can integrate them to build a delightful stack able to behave as a monolith and, who knows, maybe even run in a serverless architecture 🤔.

Thanks for reading!

Trying regular expressions in Ruby

michelada.io — Tue, 27 Oct 2020 15:15:38 +0000

Is understanding regular expressions difficult to you? It usually happens to me and, for such reason, I decided to read and reread information about this topic. I wrote down some notes which I think will be enough to work with them when I need it and I would like to share them with you:
We can create a Ruby RegEx with // or %r{} which are the literal constructors of it.

And both are instances of the RegEx class

Example:

The String class has also the match? method:

Example:

The number 11 was returned because the expression matched the word are and the position of its first character is 11. It can be proved:

String class has also the =~ method:

Example:

To use a special character in a ReGex, it needs to be escaped. For example:

It is also possible to get a match if the dot sign is not escaped, but it is not the match we are looking for, let's prove it:

To escape a character, the backslash character \ needs to be positioned just before the desired character, like with the previous example with the dot .

This character used on a ReGex matches everything with all characters on a string, except if there is a newline \n

If we inspect what the expression matched, we get:

This expression expects that any character exists just before the pattern ated
The dot . doesn't match a newline \n
Example:

Inside of the brackets, many characters can be listed, and any of them can be matched
Example test a string to know if it has a vowel:

And more characters can be added to the expression just after the brackets:

In this example, the character r inside the brackets, plus the characters out of them uby matches with the word ruby

Ranges can be created inside the brackets, example:

All of these abbreviations have a negative version that matches the opposite from the positive versions

For example, let's capture the strings "Lenin Godinez" and "40" from the next string:

With the pattern ([A-Za-z]+\s[A-Za-z]+) the words "Lenin Godinez" are captured and, with the pattern (\d+), the number "40" is captured
All the captures automatically are assigned to global variables. On the previous example, the two captures were stored on the global variables $1 and $2 and we can test it using puts:

The captures can be accessed the same way we get an element from an array: sending an index:

If zero is indicated as the index on the m variable, the complete match is returned:

A useful method from the MatchData object is the method captures which returns an array with the captures:

Example:

The captures can be accessed in the same way we get the value from a hash: sending a key, being the key the name of the capture
Example:

Also, there is a useful method to get the named captures: the method named_captures that returns a hash with the captures:

Example:

If we remove the modifier ? from the pattern and the letter s from "Mrs." on the string, we can see that the test fails, because it is looking for the pattern Mrs

Now, if we return the modifier ? to the pattern, this time we will get a match with "Mr." because the character s on the pattern is optional

Example:

If the modifier is removed from this expression, only the first number from 31 is matched

Example:

If we modify the string to be only "Name: Lenin", the expression continues matching since more characters after the word "Lenin" are just optional, thanks to the modifier *

Example:
If I want to match the format phone number 111-111-1111

Also, we can indicate a minimum and maximum of repetitions with a range as {1,n} The first number indicates the minimum and the second number indicates the maximum of repetitions.
Example:

On thin example, four numbers are matched, because we asked for at least one number and four as maximum
If the string to be evaluated has less characters than the maximum indicated on the pattern, then all characters are matched

If the minimum amount is not reached, then the expression returns nil

If the second number on the range is not indicated, it only will take the minimum amount and the maximum amount will be open:

Also, if the minimum amount is not reached, then the expression returns nil

Example:

The match can also be found at the beginning of a newline

If we try to look the comment up between the string, we won't get a match and a nil will be returned

Example:
If we want to match the dot that appears at the end of the line of the next string:

If we try to match the word "currently" that starts on a new line, it is not matched because this anchor does not work for that purpose.

If we try to match the end of a line, it will return nil

If the same string is evaluated with the anchor \z, then we won't get a match due to the new line indicated at the end of the string

Example:
There is a list of numbers and I want to match the numbers that ends with a dot, but I don't want to include the dot sign on the result of the match. The lookahead assertion needed is (?=.) with the dot escaped inside it:

On the other hand, there is a negative version of this lookahead assertion

Example:

The result is "123" because it was the first match that the pattern found with the indications "A series of numbers without a dot placed at the end of it"

Example:
I want to match the word "regex" only if the word "ruby" is placed just before of it in the next string:

And its negative version is:

In this example, nil is returned because the "regex" word is preceded by the word "ruby", so the match is not successful. To get a match, the string needs to be modified.

Example:

This method helps to escape characters from a string.
Example:

This method evaluates a string from left to right and returns an array with all the matches found
Example:

It is possible to make captures with the scan method: if something is matched, an array of arrays is returned with the results
Example:

If a RegEx is sent as a parameter on this method, this evaluates each element from the array and, if it matches the pattern, then it is returned on an array. All elements that pass the test are returned in the array
Example:

Only 2 elements from the array matched the expression, and it can be proved as follows:

And that is it! All you need to do is practice and practice with them to get more familiar. Feel free to reference this blog post if you have doubts.

You may not need websockets

michelada.io — Tue, 27 Oct 2020 15:10:42 +0000

When you work on a feature that requires some sort of real time functionality, it's common to think about using websockets as a swiss knife capable of doing whatever you're being asked to do, but most of the times websockets can be overkill, to the point that it might add complexity to your tech stack making your life or someone else's (your beloved devops) even more complicated than it already is.

You'll be wondering why, well, I don't want to bore you with the technical details and I want to keep this post very concise so everyone without decent network knowledge can understand my point. In case you're still curious about the reasons I'd recommend you to read this excellent post.

So, back to my point, first let's review the most common cases for real time features we can find in a web application. Based on my experience, I can give you a short list, I know there are others, but these are the ones that I recall at this moment:

Chat
Page updates
Notifications
Financial tickers
Real time data visualization
Real time collaboration tools
Multiplayer games

Now, let's break the list apart in two categories based on the type of communication they require: Unidirectional vs Bi-directional

Unidirectional

This type of communication is for when you need communication to go one way only in this case, from the server to the client. In this category we can find the following use cases:

Page updates
Notifications
Financial tickers
Real time data visualization

Bi-directional

Communication happens both ways, server and client can send messages back and forth to each other, ideal use cases of this type of communication are:

Chat
Real time collaboration tools
Multiplayer games

So, In which of these cases should I use websockets, well, I'd recommend you to use them only for Bi-directional communication and when your communication needs are very close to real time. Websockets are designed for this, multiplexed communication with very low latency, everything else can survive with a little bit of delay.

OK, but what do I use for everything else?

Long polling can be considered in this case, but it's proven to be very inefficient in terms of CPU, memory and bandwidth usage, so, what do I use then?, enter Server Sent Events (SSE).

Server Sent Events

SSE are a mechanism where the client can get server pushes without having to ask for them as in a traditional client/server communication, you can think of SSE as one way pub-sub pattern where the clients subscribe to a stream, then the server can use this stream to push data to the client.

At its core SSE are just a regular HTTP request/response, the only differences are in the text/event-stream value we pass to the Accept/Content-Type headers of the request/response, the browser reads this as an instruction to create a persistent HTTP connection, once this persistent connection is established, the client just needs to listen for messages coming in the stream, the server can push these messages whenever it wants and the connection is closed as soon of one of the sides decides that it needs to be closed.

SSE is designed to be efficient, since it's a long lived connection, it reduces latency by eliminating costly handshakes, its protocol is simple and text based, offers gzip compression and it has a built in retry mechanism to handle broken connections.

The client side implementation of SSE is handled by the EventSource API described as part of the HTML5 standard, most modern browsers support it, except IE and Edge (of course), but don't worry, you can still use a polyfill.

The EventSource API is quite simple, you just need to create a new EventSource object, ie:

var evtSource = new EventSource("/updates");

with this object, you can start listening for messages:

evtSource.onmessage = function(e) {
  console.log(e.data);
}

You can also listen for a specific event:

evtSource.addEventListener("foo", function(e) {
  console.log(e.data);
}, false);

In case there’s any connection error, you can handle them like this:

evtSource.onerror = function(e) {
  console.log("EventSource failed.");
};

And finally, when you want to close the stream:

evtSource.close();

The server side implementation is simple as well, most web frameworks already have this implemented, I'll give you an example using the Ruby on Rails built it implementation:

class UpdatesController < ActionController::Base
  include ActionController::Live

  def index
    response.headers['Content-Type'] = 'text/event-stream'
    sse = SSE.new(response.stream, retry: 300)

    loop do
      sse.write('hello world')
      sleep 1
    end

  rescue ActionController::Live::ClientDisconnected
    logger.info('SSE client disconnected')
  ensure
    sse.close
  end
end

you see?, it's just a normal Rails controller, nothing complicated (I'm watching you websockets).

With great power comes great responsibility

Browsers have a limit for simultaneous open connections to the same server, the number is around 6 in most modern browsers, this mean you'll have one less connection available for when for example the user opens your app in a different browser window/tab, now let's say the user opens 6 tabs, then you will run out of available connections. There are a few techniques to deal with this, one of them is domain sharding, but be aware, this technique can be considered harmful as well.

One application opening so many connections simultaneously breaks a lot of the assumptions that TCP was built upon; since each connection will start a flood of data in the response, there’s a real risk that buffers in the intervening network will overflow, causing a congestion event and retransmits.

The only feasible solution to this problem could be HTTP/2 and its multiplexing feature, and guess what, you can start using HTTP/2 today, topic that I'll tackle in a future post explaining how to implement SSE over HTTP/2 with NGINX and Ruby on Rails.

Wrapping up

Next time you see a real time feature coming in your backlog, think twice about the solution you're need to offer, there's a big chance you’ll end up over engineering by using websockets, SSE is an excellent solution for most of the cases, so why don't you give it a try?