Forem: Alvaro Torres Carrasco

NestJS: Introduction

Alvaro Torres Carrasco — Sun, 14 Jun 2020 19:02:23 +0000

This is the first post about NestJS. The introduction

NestJS is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of Object Oriented Programming, Functional Programming, and Functional Reactive Programming.

Under the hood, Nest makes use of robust HTTP Server frameworks like Express (the default) and optionally can be configured to use Fastify as well!

Nest provides a level of abstraction above these common Node.js frameworks (Express/Fastify), but also exposes their APIs directly to the developer. This allows developers the freedom to use the myriad of third-party modules which are available for the underlying platform.

Prerequisites

You have to make sure that Node.js (>= 10.13.0) is installed on your operating system.

Language

NestJS is built with and fully supports TypeScript. However, Nest is compatible with both TypeScript and pure JavaScript. This framework takes advantage of the latest language features, so to use it with vanilla JavaScript we need a Babel compiler.

Why NestJS?

The main problem with other javascript frameworks is the structure of the project made with them. The majority of them has many powerful features and solutions but they dont have a easy testeable structure or a heavily convoluted file tree. However, Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications. The architecture is heavily inspired by Angular.

Strengths

[X] Typescript and Javascript fully support
[X] Powerful CLI
[X] Decorators
[X] Extensible, Versatile, Progressive
[X] Open Source
[X] GraphQL Friendly
[X] WebSockets integrated

Powerful CLI

The Nest CLI is a command-line interface tool that helps you to initialize, develop, and maintain your Nest applications. It assists in multiple ways, including scaffolding the project, serving it in development mode, and building and bundling the application for production distribution. It embodies best-practice architectural patterns to encourage well-structured apps.

All nest commands follow the same format:

nest commandOrAlias requiredArg [optionalArg] [options]

Command overview

Platform

Nest aims to be a platform-agnostic framework. Platform independence makes it possible to create reusable logical parts that developers can take advantage of across several different types of applications. Technically, Nest is able to work with any Node HTTP framework once an adapter is created. There are two HTTP platforms supported out-of-the-box: express and fastify. You can choose the one that best suits your needs.

Installation

nestjs / nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀

A progressive Node.js framework for building efficient and scalable server-side applications.

Description

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Under the hood, Nest makes use of Express, but also, provides compatibility with a wide range of other libraries, like e.g. Fastify, allowing for easy use of the myriad third-party plugins which are available.

Philosophy

In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both front and backend applications, giving rise to awesome projects like Angular, React and Vue which improve developer productivity and enable the construction of fast, testable, extensible frontend applications. However, on the server-side, while there are a lot of superb libraries, helpers and tools…

View on GitHub

Install via npm:

npm i -g @nestjs/cli
nest new project-name

Install via yarn:

yarn add @nestjs/cli
nest new project-name

Useful Templates

Made with Docker and Prisma:

z1-lab / nestjs-backend-template

Nest.js Backend Template

Getting started

Clone this repository and open it

$ git clone https://github.com/z1-lab/nestjs-backend-template
$ cd nestjs-backend-template

Install dependencies

$ yarn

Create a copy of the .env.development file and call it .env. Update the environment variables to match your current environment.

$ cp .env.development .env

Launch a PostgreSQL database with docker, it will use the port defined in the DB_PORT var.

$ docker-compose up

Generate the prisma client

$ yarn prisma generate

Create the database model

$ yarn prisma migrate up --experimental

Launch the dev mode

$ yarn dev

If you're going to edit the GraphQL schema, run the following command to regenerate the TypeScript types.

$ yarn gql:typings --watch

Scripts

yarn dev. Runs the project in dev mode, which means that it won't check types and will restart with every change you make.
yarn build. Compiles the project to the ./dist folder.
yarn typecheck…

View on GitHub

Typescript nestjs starter:

nestjs / typescript-starter

Nest framework TypeScript starter ☕

