Forem: Juan Carlos del Valle

Mastering Airtable: A Powerful Tool for Developers

Juan Carlos del Valle — Wed, 19 Apr 2023 23:51:01 +0000

Today, I'm going to introduce you to an amazing tool called Airtable. It's perfect for developers who want to manage their data with a simple interface, allowing them to focus more on the front-end. The best part? It's mostly free for everyone to use! So, let's dive in and explore Airtable together.

Signing Up and Creating a Base

Head over to airtable.com and sign up for a free account. Once you're logged in, you can create a new base. A base is a set of tables, similar to different sheets in a spreadsheet. By default, Airtable creates four columns: Name, Notes, Assignee, and Status. You can manage different types of fields, such as long text, assignee, and single select.

Customizing Your Fields

You can easily edit any field by clicking the down arrow and selecting "Edit Field." You can change the field type and other settings. In this example, we'll create an auto number field called "ID," a long text field for the post or tweet, a date-time field for the "Post By" date, and a status field for "Posted" or "Pending."

Adding Test Posts and Automations

Add some test posts to your table and set their respective statuses. Next, explore the automations at the top of the page. Automations allow you to execute actions based on triggers, such as a record matching certain conditions or a scheduled time.

Connecting to Twitter

In this example, we'll connect Airtable to Twitter using an automation that posts a tweet. To do this, choose the "Post Tweet" action and connect your Twitter account. You can test the action to make sure it works.

Filtering Data and Creating Custom Views

Back in the data section, you can create custom views to filter the data based on certain conditions. For instance, you can create a "Pending Tweets" view that only shows tweets with a status of "Pending." You can also add a formula field to determine if a tweet needs to be posted based on the current date and time.

Setting Up Automations to Post Tweets

With your custom view in place, head back to the automations section and add a step between the scheduler and the "Post Tweet" action. This step will find records, specifically the pending tweets that need to be posted. Once you've set this up, you can create a loop to iterate through each pending tweet and post it to Twitter.

Conclusion

Airtable is an incredibly powerful and flexible tool for developers. With its simple interface, powerful automations, and seamless integrations with other services like Twitter, it's easy to see why so many developers love it. By following this tutorial, you'll be well on your way to mastering Airtable and leveraging its full potential in your projects.

Quick Introduction to GraphQL

Juan Carlos del Valle — Wed, 12 Apr 2023 23:47:31 +0000

Hello and welcome back! My name is Juan, and I'm on a mission of making coding accessible to everyone in the world. Today, we'll discuss GraphQL, an alternative to traditional REST APIs that offers a more efficient and flexible way to fetch data from the server. This is especially perfect for front-end developers looking to optimize their applications.

What is GraphQL?

GraphQL is a query language for APIs, developed by Facebook. It's a more efficient and powerful way to fetch data from the server, making it easier to handle complex data requests.

Getting Started with GraphQL

To start, we need a GraphQL server. We'll be using Hasura, but there are several other options out there, mostly open-source.

For this tutorial, I'll be using the server that we built in a previous video. Here's a link for you to go ahead and set up the server so you can run these queries on your computer.

Querying Data with GraphQL

Queries are used to request data from the server. In this example, we'll retrieve the title and description of our exercises.

query getExercisesList {
  exercises {
    title
    description
  }
}

To also get the muscles that the exercise triggers, we can simply add the muscles field and run the query again.

Mutations in GraphQL

Mutations are used for insert, update, or delete operations in GraphQL. Queries are for reading, while mutations are for writing or updating.

Here's an example of a mutation to create a workout:

mutation createWorkout {
  insert_workout_one(
    object: {
      title: "My First Workout"
      description: "This is the description of my first workout"
    }
  ) {
    workout_id
  }
}

Adding Exercises to a Workout

To add exercises to a workout, we can modify the mutation like this:

