DEV Community: David Mendoza (He/Him)

How to set Husky 4

David Mendoza (He/Him) — Wed, 31 Mar 2021 03:05:58 +0000

Hello guys, so this post is just a followup for a post I made at the beginning of 2020, and I recently updated it

How to set Eslint and Prettier for a React project on vs code

David Mendoza (He/Him) ・ Jan 8 '20 ・ 2 min read

What is husky

So basically husky is "Git hooks made easy" and we are going to use to automatically format all of our code that is staged for our commits, so we are going to use the "pre-commit" hook to run pretty-quick a simpler way to run our prettier scripts with configuration

Installing packages

npm i -D husky@4 pretty-quick

that's it...

Setting the scripts

{
// all of your package.json
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

Wrapping up

This is the simplest and quickest way to have "automatic formatting" on our commits, next time you run a commit, you will have a message something like this:

Not much to say but to leave any questions on the comments and I hope you find this post really helpful.

Explain like I'm five documentation

David Mendoza (He/Him) — Sat, 17 Oct 2020 05:22:36 +0000

Hey guys, I hope all of you are trying to be part of #hacktoberfest.
This months my company (web developers for companies) has started to get a lot of projects, and as I was taking a look at the planning I decided to take a break and read some Dev.

well I found this repo

facebook / docusaurus

Easy to maintain open source documentation websites.

Docusaurus

We are working hard on Docusaurus v2. If you are new to Docusaurus, try using the new version instead of v1. See the Docusaurus v2 website for more details.

Docusaurus v1 doc is available at v1.docusaurus.io and code is available on branch docusaurus-v1

Introduction

Docusaurus is a project for building, deploying, and maintaining open source project websites easily.

Short on time? Check out our 5-minute tutorial ⏱️!

Tip: use docusaurus.new to test Docusaurus immediately in a playground.

Simple to Start

Docusaurus is built in a way so that it can get running in as little time as possible. We've built Docusaurus to handle the website build process so you can focus on your project.

Localizable

Docusaurus ships with localization support via CrowdIn. Empower and grow your international community by translating your documentation.

Customizable

While Docusaurus ships with the key pages and sections you need to get started…

View on GitHub

and I started to think... should this projects have documentations? 🤔
So I think I need to be explained like I'm five documentation...
When should you use it?
Why should you use it?

What I Learned From Hacktoberfest

David Mendoza (He/Him) — Thu, 15 Oct 2020 07:33:00 +0000

What I Learned From Hacktoberfest

I think that the most important thing I learned from this year (is my first time) is that... Repo owners are humans.

Don't get me wrong I had develop for many people, but I think its was my second time pushing to a public repo and the first time it wasn't that humane as this time, mostly because of a really rush to get the issue I was fixing 😅.

The owners where polite, even one guy said that my code was the cleanest and legible he reviewed that day.

So the thing to take away from my post is...
Try it... you will find a kind enough repo to continue doing issues for them ❤️.

Repos I pushed to:

Python-World / Python_and_the_Web

Build Bots, Scrape a website or use an API to solve a problem.

Python🐍and_the_Web

Scripts/Programs in python that scrape the web, create a bot or use an API to solve a problem. We now have a section for miscellaneous scripts/programs as well.

Note: 100 Ideas implemented using python🐍: python-mini-projects

How to Contribute?

Take a look at the Existing Issues or create your own Issues!
Wait for the Issue to be assigned to you after which you can start working on it.
Fork the Repo and create a branch for any Issue that you are working upon.
Read the Code of Conduct
Create a Pull Request which will be promptly reviewed and suggestions would be added to improve it.
Add Screenshots to help us know what this Script is all about.
Having difficulty in contributing? Read the Contribution Guide for a detailed explanation.

README Template for the scripts

README Template

Connect with us On Social media

Join WhatsApp group

Stargazers Over Time!

Thank…

View on GitHub

Abhishek627 / Python

Contains Helper code in python

Contains helper codes.

View on GitHub

amritansh22 / Data-Structures-and-Algorithms-in-cpp

This repository is in development phase and will soon provide you with c++ code of various data structures and algorithms

Data-Structures-and-Algorithms-in-cpp

This is very good piece of coding. This repository is in development phase and will soon provide you with c++ code of various data structures and algorithms

Who can contribute

Anyone can contribute to this repositry.

Contribution Guide

How to contribute

Fork this repository
Pick up an algortihm
Write your code
Create a pull request
Star the repository to show your support

Instructions

Create a folder for the topic you wish to contribute in and add the respective files in that particular folder. If a folder for a particular Data Structure or Algorithm exists. Add your codes in that folder itself. If a folder already exists, add your codes to it.

Additional Notes

Code should be properly commented so as to ensure it's readability.
If you've added code that should be tested, add tests as comments.
Make sure your code is properly formatted.

View on GitHub

collectivecloudperu / modo_oscuro_claro_mantener_modo_seleccionado

Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)