A progressive Node.js framework for building efficient and scalable server-side applications.

Description

Nest framework TypeScript starter repository.

Installation

$ npm install

Running the app

# development
$ npm run start

# watch mode
$ npm run start:dev

# production mode
$ npm run start:prod

Test

# unit tests
$ npm run test

# e2e tests
$ npm run test:e2e

# test coverage
$ npm run test:cov

Support

Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please read more here.

Stay in touch

Author - Kamil Myśliwiec
Website - https://nestjs.com
Twitter - @nestframework

License

Nest is MIT licensed.

View on GitHub

Follow me on Twitter if you want to know about my future articles, projects or whatever

Javascript Libraries you should know in 2020 (Part 2)

Alvaro Torres Carrasco — Mon, 18 May 2020 17:13:57 +0000

You can check te first part here: Part 1

The second part (and maybe, not the last one) has finally arrived. I have worked very hard with my TFG and a daily routine with the internship.

I don't roll up anymore

Libraries

Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

The most powerful feature of this library is Anime's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties. You can animate multiple CSS transforms properties with different timings simultaneously on a single HTML element. Play, pause, control, reverse, and trigger events in sync using the complete built-in callbacks and controls functions.

Anime.js works with anything web. CSS, SVG, DOM attributes, and JavaScript Objects: animate everything with a single unified API.

His website: https://animejs.com

You can check the source code:

juliangarnier / anime

JavaScript animation engine

anime.js

JavaScript animation engine | animejs.com

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects

Getting started | Documentation | Demos and examples | Browser support

Getting started

Download

Via npm

$ npm install animejs --save

or manual download.

Usage

ES6 modules

import anime from 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Documentation

Demos and examples

View on GitHub

Installation
Npm

npm install animejs --save

Three.js

Three.js is the world's most popular JavaScript framework for displaying 3D content on the web, providing you with the power to display incredible models, games, music videos, scientific and data visualizations, or pretty much anything else you can imagine, right in your browser and on your smartphone!

I think as it is of significant visual importance, we had better look at graphic examples

Example 1
Example 2
Example 3

His website: https://threejs.org

You can check the source code:

mrdoob / three.js

JavaScript 3D library.

three.js

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

Examples — Documentation — Wiki — Migrating — Questions — Forum — Slack — Discord

Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from './js/three.module.js';
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth /

…

View on GitHub

AOS

AOS (Animate On Scroll Library) is a lightweight library that allows us to animate div or these types of containers with curious movements like flip or fade.

His website: https://michalsnik.github.io/aos/

In his website, you can check many other examples of what this library can do.

You can check the source code:

michalsnik / aos

Animate on scroll library

❗❗❗ This is README for aos@next ❗❗❗

For last stable release (v2) go here

🚀 Demo

🌟 Codepen Examples

👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.

⚙ Installation

Basic

Add styles in <head>:

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add script right before closing </body> tag, and initialize AOS:

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Using package managers

Install aos package:

yarn add aos@next
or npm install --save aos@next

Import script, styles and initialize AOS:

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS

…

View on GitHub

Installation
Npm

npm install --save aos@next

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

Features

[x] Credit card number formatting
[x] Phone number formatting
[x] Date formatting
[x] Numeral formatting
[x] Custom delimiter, prefix and blocks pattern
[x] CommonJS / AMD mode
[x] ReactJS component
[x] AngularJS directive (1.x)
[x] ES Module

This is an example:

His website: https://nosir.github.io/cleave.js/

You can check the source code:

nosir / cleave.js

Format input text content when you are typing...

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically.

Features

Credit card number formatting
Phone number formatting (i18n js lib separated for each country to reduce size)
Date formatting
Numeral formatting
Custom delimiter, prefix and blocks pattern
CommonJS / AMD mode
ReactJS component
AngularJS directive (1.x)
ES Module

TL;DR the demo page

Why?