mutation createWorkoutWithExercises {
  insert_workout_one(
    object: {
      title: "My Second Workout"
      description: "This is the description of my second workout"
      exercises: {
        data: [
          { exercise_id: "exercise-id-1" }
          { exercise_id: "exercise-id-2" }
        ]
      }
    }
  ) {
    workout_id
  }
}

Using Conditions, Offsets, and Limits in Queries

With GraphQL, we can easily limit the amount of data we retrieve and apply conditions to our queries. This is useful for pagination and filtering data.

query getWorkouts($title: String!) {
  workouts(
    limit: 1
    offset: 1
    where: { exercises: { exercise: { title: { _eq: $title } } } }
  ) {
    title
    description
    exercises {
      exercise {
        title
        description
      }
    }
  }
}

Real-time Updates with Subscriptions

GraphQL supports real-time updates through subscriptions. You can subscribe to changes in your data and automatically receive updates when the data changes.

subscription getWorkouts {
  workouts {
    title
    description
    exercises {
      exercise {
        title
        description
      }
    }
  }
}

Using Streams

Another approach for real-time updates is using streams. Streams are more suitable for use cases like building chat applications.

subscription workoutStream($batchSize: Int!, $cursor: timestamptz!) {
  workout_stream(batch_size: $batchSize, cursor: $cursor) {
    title
    description
  }
}

Struggling with Your Social Media Bio? Try ChatGPT's Simple and Free Template!

Juan Carlos del Valle — Tue, 11 Apr 2023 17:37:57 +0000

Are you struggling to come up with the perfect bio for your social media profiles? Look no further than ChatGPT's simple and free template!

This user-friendly template offers a quick and easy solution to craft an engaging and impressive bio that reflects your personality and interests. Whether you're a seasoned influencer or just getting started, ChatGPT has everything you need to take your social media game to the next level. So why wait? Try this free template today and watch your online presence soar!

GPT Template for Your Social Media Profiles

To get started, simply fill in the following details about yourself here:

https://chat.openai.com/chat

Given this info about myself:

Name: 
Current position: 
Company: 
Stack: 

Roles: 
Interests: 
Looking For: 

1. Bio ( at least 3 paragraphs ) for my joinentre.com profile.
2. Short intro ( less than 160 characters) for my Twitter profile, no hashtags.
3. Short intro ( less than 80 characters) for TikTok, no hashtags.

Should be engaging, In first person.

The Power of a Well-Crafted Bio

An engaging bio can work wonders for your social media profiles. It not only showcases your skills, interests, and experiences but also helps to attract new followers and build a strong online presence.

With ChatGPT's template, you can ensure that your bio is tailored for each platform and optimized for maximum impact.

Build a Powerful GraphQL API with Postgres in Under 10 Minutes

Juan Carlos del Valle — Fri, 07 Apr 2023 18:55:59 +0000

In this tutorial, you'll learn how to create a powerful GraphQL API using a relational database model and Postgres in under 10 minutes! We'll be setting up a Hasura engine, connecting it to a database, and exposing data through GraphQL. This is a great way to quickly develop a robust and scalable API for your applications.

Setting up Hasura Engine and Postgres Database

To start, we'll be using a tool called Hasura, which will serve as our GraphQL server. It requires a Postgres database, which we'll create using a Docker Compose file. This file will specify the Postgres version and the Hasura engine version we'll be using, as well as the ports and configurations needed to connect our database to the GraphQL API.

First, create a docker-compose.yml file with the following content:

version: '3.6'
services:
  postgres:
    image: postgres:12
    restart: always
    ports:
    - "5432:5432"
    volumes:
    - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
  graphql-engine:
    image: hasura/graphql-engine:v2.21.0
    ports:
    - "8080:8080"
    depends_on:
    - "postgres"
    restart: always
    environment:
      ## postgres database to store Hasura metadata
      HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs
      PG_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to run console offline (i.e load console assets from server instead of CDN)
      # HASURA_GRAPHQL_CONSOLE_ASSETS_DIR: /srv/console-assets
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
volumes:
  db_data:

Replace postgrespassword with a secure password of your choice. After that, run the following command in your terminal:

docker-compose up -d

This command will pull the required images and start the services. Once everything is running, you can access the Hasura console on localhost:8080.

Setting up the Database

We'll use a tool called Postico to connect to our Postgres database. Enter your database credentials (host, user, and password) and connect to the database. Create a new database called workouts_dev and configure Hasura to connect to this database.

Now, we'll create the necessary tables in our database. In this example, we're creating tables for users, workouts, workouts_exercises, and exercises.

CREATE TABLE users (
  id character varying(50) PRIMARY KEY,
  full_name character varying(256)
);

CREATE TABLE workouts (
    workout_id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
    user_id character varying(50) (null),
    title character varying(256),
    description text
);

CREATE TABLE workouts_exercises (
    workout_id uuid REFERENCES workouts(workout_id),
    exercise_id uuid REFERENCES exercises(exercise_id),
    repetitions smallint DEFAULT 10,
    rest_time smallint DEFAULT 30
);

CREATE TABLE exercises (
    exercise_id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
    image_url character varying(256),
    title character varying(256),
    description text,
    muscles character varying(50)[]
);

After setting up the tables and their relationships, our database is ready to be used with the GraphQL API.

Setting up the GraphQL API

With the database connected to Hasura, we can start tracking the tables in our GraphQL API. This will allow us to access and manipulate the data in these tables using GraphQL queries and mutations.

To track the tables, go to the Hasura console, navigate to the database settings, and click on "Reload All Databases." You should now see the tables you created earlier. Click on "Track" for each table to add them to your GraphQL API.
Once the tables are tracked, you can start writing GraphQL queries and mutations to interact with your data. In this example, we inserted a new exercise and queried the data using GraphQL.

Wrapping Up

As you can see, it's easy to set up a powerful GraphQL API with a Postgres database using Hasura. In the next part of this tutorial series, we'll dive deeper into configuration options and cover how to integrate the

3 Top Features of JavaScript ES6: A Guide for Beginners

Juan Carlos del Valle — Fri, 07 Apr 2023 18:14:02 +0000

Welcome back to our JavaScript tutorial for beginners.

In this video, Juan shares his top three features of JavaScript in the new ES6 specification. If you’re new to the language or the new specification, these three features will be helpful to make your code more readable and concise.

1. Destructuring Assignment

Destructuring is a convenient way to extract elements from arrays or attributes from objects. It can make your code more readable and concise. Let’s see an example:

const arr = [1, 2, 3, 4, 5];

const [item1, item2, ...rest] = arr;

console.log(item1, item2, rest); // 1 2 [3, 4, 5]

Here, we use the destructuring syntax to extract the first two items of the array and the rest of the items in a new array. The same syntax can be used to extract properties from an object:

const person = {
  name: 'John',
  age: 30,
  city: 'New York',
};

const { name, age, ...other } = person;

console.log(name, age, other); // John 30 { city: 'New York' }

2. Default Parameters

We can specify default parameters to our functions so that we can have default values for them. This is a pretty convenient way, especially when using TypeScript. Let’s see an example:

function greet(name = 'Juan', message = 'Welcome') {
  console.log(`${message} ${name}`);
}

greet(); // Welcome Juan
greet('John', 'Hello'); // Hello John

Here, we use the default parameter syntax to set the default values for name and message. If we don't pass any arguments to the function, it will use the default values.

3. Template Literals

Template literals provide an easy way to create strings with embedded expressions. It just makes it easier to concatenate data. Let’s see an example:

const name = 'John';
const message = `Welcome ${name}`;

console.log(message); // Welcome John

Here, we use the template literal syntax to create a string with an embedded expression. This is a more concise way to concatenate strings than using the + operator.

In conclusion, these are the three top features of JavaScript in the new ES6 specification. They are simple to use and can speed up your coding. Juan recommends using these features in your everyday coding. Thank you!