Este proyecto forma parte de nuestro tutorial Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas) y te invito a realizar contribuciones a este proyecto, no importa a que proyecto contribuyas ya que al menos ganarás un lindo polo y si haces geniales contribuciones, podrás ganar mejores premios, hay 3 contribuciones que estamos solicitando a este proyecto.

Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)

Post: https://blog.nubecolectiva.com/como-crear-el-efecto-modo-oscuro-claro-en-un-sitio-web-mantener-el-modo-seleccionado-en-las-demas-paginas/

View on GitHub

How to build a simple SDK on TypeScript

David Mendoza (He/Him) — Tue, 11 Aug 2020 15:12:47 +0000

Hey guys, it's been a while since I wrote a tutorial but this one is something I'm actually working on, so I decided to share with you what I learned ❤️.

BTW we are building a small wrapper for Pokeapi

what we will do

Start a node project
Install our dependencies
Setup eslint & prettier
Setup our package.json
Start coding
Setup small project for testing
Let's Publish

Start a node project

So I will assume you at least know how to do this, but if not you have a picture down here:

You just need an empty folder and run the next command on it



npm init -y

Now I did some changes to my package.json (keywords, author, repo and version) you don't need to make this changes, but take a look at them if you will like to.



{
  "name": "pokeapi",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {

  },
  "keywords": [
    "pokemon",
    "api",
    "sdk",
    "typescript",
    "tutorial"
  ],
  "author": "David M.",
  "license": "GPLv3"
}

You will notice scripts is empty 👀 we will fill it later

Install our dependencies

Now we will install one of our dev dependencies



npm install -D typescript

great! now we need another file on our folder root, it's called "tsconfig.json" you can copy the one that I used (below here) or you can generate it with the next command.



./node_modules/.bin/tsc --init

If you decided for this approach just make sure to adjust the declaration and outDir options according to the JSON bellow.

Setting the declaration attribute to true ensures that the compiler generates the respective TypeScript definitions files aside of compiling the TypeScript files to JavaScript files. The outDir parameter defines the output directory as the dist folder.

or just use mine ¯\_(ツ)_/¯



{
  "compilerOptions": {
    "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true, /* Enable all strict type-checking options. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "skipLibCheck": true, /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
    "declaration": true,
    "outDir": "./dist",
  }
}

once we have this setup we will need to add some dependencies (this ones may not apply for your sdk)



npm install -S axios

now we are over with our dependencies... for now 👀

Setup eslint and prettier

Eslint

I think this part it's actually the shortest so let's start
you will need to run the next command:



npx eslint --init

Now... I recommend the next answers for the eslint init

Prettier

You need to run the next command



npm install -D prettier eslint-config-prettier eslint-plugin-prettier

After you have all that installed change the content of your .eslintrc.json with this



{
    "env": {
        "es6": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {}
}

and add the file .prettierrc.json with this inside



{
    "printWidth": 100,
    "tabWidth": 2,
    "singleQuote": true,
    "jsxBracketSameLine": true,
    "trailingComma": "es5"
}

Setup our package.json

now that we finally have all the development setup ready we need to modify a bit our package.json so it know it's a TypeScript project



{
  "name": "pokeapi",
  "version": "0.1.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "npm run build",
    "build": "tsc"
  },
  "keywords": [
    "pokemon",
    "api",
    "sdk",
    "typescript",
    "tutorial"
  ],
  "author": "David M.",
  "license": "GPLv3",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.0",
    "@typescript-eslint/parser": "^3.9.0",
    "eslint": "^7.6.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.0.5",
    "typescript": "^3.9.7"
  },
  "dependencies": {
    "axios": "^0.19.2"
  }
}

If you notice, all that we changed is the scripts and added some settings main and types,
remember if you change your outputdir on tsconfig.json change it on your package.json.