The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.

However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.

Installation

npm

npm install --save cleave.js

CDN

cleave.js is available on jsDelivr and on cdnjs.com

old school

Grab file from dist directory

Usage

Simply include

<script src="cleave.min.js"></

…

View on GitHub

Installation
Npm

npm install --save cleave.js

Granim.js

Granim.js is a library to create fluid and interactive gradient animations with this small javascript library.

This is an example:

His website: https://sarcadass.github.io/granim.js/

You can check the source code:

sarcadass / granim.js

Create fluid and interactive gradient animations with this small javascript library.

Granim.js

Create fluid and interactive gradient animations with this small javascript library.

See the demo site.

Install

From NPM

Run npm install granim --save

From Bower

Run bower install granim

Static

Download the latest version in the release section

How to use

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

View on GitHub

Installation
Npm

npm install granim --save

Remember,it´s possible I will write another part of this post, with another 5 libraries

Follow me on Twitter if you want to know about my future articles, projects or whatever

Javascript Libraries you should know in 2020 (Part 1)

Alvaro Torres Carrasco — Thu, 19 Mar 2020 13:18:28 +0000

As we all know, Javascript is a very versatile programming language. At this moment, I am currently doing my TFG and I need to add some new features. I am using NodeJS with Nest at the backend and ReactJS at the frontend. Mainly, I searched two libraries: to format my dates and to make some graphics.

After an intense search, I found date-fns and ChartJS. It was there when I realized that it could be interesting to make a post about very useful javascript libraries, and this is the post.

Libraries

I found 10 very useful libraries but, in comments, you can collaborate and add your favorite library. This post is only the first part, with 5 libraries

ChartJS

Simple yet flexible JavaScript charting for designers & developers
ChartJS allows you to visualize your data with simple graphics. It offers us to mix and match bar and line charts to provide a clear visual distinction between datasets.

You can check the source code:

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag

Simple yet flexible JavaScript charting for designers & developers

Documentation

Contributing

Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs tag.

License

Chart.js is available under the MIT license.

View on GitHub

ChartsJS offers us 8 chart types and each one is customisable and animable. In addition, is responsive. Redraws charts on window resize for perfect scale granularity.

Installation
Npm

npm install chart.js --save

Using CDN

His website: https://www.chartjs.org

Date-fns

Date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is a' iiii")
//=> "Today is a Thursday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

You can check the source code:

date-fns / date-fns

⏳ Modern JavaScript date utility library ⌛️

date-fns provides the most comprehensive, yet simple and consistent toolset
for manipulating JavaScript dates in a browser & Node.js

🚀 date-fns v2 is out | 📖 Documentation | 🧑‍💻 JavaScript Jobs

Powering >500k Projects & Generating ~7 Million Downloads/Week

It's like Lodash for dates

It has 180+ functions for all occasions.
Modular: Pick what you need. Works with webpack, Browserify, or Rollup and also supports tree-shaking.
Native dates: Uses existing native type. It doesn't extend core objects for safety's sake.
Immutable & Pure: Built using pure functions and always returns a new date instance.
TypeScript & Flow: Supports both Flow and TypeScript
I18n: Dozens of locales. Include only what you need.
and many more benefits

import { compareAsc, format } from 'date-fns'
format(new Date(2014, 1, 11), 'yyyy-MM-dd')
//=> '2014-02-11'
const dates = [

…

View on GitHub

Date-fns is modular so you can pick just what you need and stop bloating your project with useless functionality. It doesn't reinvent the wheel and uses the existing native type. Also, this library uses Functional Programming and works with pure function and always returns a new date instance instead of changing the passed one.

In addition to its tiny size, date-fns is fast.

Installation
Npm

npm install date-fns --save

Yarn

yarn add date-fns

His website: https://date-fns.org

HammerJS

Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents. It doesn’t have any dependencies, and it’s small, only 7.34 kB minified + gzipped!

It’s easy to use, just include the library and create a new instance.

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('pan', function(ev) {
    console.log(ev);
});

You can check the source code:

hammerjs / hammer.js

A javascript library for multi-touch gestures :// You can touch this

hammer.js

A JavaScript library for detecting touch gestures.

Installation

NPM

npm install --save hammerjs

Yarn

yarn add hammerjs

CDN

https://cdnjs.com/libraries/hammer.js/

Usage

hammer.js has a quick start option for gestures it already recognizes.

// Get a reference to an element.
var square = document.querySelector('.square');
// Create an instance of Hammer with the reference.
var hammer = new Hammer(square);
// Subscribe to a quick start event: press, tap, or doubletap.
// For a full list of quick start events, read the documentation.
hammer.on('press', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're pressing me!");
  console.log(e);
});

If you want to recognize your own gestures, such as tripletap, then you'll have to use…

View on GitHub

Click in this url if you want to check how it works

Installation
Npm

npm install --save hammerjs

Yarn

yarn add hammerjs

Using CDN

His website: https://hammerjs.github.io

Ramda

Ramda is a practical functional library for JavaScript programmers.

There are already several excellent libraries with a functional flavor. Typically, they are meant to be general-purpose toolkits, suitable for working in multiple paradigms. Ramda has a more focused goal. They wanted a library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

import * as R from 'ramda'

const {identity} = R
R.map(identity, [1, 2, 3])

You can check the source code:

ramda / ramda

🐏 Practical functional Javascript

Ramda

A practical functional library for JavaScript programmers.

Why Ramda?

There are already several excellent libraries with a functional flavor. Typically, they are meant to be general-purpose toolkits, suitable for working in multiple paradigms. Ramda has a more focused goal. We wanted a library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

What's Different?

The primary distinguishing features of Ramda are:

Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple elegant code.
Ramda functions are automatically curried. This allows you to easily build up new functions from old ones simply by not supplying the final parameters.
The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on is…

View on GitHub

The primary distinguishing features of Ramda are:

Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple, elegant code.
Ramda functions are automatically curried. This allows you to easily build up new functions from old ones simply by not supplying the final parameters.
The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on is generally supplied last.

Ramda provides us a playground to test it: https://ramdajs.com/repl/

Installation
Npm

npm install ramda

Using CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

His website: https://ramdajs.com

ParticlesJS

A lightweight JavaScript library for creating particles.
Many tiny particles moving and interacting with each other or with you have a certain appeal. If you are ever in the situation where you need to work with many particles, Particles.js will serve you well. As is evident from the name, it is a JavaScript library that can help you create particle systems. Plus, it's lightweight, easy to use, and gives you a lot of control.

You can check the source code:

VincentGarreau / particles.js

A lightweight JavaScript library for creating particles

particles.js

A lightweight JavaScript library for creating particles.

`Demo / Generator`

Configure, export, and share your particles.js configuration on CodePen:
http://vincentgarreau.com/particles.js/

CodePen demo:
http://codepen.io/VincentGarreau/pen/pnlso

`Usage`

Load particles.js and configure the particles:

index.html

<div id="particles-js"></div>
<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src":

…

View on GitHub

CodePen demo: http://codepen.io/VincentGarreau/pen/pnlso

Usage

index.html

<div id="particles-js"></div>

<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

Installation
Npm

npm install particles.js

Using CDN
His website: https://vincentgarreau.com/particles.js/

You can check the second part here

Remember, as soon as posible, I will write the second part of this post, with another 5 libraries

Follow me on Twitter if you want to know about my future articles, projects or whatever

Conventional Commits

Alvaro Torres Carrasco — Thu, 05 Mar 2020 12:24:18 +0000

Hello 🙋‍♂️, today I´m going to write about Conventional Commits (as you can see in the title). I've always wondered if there was a standardization with commits. I think this standardization is necessary and it can make our life easier. I asked a colleague if this exists, and it's the topic I'm going to talk to you about.