Start coding

FINALLY
Let's make a new file called index.ts (on our root)
this is where our SDK will leave, we obviously and separate it on different files and import them but my example is short and simple so I will use the same file for all of it.

First we will import everything



import axios from 'axios';

Let's add some variables we will need



import axios from 'axios';

const API_URL: string = 'https://pokeapi.co/api/v2';

perfect! now that we have "all" setup lets start by adding our first sdk method (getPokemonById)



import axios from 'axios';

const API_URL: string = 'https://pokeapi.co/api/v2';

export function getPokemonById(id: number): Promise<object> {
  return new Promise((resolve, reject) => {
    axios
      .get(`${API_URL}/pokemon/${id}`)
      .then((resp) => {
        resolve(resp.data);
      })
      .catch(reject);
  });
}

export default { getPokemonById };

Finally our code should look something like this, notice that we export our function and as an export default we use "all of our functions" I will add another function so we can have a better idea of multiple functions working from the sdk. It should look like this...



import axios from 'axios';

const API_URL: string = 'https://pokeapi.co/api/v2';

export function getPokemonById(id: number): Promise<object> {
  return new Promise((resolve, reject) => {
    axios
      .get(`${API_URL}/pokemon/${id}`)
      .then((resp) => {
        resolve(resp.data);
      })
      .catch(reject);
  });
}

export function getPokemonTypeById(id: number): Promise<object> {
  return new Promise((resolve, reject) => {
    axios
      .get(`${API_URL}/type/${id}`)
      .then((resp) => {
        resolve(resp.data);
      })
      .catch(reject);
  });
}

export default { getPokemonById, getPokemonTypeById };

Setup small project for testing

Now that we have a really bare bones version of our SDK we will try to use it, but first we should build it!
for simplicity we will make a new node project inside our project like so...



npm run build
mkdir testing
cd testing
npm init -y
npm install ..

now this should make our new project ready to make import our sdk and running it.

my test looked a little like this



const pokeapi = require('pokeapi');

pokeapi.getPokemonById(1).then((pokemon) => {
  console.log(pokemon.name);
});
// it should say "bulbasaur"

Let's Publish

Great to know that you made it until here ❤️
lets start right away!
we will need a new file called .npmignore where we will add all the folders we don't want our sdk to bring with itself like our "testing" folder
it should look like this



testing/

and that should be all for your code ❤️
now the last part is to have an account on Npm do the next commands



npm login #do all the steps necessary
npm publish

and your sdk should be ready to be installed in any other node projects.

Here's some links that you might want:
Npm
Repo

I hope this quick tutorial really helped someone, because I wasn't lucky enough to find one as explicit as this one haha.

Every tech you have ever worked on

David Mendoza (He/Him) — Sun, 09 Aug 2020 05:26:12 +0000

If the "skills" section on your resume said every tech you have ever worked on, how would it look?

Mine would look a little like this (3 years in college)

Java
C/C++
Lua
Awt Java
SFML
SDL2
PHP
Expo
React
React native
vuejs
Angular
Firebase
Mongodb
Mariadb
Redis
Javascript
Node
python
typescript
prolog
ruby

Last video game you finished

David Mendoza (He/Him) — Mon, 08 Jun 2020 05:56:08 +0000

Hey guys, just wanted to know a bit more of you.

So I wanted to asked you, what was the last video game you finished, the last video game I actually finished was "the last of us" as you can see I stopped playing games with story years ago 😂

I love Stardew Valley, Animal Crossing but I don't think they have an actual ending 😅

But come on, let me know what have you played!

btw if you have any 2d indie you like let me know!

Name the last book you read.

David Mendoza (He/Him) — Thu, 16 Apr 2020 17:44:18 +0000

The last book I read was:
discrete mathematics johnsonbaugh 6th editon.

jokes aside, last book a read complete was "Perks of being a wallflower"
I loved it...

Explain to me git rebase

David Mendoza (He/Him) — Mon, 24 Feb 2020 00:33:01 +0000

Hey guys, today I'm the one trying to learn, so I want to see if anybody can explain to me, what is git rebase, and how to use it.

How to actually upload a project to Github

David Mendoza (He/Him) — Sat, 18 Jan 2020 19:11:37 +0000