Git is a very powerful tool that most of us have installed on their machines. The worst part of using git is the no standardization with commits. Many people don´t follow any rules and the commit log, when you have to work with a team, has many possibilities to be chaotic.

Conventional Commits is a specification for adding human and machine-readable meaning to commit messages. This is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history, which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.

Commits should have the following structure:

<type>[optional scope]: <description>

[optional body]

[optional footer]

Types of commit:

feat: Add a new feature to the codebase (MINOR in semantic versioning).
fix: Fix a bug (equivalent to a PATCH in Semantic Versioning).
docs: Documentation changes.
style: Code style change (semicolon, indentation...).
refactor: Refactor code without changing public API.
perf: Update code performances.
test: Add test to an existing feature.
chore: Update something without impacting the user (ex: bump a dependency in package.json).

Some examples:

Commit with no body:

feat: allow provided config object to extend other configs

docs: correct spelling of CHANGELOG

Commit message with scope:

feat(lang): add spanish language

Commit message for a fix using an (optional) issue number:

fix: correct minor typos in code

see the issue for details on the typos fixed

closes issue #12

Benefits

Understandability

Commits are more descriptives and it's easier to understand them. It became also easier to contribute.

Changelogs

Automatically generating CHANGELOGs.

Revert changes

If you have one action per commit, it´s easier to revert a change or a git conflict

Improve your Git skills

Not all repositories have a squash and merge option, you sometimes have to do this operation by yourself. It's important to know what is going on under the machine operations!!

Follow me on Twitter if you want to know about my future articles, projects or whatever

Creating a Twitter Bot

Alvaro Torres Carrasco — Thu, 20 Feb 2020 20:25:35 +0000

Hello 💁‍♂️, this is my second post on this platform and my first post written in english. Excuse me if I make mistakes with the language

⚠️ Warning: this post have many gifs⚠️

Today We´re going to do it a Typescript Twitter Bot that retweet tweets that contains the hastag #100DaysOfCode. 100DaysOfCode it´s a coding challenge. It has two main rules: Code minimum an hour every day for the next 100 days and tweet your progress every day with the #100DaysOfCode hashtag. You can visit his website for more information: 100DaysOfCode

Before start, we need 3️⃣ important things:

Nodejs and yarn: to download click here Node and install it. Then, install yarn: npm i yarn. For more informationl, click here Yarn.
Your favourite code editor. My favourite and my recommendation is Visual Studio Code. You can download it here: VsCode
Twitter Developer Account. First, you must have a working twitter acount. Now go to Twitter Developers. In my case, I am going to use my personal account

You have to click on apply for a developer account and select "Making a bot". Then, complete with your personal data. In the next step, you have to explain in english how you plan to use Twitter data and/or API. It´s easy. With respect to the following options, select these like the picture:

In this area, explain what are you going to rt, mg or whatever you want. Read (or not🙄, as you prefer🤣) and accept the conditions. Next, you have to confirm your email.

⚠️ WARNING: look at the spam folder❗️❗️❗️⚠️

AND...... YES!!!! 🤗🤗🤗
At this moment, We have a development account

At this moment, we have to create an app. Write your personal information in the fields. When you finish, you have to see a screen like this. If not, but you have created the app succesfully, click in your profile name and go to apps.

Click on details and go to Keys and tokens. Take a txt 📝 and copy Api key, Api secret key, access token and access token secret. We will use it later.

When you finish these steps, Congratulations We configure our developer twitter account.

We are going to start with the main reason for this post: creating a twitter bot. In this case, we are going to use a node/typescript starter that one friend did it some days ago: Node/Typescript starter and her post about the starter: Post Starter

Assuming we have git installed (if not Install Git), we are going to follow the steps that appears in the readme of my friend post.

Open the project in your IDE and you have to see something like this:

We are going to create two files in src folder: bot.ts and config.ts. You can delete index.ts. When you created it, select the file who is named package.json. In this file, node administrate our dependencies. You have to change it and it should be like this (your name, license and personal data can be changed):

We are lucky because things like babel o eslint are preconfigured by Horus, the creator of the starter.

The next step consist on modify the file config.ts. In this file, we have to put our Twitter developers keys that we saved some minutes ago. This keys are the "passwords" for the Twitter API and without them, it´s impossible to make a Twitter bot. The config.ts should be as follows:

Maybe you are at home or in a café and you are asking yourself what is the commented lines, and it´s normal.

This is because EsLint is a static code analysis tool for identyfing problematic patterns and warnings in Javascript code. Basically, ESLint ask us to use camel case, but for Twitter API, these names have to be like that.

For the next steps, I recommend you to enable terminal inside VsCode.

The First and the more important step, we have to import a twitter package for nodejs. His name is Twit and you must install like that:


yarn add twit

When you import install and code the import in bot.ts, will be appear a type error. We have to install the types module for twit:

yarn add @types/twit

Next, we have to create a new instance of twit. In this case, his name are going to be twitter and it´s required to import the config.ts

const Twitter = new twit(require('./config'));

We are going to create an object named twitterOptions, for example. In this object, we have to indicate to twitter some parameters that are essential. Again, add a comment line to skip EsLint. This object is Twit.Params type:

const twitterOptions: twit.Params = {
  q: '#100DaysOfCode',
  count: 100,
  // eslint-disable-next-line @typescript-eslint/camelcase
  result_type: 'recent',
};

The parameter "q" indicate the hastag we want to retweet. You can change it for another hastag.

If you want to know more about these parameters, click here: Parameters Twitter API

Create an arrow function with a name, in my case, retweetLatest.
Inside this function, we are going to make a Get request. This request GET any of the REST API endpoints. There are three parameters.

T.get(path, [params], callback).

path is the endpoint to hit, params (Optional) parameters for the request and callback: function (err, data, response) data is the parsed data received from Twitter and response is the message received from Twitter.

Twitter.get('search/tweets', twitterOptions, (error: Error, data: any) => {});

Inside, we are to put an if structure to discrminate if there is an error or not:

if (!error) {
} else { 
console.log('There was an error with your hashtag search:', error);
}

Inside the if , we have to pick the id of the tweet we picked.

With the id saved in a const, we are going to make a post request. Same usage as Twitter.post(
    'statuses/retweet/' + retweetId,
    {},
    (error: Error, response:Response) => {

    },
);

Import the Response type in the Twit initial import as you can see in the picture:

To finish the retweet bot, you have to put two if structures discriminating by response and error and bot.ts is like that:

To finish, call the function and add one setInterval to call the same function every so often:

retweetLatest();
setInterval(retweetLatest, 1000 * 20);

To run the bot, put this command in the terminal:

yarn dev

When you run this command in your terminal, see your Bot account in Twitter. You have to see a retweet (if there are any) in your feed.

First, thanks you for reading this post. Comment if you liked it 😁, or if not😢.

To say goodbye, I put my repo of this bot on github. The repo of the starter that we use in this tutorial and last but not least, FOLLOW ME ON TWITTER Alvaro Torres Carrasco

Personal Brand para estudiantes🎓

Alvaro Torres Carrasco — Thu, 14 Nov 2019 11:36:17 +0000

Hola, soy Álvaro Torres 🙋‍♂️ y este es mi primer post en la plataforma. Aclarar antes de todo que no soy un profesional ni tengo estudios de marketing digital, solo me baso en mi corta experiencia y en las de aquellas personas con las que he compartido conocimientos en estos 3 años que llevo en el mundo de la programación.

Antes de todo, me gustaría explicar porqué hago este post. Conozco a muchos estudiantes como yo, que salen al mundo laboral, ya sea a través de FCT o tras haber acabado la universidad y creen que con tener el título es suficiente (spoiler ➡ NO❗❗). Considero que cada programador debería tener bien cuidada su imagen personal, ya que en este mundo tan globalizado en el que vivimos actualmente, y más en este nuestro sector, ser visible es vital. ¿Has buscado alguna vez tu nombre en internet?🌐. Si no lo has hecho hace menos de un mes, te insto a abrir una pestaña nueva y comprobarlo. Venga, no seas vago, tómate unos segundos. ¿Ya?, prosigamos. ¿Qué habéis obtenido de vuestra búsqueda? Supongo que redes sociales, perfiles en plataformas conocidas y alguna cosa más (todo legal por favor 🙄). Pero, ¿es esto correcto?. Os voy a dejar una captura de lo que pasa cuando buscas mi nombre en internet:

El resultado de mi búsqueda es ciertamente bueno

Aunque no todo lo que debería. Como programador, lo más importante es que se vean, como en la captura de mi nombre, Linkedin, Twitter, plataformas como Medium o Dev.to y resultados que sean buenos para que una persona, la cual no te conoce de nada, al ver tu currículum o al hacer una entrevista de trabajo por ejemplo, luego pueda contrastar quién eres y tenga al alcance de la mano esos resultados. ¿Cómo se consigue esto? Lo veremos más adelante.

Github

Probablemente sea el mejor escaparate para un desarrollador. Para los más despistados, Github es una plataforma para programadores y desarrolladores en la que alojar proyectos utilizando el sistema de control de versiones Git. En cualquier puesto de trabajo al que quieras acceder, es tu principal valedor. Cualquier persona puede ver como has estructurado tu proyecto, con que tecnologías lo has desarrollado o incluso con que equipo de trabajo has realizado el proyecto. Para tener un buen perfil de Github, los profesionales nos indican que hay ciertas prácticas a seguir ✅. La regla más importante es la siguiente: El peor perfil de Github es aquel que está vacío. No hace falta que desarrolles el nuevo Facebook, no es el cometido en este post. En este caso la utilizaremos como un escaparate para que los demás puedan ver nuestros proyectos. Otra de las cosas más importantes es contribuir en proyectos Open Source o hacer esos tan famosos pull request a proyectos de amigos, conocidos, compañeros de trabajo o proyectos que te parezcan interesantes, que tengas una cierta actividad en el perfil. Demostrar que eres capaz de ver y tratar un código que no has escrito y aportar algo que ayude al proyecto. Escribe un README que describa correctamente el contenido y objetivo del proyecto y utiliza una organización de carpetas con nombres claros y que ayuden a entender el contenido de cada carpeta. Una de las últimas features introducidas es GitHub Pages. Algo tan sencillo, y a la vez tan increíblemente potente, como poder ver nuestros proyectos en un hosting real de forma gratuita, eso sí, páginas estáticas. Ya no hay excusa para subir tu web personal a Github Pages.

Otra de las buenas prácticas que se recomiendan al usar Github es tener una buena estructura en los mensajes de _commits-.
Puedes emplear algunos sufijos como:

☑ feat:
Describe si trabajaste en un nuevo feature

☑ fix:
Describe si solucionaste un bug

☑ docs:
Dice si hiciste algún cambio en la documentación

☑ test:
Indica si añadiste un test

☑ refactor:
Nos muestra que se ejecutó algún refactor en el código

Sé ordenado y pulcro a la hora de trabajar en Github ya que recuerda, es una plataforma donde todos pueden ver tu código y tu forma de trabajar es muy importante para las empresas. Te dejo un post de Platzi donde ver buenas prácticas para usar esta plaforma.

Y recuerda, si no sigues estas pautas