Hello guys, its me again I just wanted to make this quick "tutorial" for something actually quite simple but most people doesn't get it the first time they try to do it.

What's the problem?

Actually the problem is really inoffensive but its a personal for me haha,
but basically it looks like this:

RepoName/Skeleton-Engine
├── assets/
├── bin/
├── include/
├── lib/
├── LICENSE
├── Makefile
├── README.md
├── scripts/
└── src/

I dont know what you think when you see a repo like this, but I actually hate it... So what its the "best way" to upload your code, well its quite simple.

How to solve the problem

your repo should look, like this.


├── assets/
├── bin/
├── include/
├── lib/
├── LICENSE
├── Makefile
├── README.md
├── scripts/
└── src/

for this tutorial you will already have atleast a part of your project.

This is each command you will need (in your project's root)

git init
git commit -m "first commit"
git remote add origin <repo-url>
git push -u origin maste

if you do this commands in order, you should have your repo looking really good for any one who might want to help you out.

Oh and remember if you would like to have people helping, then you should have a README, so take a look at this post

How I write a README.md for my Github projects

David Mendoza (He/Him) ・ Jan 10 '20 ・ 1 min read

#codenewbie #github #showdev #beginners

if you have any question please go ahead and ask on the comments, I will answer as fast as I can!

How to write a good makefile for C++

David Mendoza (He/Him) — Sun, 12 Jan 2020 01:28:52 +0000

Hello guys, its me again today I'm going to show you how to write a good makefile for a c++ project that you might have.

What's a makefile

Just if you didn't knew I want to explain it, Basically a makefile its an easier way to compile our code, let me be clear It's not language exclusive you can use it on c++ just as you can use it in python, but most people use them on low level programming languages.

How is it going to help me

Lets say that you have a big project, maybe 10 or 20 classes and you main file, so what's the compile line going to look like



g++ -Wall -Wextra -std=c++17 -ggdb -Iinclude -Llib src/AssetManager.cpp src/Game.cpp src/InputManager.cpp src/SplashState.cpp src/StateMachine.cpp src/GameState.cpp src/main.cpp -o bin/main -lsfml-graphics -lsfml-audio -lsfml-window -lsfml-system -llua53 -ldl

So this is the compile line for my Skeleton engine project.

mendoza / skeleton-engine

Small game engine or at least its skeleton

Skeleton Engine 💀 made with ❤️, and mostly 🍺

Description

Small game engine framework , made with just 3 dependencies.

SDL Repo
Lua54 Repo
Sol3 Repo

Motivation

Just for fun and learning

Installation

git clone https://github.com/mendoza/skeleton-engine
cd skeleton-engine
mkdir build
cd build
cmake .. 
# For windows: cmake -G "MinGW Makefiles" ..
make
# For Windows: mingw32-make
./skeleton

Bugs 🐛

This project is getting upgrades in my free time if there is a problem please create a bug report in the issues section.

License

Licensed under GNU GPLv3

View on GitHub

But as you can see its pretty long...
So imagine writing that every time you need to compile (lets say that terminals don't store last commands hahaha)

What do I do then?

you create a makefile on your project's root, here is a example



touch makefile

so now your directory looks like this



.
├── bin/
├── include/
├── lib/
├── makefile
└── src/

I strongly recommend this "layout", you will place all .h or .hpp in your include directory, and your .cpp in your src directory, and precompiled libraries (.a, or .out) are going in your lib directory.



CXX       := g++
CXX_FLAGS := -Wall -Wextra -std=c++17 -ggdb

BIN     := bin
SRC     := src
INCLUDE := include
LIB     := lib
LIBRARIES   := 
EXECUTABLE  := main


all: $(BIN)/$(EXECUTABLE)

run: clean all
    clear
    @echo "🚀 Executing..."
    ./$(BIN)/$(EXECUTABLE)

$(BIN)/$(EXECUTABLE): $(SRC)/*.cpp
    @echo "🚧 Building..."
    $(CXX) $(CXX_FLAGS) -I$(INCLUDE) -L$(LIB) $^ -o $@ $(LIBRARIES)

clean:
    @echo "🧹 Clearing..."
    -rm $(BIN)/*

What's all wizary your are seeing? well lets go step by step.

CXX Its the "program" you are using for compiling (g++ in my case)
CXX_FLAGS Its the flags for your compiling program
BIN this is where your binary file is going to be placed
SRC As I told you this is where all your .cpp are going to be
INCLUDE Of course this is all your .hpp or .h file are going to be
LIB As I said is where your precompiled files are going to be
LIBRARIES This are the libraries flags for g++
EXECUTABLE Its just the name of your binary file
all It the "recipe" your makefile will call if you just call make on your terminal
run It compiles your code and makes it run
$(BIN)/$(EXECUTABLE) this one just compiles the code
clean it cleans all your binary files.

If you need any help defining any recipe for your makefile let me know! I will be glad to help you out on anything.

Now that I have everything setup what do I do?

Its really simple, look at this,

to compile your code you call this in your terminal



make

and to compile it and run it, you call this in your terminal



make run

And that's all really, go ahead and try it!

if you got any problem leave me a comment and I will help you out

How I set my Linux computer for coding

David Mendoza (He/Him) — Fri, 10 Jan 2020 22:38:57 +0000

Hello guys, it's me again today I'm going to show you what's my setup for a Linux machine take in mind I'm not talking about a RPI or a server, I'm talking about a full flesh developer's pc, for this example I'm using a computer with ubuntu 19.10 installed.

Most of this are just small lists so you know what they are, and I will add a command or two while write them (Most how to install them)

Packages

Here you will see some programs that they are easily installed with apt, that is why i decided to separate packages and software.

build-essentials

If you didn't knew, build-essentials is literally what it says, the essentials to build a lot of software, mostly I use it to install g++ and gcc, c++ and c compiles and make, software used to make a compilation more human.



sudo apt install build-essential

python3 and pip3

When i finnished my programming course on college, the first thing I tried to learn was python (I did good i think), and looking that python2 is getting deprecated this year, why not python3? Mostly I use it when I'm trying to learn ML and Django (never quite understood Django)



sudo apt install python3 python3-pip

Node.js and npm

I mean... come on? node.js and npm are like the heart of tons of projects now a day, with web development trying to replace software development, I use this two for most of my web projects.



sudo apt install nodejs npm

Expo

I use expo for quick and dirty react native apps, for me is the best absolutely, you should give it a try if your pc isn't really powerful but you want to make apps.



sudo npm install -g expo-cli

CRA (create-react-app)

I Know its not the best, but it makes the cut plus is kind of fast, but I use it to make my react project templates



sudo npm install -g create-react-app

Git

I don't even know why i left this for the last... I mean... git man, is like the most used command I have on my pc, I dont even need to let you know what i use it for.



sudo apt install git

Vim

I like to experiment with server and stuff, and most of the times they have a "sudo protected" file and I need to edit it, so I just use vim, it can be a B!tch but I like it.



sudo apt install vim

Fonts

If you are new to coding, you might be thinking "WHY THE F!@K do I need a font for?"
Well let tell you that fonts are really important, you wouldn't like stare at a ugly font for 5+ hours right?

Fira code

So give fira code a chance, here is the GitHub page, since it depends on every OS, how to install them.
Fira Code

Edit
A good friend of mine did this tutorial

Installing FiraCode on Windows and Ubuntu

Josué Rodríguez (He/Him) ・ Jan 13 '20

#firacode #fonts #windows #ubuntu

Software

VS code

I use vs code as my main code editor,I think I don't need to elaborate. I installed it from the Official Site

Thunder bird

I use thunder bird obviously for my emails, It was my first email app, and its still going, you can actually install this one with a command.



sudo apt-get install thunderbird

Random programs I use (You might like one)

Popcorn Time - I Love watching movies (not while coding though...)
Transmission - Illegal stuff you know... movies hahaha.
Gimp - Simple to use image editor.
Libresprite - Ok so this one my first program compiled by myself, let me know if you would like to learn to do so.

So this was my first actual "long" post, if you liked it please let me know. That way I might Start making more "long" posts

How I write a README.md for my Github projects

David Mendoza (He/Him) — Fri, 10 Jan 2020 06:49:33 +0000

Hello guys, once again I'm here with a small tutorial for you guys new on the business. Even though my repos have never got a lot of attention, I like that they have a good readme.

Knowing that lets just go to the point.

Before publish your own README

let me tell you what you need to change, you will see that they are some and . well that's where you will change to your Github user and to your Github repo name.

Plus you will see some quick explanation saying what you should put there, they are marked with this [ ].

With nothing else to say, take a look.