El arma indispensable, que todo programador debería tener en su aval, con permiso de Github, es Linkedin. ¿Qué es Linkedin?.
Linkedin tiene 3 funciones principales:
➡ Plataforma de gestión de contactos: networking. Esta red social nos permite conectar con gente de todo el mundo 👨‍👩‍👧‍👧, teniendo acceso a su perfil y sus datos profesionales y permitiendo que los conectados de esa persona, puedan conectar contigo.
➡ Comunicación: podemos escribir, compartir y opinar del tema que queramos y todos nuestros contactos, y a la vez, los de este, ver y poder interactuar con nuestro post 📑.
➡ Empleo: es una de las herramientas más potentes de empleo profesional. Todo profesional debe tener Linkedin, por lo tanto, tienes visibilidad en el mundo profesional de manera instantánea.

Tener una foto clara de tu rostro, tener actualizado al día tanto el historial académico como el profesional. Es importante que vean que has estudiado y dónde has trabajado. Publica, lee, comparte. Interactúa con los demás en Linkedin. Por último, y no menos importante, personaliza tu URL.

OJO 👀: Para esto hay que tener un buen perfil de Linkedin, muy completo y siguiendo unas pautas precisas, os dejo este post. A mí me ayudó mucho.

Redes sociales

Es importante que si quieres usar tus redes sociales como forma de visibilización en el mundo de la tecnología, seas constante, tengas buen contenido y sean algo más serias que cuando teníamos 15 años (ejemplo: shuRubio19 🤣). En muchas ocasiones, las redes sociales, sobre todo Twitter, es una gran fuente de información, de visibilización para tus propios posts, aplicaciones, etc o simplemente para búsqueda de empleo. Una muy buena idea para llenar tus redes sociales es con fotos de los eventos de tecnología a los que acudes o ir informando del progreso de tu proyecto personal.

Plataformas

Un aspecto muy en cuenta para las empresas son tus gustos y aficiones personales, si te cultivas en tu tiempo libre o sin embargo, eres un amante de los deportes de riesgo. Es una buen síntoma que tengas aficiones y que no solo te dediques a la informática. Yo por ejemplo, escribo artículos sobre baloncesto en un blog muy conocido en España
(spam: https://www.solobasket.com/users/alvaritotc 🏀).

Tu propia web

Otra buenísima práctica es tener tu propia web, con un dominio con tu nombre y apellidos, que salga en los primeros resultados de Google al buscarte. En ella es bueno que pongas tu currículum web, tus post personales (si tienes), enlaces a tus redes sociales o hasta una demostración de lo que puedes hacer. Hay muchos designers ✍🏻 que usan su propia web para demostrar lo que son capaces de imaginar y crean un entorno muy amigable para el usuario, en resumen, tu carta de presentación.

Es muy recomendable, aunque quizás algo más díficil si estás empezando, que des cursos online 🎓, en plataformas web como Udemy o incluso en Youtube. Con cursos online, a la vez que demuestras tu manejo de dicha tecnología, también das a conocer tu manera de expresarte, de comunicarte con los demás. Otra muy buena idea, y os aviso ya, pronto pondré en práctica, es hacer tu propio Podcast, en plataformas como iVoox o Spotify. Todas estas prácticas no son más que una ayuda para aumentar nuestra presencia como programadores en la web y que podamos tener una red de contactos amplia.

En resumen 📝

La mejor forma de tener visibilidad online es ser tú mismo, y para ello debes tener en cuenta estos tips que te he dado. Es importante ser activo en aquellas plataformas en las que estás dado de alta y sobre todo darle uso y los resultados llegarán. El primer día mi Linkedin no estaba en el primer resultado de Google dado que hay un cantante sudamericano, si no recuerdo mal, que comparte nombre conmigo. Me ha costado lo mío, pero al final al buscar mi nombre y mis apellidos salen los resultados que buscaba. Todo se puede conseguir con esfuerzo.

Muchas gracias por dejar que te robe unos minutos de tu vida y dedicarte a leer mi Post. Nos vemos en la próxima.