DEV Community: Otoniel Reyes

No more to-do lists please

Otoniel Reyes — Wed, 05 Jan 2022 21:56:06 +0000

We need to start creating real coding projects right now.

Everybody knows we, in some random moment got stuck, especially when you really want to build something cool, memorable, useful, the next big thing, but have no idea on what the freaking hell you can do.

This happens to me more than I really want to admit. It’s kind of disappointing to have the knowledge, have the tools, but don’t know what to do or where to go.

Clock’s clicking around and time’s running, but you are still stuck in what app should I create, or sometimes you already have the idea, but can’t figure out how to implement that idea.

Today, I want to share with you some of my experiences on this topic.

Many years ago, I got stuck. In simple terms, I’d be starting to learn python and wanted some ideas to program, and get better at coding. I decided to open up Google Chrome and type ‘coding projects ideas’ and hit enter. Around 10 minutes later, found a post in a forum about ‘Beginner project ideas’, and were not that bad, actually, I liked it.

So, I just copied-and-pasted in a blank text file and dropped it on my desktop, and start building all those one by one. A week later, every ‘project’ was finished.

Next, I just decide to try again the same thing, and guess what, The other projects I found were almost exactly the same, just a dirty copy of the book where the first group of projects was extracted from.

Several days have passed, and all the ‘project ideas’ I see are the same, that’s why I’m writing this right now. We need to address a difference, be creative, create real and useful software we feel proud of.

To reach my point, I want to say this:

It’s the perfect time to stop doing the same shitty apps and start creating awesome masterpieces of software.

Meaningful Coding Projects over just Coding Projects

Otoniel Reyes — Wed, 05 Jan 2022 21:22:41 +0000

What I think coding projects should be like.

Being an all-in-one freelancer software developer isn’t a wonderful career at all, I can relate.

I spent most of my time ‘working’ on projects, not just coding. As a solo team, I have to reach clients, quote, research, plan, design, test, code, sell, deploy and collect feedback on most projects.

Figure this out: A local client ask me to build a full pawn shop management system from scratch months ago, and my answer was: ‘Sure’, let’s do it!

Confession: “I feel regret after a half week”.

Now it’s finished, and I’m proud of it, but that’s not the point.

After finishing the project, I started thinking about several small-sized projects I made just to have something to show when somebody asked for a portfolio. That thought, was as good as a worm to a fresh apple.

I got frozen in the small projects building area, and built a giant list on ‘things to build someday’. A few days ago, I just realized that isn’t the best I can do in life. And then decided to go to my GitHub profile and clean it up.

The projects I’m talking about, were surprisingly useless. You know, countless To-do apps in many programming languages/frameworks, simple API things, hello worlds, many projects I made in courses or reading books, even shitty code made to apply to a coding boot camp program called Microverse, and numerous, I mean, lots of blank projects, templates and prototypes for myself.

I was completely amazed and realized that many of them should be erased from the internet urgently.

Don’t get me wrong, I really learned from those projects, not much, sincerely, but learned something each one; and here’s the crucial thing: wouldn’t be better if I’d preferred to work on real-life useful projects?

I’m disappointed by how I wasted my time working on those things. Thanks to that, my GitHub account had 110+ repos and now, after a deep cleaning, there are just 3.

Those are BTGen, a template generator, the first NPM package I published; Frontsite, a Ruby on Rails engine that generate a bunch of pages every one use almost every time that build and app, the first ruby gem I release.; and the kenliten repo, which is just to show a customized view page in my profile.

Yesterday, I took some time to get this done, and today I want to take a time to think about, and explain in plain English, why did I commit this.

I decided to stop creating useless pieces of software that nobody will use in life, and start creating really useful that community will love and people can use in a daily basis.

And here I am. Next thing to do is find an idea, some missing feature or software people need.

Any idea?

Create a Password Generator with GTK and JavaScript

Otoniel Reyes — Mon, 07 Jun 2021 05:20:42 +0000

State 0: The Setup

To follow up this tutorial, you'll need this:
[ ] A text editor
[ ] GTK
[ ] glade, and
[ ] Gjs

Stage 1: The Algorithm

We're going to use a pretty simple algorithm to generate passwords based in some character collections group by type.

First, let's create the collections:

lowerCase = 'qwertyuiopasdfghjklzxcvbnm'.split('');
upperCase = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('');
numbers = '1234567890'.split('');
specialSymbols = `!@#$%^&*-_+=`.split('');
ambiguousSymbols = `{}[]()/\\'"?,.:;~\`|<>`.split('');

Note I'm creating arrays from the strings since it's quicker that way.

Now, lets move to our main problem: Generate a Password.

function generate(
    length = 16, 
    useLower = true, 
    useUpper = true, 
    useNumbers = true, 
    useSpecials = false, 
    useAmbiguous = false
    ) {

    const source = [];
    const password = [];

    if (useLower) {
        source.push(...lowerCase);
    }
    if (useUpper) {
        source.push(...upperCase);
    }
    if (useNumbers) {
        source.push(...numbers);
    }
    if (useSpecials) {
        source.push(...specialSymbols);
    }
    if (useAmbiguous) {
        source.push(...ambiguousSymbols);
    }

    for (let i = 0; i < length; i++) {
        const char = source[Math.floor(Math.random() * (source.length - 1))];
        password.push(char);
    }

    return password.join('');
}

Done! Yeah! That's it!

You can test the generator in this codepen.

Stage 2: The GUI

Now, that we have a working logic for our little tool, let's create the GUI with glade.

Start creating a window and set an ID to it, mine is MainWindow:

Add a GtkBox and set the following properties:
Orientation: Vertical
Spacing: 0
Baseline: Center
Homogeneous => on
Number of items: 3

Add a GtkHeaderBar and set it up like this: (General)
Title: Password Generator
Reserve space for subtitle => off
Spacing: 6
Number of items: 0 (Packing)
Position: 0
Padding: 0
Fill => on
Expand => on
Pack type: Start

A GtkGrid for some checkboxes:

General Properties:

Packing Properties:

Another GtkBox at the bottom:

Packing Properties:

Add, customize 5 GtkCheckButton and give a unique ID to each one:

Mine have those ID's:

lowerCaseCheck
upperCaseCheck
numbersCheck
specialSymbolsCheck
ambiguousCharsCheck

Add a GtkLabel and a GtkEntry inside a GtkBox:

Add A GtkButton to call the password generator:

Two more GtkLabel to show the generated password:

Leave the second one without text and make it selectable to allow user to copy the password. Don't forget to assign it an ID, in my case is 'generatedPasswordLabel'.

Now just save your new GUI in the project folder. You can save it as a .ui or a .glade file. Any way remember to call it exactly as it is. In my case is mainWindow.ui

Stage 3: Wrapping it up

Ok! Now all we need to do is make this two things work together.

Import the Gtk functions. Create a new file and save it with this content as main.js.

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0';
const Gtk = imports.gi.Gtk;

Here the first line tells the interpreter we want to use to run this program, Gjs.
Next we ensure we are working with GTK+ v3.0 and import it as Gtk.

Using OOP Now is time to add our logic, you can work this with a functional programming workflow, but we're going to use a OOP approach:

class PasswordGenerator {
  constructor() {
    this.app = new Gtk.Application();
    this.app.connect('activate', this._onActivate.bind(this));
    this.app.connect('startup', this._onStartup.bind(this));
  }

  _onActivate() {
    this._window.show_all();
  }

  _onStartup() {
    const builder = new Gtk.Builder();
    builder.add_from_file('mainWindow.ui');
    this._window = builder.get_object('mainWindow');
    this.app.add_window(this._window);
  }
}

const generator = new PasswordGenerator();

generator.app.run(ARGV);

If you run this, you're going to see your previously designed GUI, but no actions except quit.

Ok, But... What's going on here?
Well, here, we create a Gtk Application in the class constructor, and connect two events, (activate, and startup) to our methods, _onActivate and _onStartup.

Inside _onStartup we just show up our GUI.
Inside _onActivate we create a builder object, so we can just 'require' our .ui file to charge the GUI. Then we get the UI from the file and save it to a property: _window. Lastly, we add the window to the app. This method will be called before _onStartup, so _window will be set just before be used.

Linking the Widgets.

Now, we're going to load all the other widgets we neet to collect the info to generate a password.

Let's modify the constructor and the _onActivate methods:

constructor() {
  this.app = new Gtk.Application();
  this.app.connect('activate', this._onActivate.bind(this));
  this.app.connect('startup', this._onStartup.bind(this));
  this._lowerCase = 'qwertyuiopasdfghjklzxcvbnm'.split('');
  this._upperCase = 'QWERTYUIOPASDFGHJKLZXCVBNM'.split('');
  this._numbers = '1234567890'.split('');
  this._specialSymbols = `!@#$%^&*-_+=`.split('');
  this._ambiguousSymbols = `{}[]()/\\'"?,.:;~\`|<>`.split('');
}

_onStartup() {
  const builder = new Gtk.Builder();
  builder.add_from_file('mainWindow.ui');
  this._window = builder.get_object('mainWindow');
  this._generateButton = builder.get_object('generateButton');
  this._generateButton.connect('clicked', this._generatePassword.bind(this));
  this._lowerCaseCheck = builder.get_object('lowerCaseCheck');
  this._upperCaseCheck = builder.get_object('upperCaseCheck');
  this._numbersCheck = builder.get_object('numbersCheck');
  this._specialSymbolsCheck = builder.get_object('specialSymbolsCheck');
  this._ambiguousCharsCheck = builder.get_object('ambiguousCharsCheck');
  this._passwordLengthEntry = builder.get_object('passwordLengthEntry');
  this._generatedPasswordLabel = builder.get_object('generatedPasswordLabel');
  this.app.add_window(this._window);
}

Add the logic:

Now, all we need to do is add a new version of our generator:

_generatePassword() {
  const source = [];
  const password = [];
  const length = +this._passwordLengthEntry.text;

  if (this._lowerCaseCheck.active) {
    source.push(...this._lowerCase);
  }
  if (this._upperCaseCheck.active) {
    source.push(...this._upperCase);
  }
  if (this._numbersCheck.active) {
    source.push(...this._numbers);
  }
  if (this._specialSymbolsCheck.active) {
    source.push(...this._specialSymbols);
  }
  if (this._ambiguousCharsCheck.active) {
    source.push(...this._ambiguousSymbols);
  }

  for (let i = 0; i < length; i++) {
    const char = source[Math.floor(Math.random() * (source.length - 1))];
    password.push(char);
  }

  this._generatedPasswordLabel.label = password.join('');
}

DONE!

Go to your terminal and run this:

chmod +x ./main.js # this make the file executable
./main.js # this executes the program

Resources

Here is the full project, including a .desktop file and a simple icon. Check it out.

Express 10 Days guide | Day 2 - HTTP Methods & Middleware Functions

Otoniel Reyes — Tue, 19 Jan 2021 11:18:36 +0000

Day 2: HTTP Methods & Middleware Functions

Introduction

I'm sure these are two of the most important members to build an express application. Let's start digging on middleware functions.

Middleware Functions

Middleware functions are simple JavaScript functions that will be invoked as callbacks by our application. A middleware function can accept up to three parameters: a request object, a response object and the express' next method.

In the last guide I wrote all middleware functions using both three but just use 2 of them. Now is time to explore them.

req

The first object express pass through our middleware is a request object. This contains useful properties and methods about the performed request, like the sent parameters, the request's body, etc.

To access all this info, you just need to call it as any object properties:

function(req, res, next) {
  console.log(req.body);
  console.log(req.params);
  next();
}

res

The next one is the response object, very helpful too. The response object is what we use to send responses back to the client.

Until now, we know the respose's send method, other methods are json, and download, which we'll see in future guides.

An example here:

function(req, res, next) {
  res.json([{name: 'John', lastName: 'Doe'}])
}

Maybe the simplest to understand is the next method. This is used to go forward in the express life cycle.

An Express application follow a fixed life cycle structure, from start to finish. What we say when we execute the next method inside a middleware function is, "we're done here, go to the next section". Then Express look for another middleware function to execute.

Maybe right now you cannot see the importance of this method, but, in the 4th guide we'll build some middleware, and then you'll see how to use it properly.

HTTP methods

All HTTP methods have an implementation in express, so, we can teach our application how to work with each type of request and data we receive from the client, how to process it and how to send back a proper response.

When we build a web server, we can restrict some URL, ask for a token to grant access to it or just watch a specific HTTP request to send a message or anything. Let's see this:

app.get('/', function(req, res, next) {}) // this looks for a GET request
app.post('/', function(req, res, next) {}) // this looks for a POST request
app.put('/', function(req, res, next) {}) // this will look for a PUT request
app.patch('/', function(req, res, next) {}) // this will look for a PATCH request
app.delete('/', function(req, res, next) {}) // and this one will look for a DELETE request

With all these, our application is now capable of response to all those methods, now all we have to do is to process the proper response and send it back.

Coming next

In the next guide we're going to build our first API to practice all we already know and will add some extra express features to our app.

Something missed?

If you think there is something important that I don't talked about here, or have recommendations, just leave a message down below.

Express 10 Days guide | Day 1 - Environment Setup & First Application

Otoniel Reyes — Mon, 11 Jan 2021 00:09:02 +0000

Day 1: Getting Started

Assumptions:

For this guide I suppose you're already familiar with JavaScript and some ES6 features, as well as some basic terminal commands (cd, ls, rm, mkdir, touch, echo).

Environment Setup

In order to develop express applications you'll need some things to get started, maybe you already have two or three of them.

A project folder

Go to a place you feel good with and create a new folder to save all your work. This folder's name can be 'workspace', 'projects', 'express-learning' or whatever you want to.

A JavaScript Runtime (Node JS) & a Package Manager (NPM)

Node JS is the way we'll run JavaScript code in our computer and NPM is something like the tool we use to copy code from others and put it into our own app (yes I know, is an interesting point of view).

Simply go to the download page, download the package for your operating system or install it from your terminal (Linux users) by using your distro's package manager sources.

Verify the installation with:

$ npm -v

And

$ node -v

Text Editor

What editor I recommend?
Simple... AYL (Anyone you like).

Don't waste time in the 'best code editor', just take one and use it, if it doesn't make you feel comfortable writing code after one or two weeks, change it and repeat it.

Here is my little list of code editors, based in my own preferences.

A Web Browser

Recommendations:

API testing tool

I've been using GetIt for a while, and I'm very happy with it, but Postman is good too.

Your first app

Initial Setup

Go to your project folder
Create a new folder inside and name it hello-express
- This name is just an example, you can name it however you want to
Open the current directory in your terminal
- Use cd to navigate
exec npm init -y and npm install express --save
- Those commands will initialize a new project (generate a package.json file with the data about our application) and save the framework source code for us, respectively.
Create an app.js file inside
- This is the file that will hold all application's code

Finishing the project setup

Open package.json in your code editor
Delete the line "main": "index.js",
Change the line "test": "echo \"Error: no test specified\" && exit 1" for "start": "node app.js"
- This tells npm what we want it to do when we use the 'start' script, in this case, open app.js with node

Adding code

In your app.js file write this code:

const express = require('express');
const app = express();

app.get('/', (req, res, next) {
  res.send('Hello Express');
});

app.listen(3000, () => {
  console.log('Application listening on port 3000');
});

We're done!

Running the application

Go to the terminal again and (being in the same directory) exec npm start.

Open localhost:3000 in your browser and you'll see Hello Express in the rendered page.

Now, lets dive in.

What did I build?

express

In your app you have required express, the application's 'core'.

The first thing we do is to assign app to express(), this creates our app main object with all express methods.

Then we tell our app that it have to handle a get request in the root route ('/') and return the message 'Hello Express' using the method send() which is in the res parameter.

We can use app.get to match a get type request in the route we pass as the first parameter, for example, can be '/' (the root), '/home' or '/blog'.

Lastly we tell the app to listen on port 3000 for connections and once is ready to accept them put in the console the message 'Application listening on port 3000'.

Note we have three parameters in the app.get callback, those are the request made by your browser (req), the response from the server (res), and finally, the next parameter is a special function we'll cover in the next guide.

We'll review more in depth these and several more methods in the future.

Now you know the basic use of app.get so, this is today's homework:

Create a new express app
Match these routes '/', '/home', '/blog', '/services', and '/contact'.
Send a message with this content:
- A greeting like 'Hello' or 'Hey!'
- Route's name as 'You are in the XXXXX route', replacing the 'XXXXX' with route's name

Summary

Today you:

Create a development environment for express
Create an empty project with npm init
Create a simple express app
Learn how to match get requests from clients
Started the app using npm start

Tomorrow's guide preview:

In the next guide you'll learn:

'req', 'res', and 'next'
'GET', 'POST', 'PUT', 'PATCH', and 'DELETE' methods

Any suggestions?

Introducing BTGen, your new best friend

Otoniel Reyes — Sun, 11 Oct 2020 07:11:15 +0000

Stage 1: The problem

I'm sure you are spending a lot of time setting up your projects, right?

Just, think about it...
You just go to your projects folder, create a new one (the project root folder) within, open the project folder, create the .html, .css, .js, and this is just in the simplest cases.

And the next thing to do is open each file and add all the code you'll need.

Now, in a little project, this takes just a few minutes (2~5), but, what about those projects with dependencies, libraries, a framework, and that kind of stuff?

Stage 2: A simple idea

What if we take the express-generator concept and get it higher, just one tool, for all (ok, maybe just some) web development environments and projects?

Stage 3: A simple solution: BTGen

BTGen is a "BoilerplaTe Generator", (I know, it's an incredibly creative name) for web development.

Imagine this:
You're going to start a new AngularJS project, and need an structure like this:

myApp/
  css/
    vendor/
      bootstrap.min.css
    master.css
  js/
    vendor/
      angular.min.js
      bootstrap.min.js
      jquery-3.5.1.slim.min.js
      popper.min.js
    app.js
    MainController.js
  index.html

So, you have three options:

Manual
- Download bootstrap, popper, jquery, and angular (2~3 mins)
- Create each file/folder manually (1~3 mins)
- Start coding
CDN
- Create folders/files manually (1~3 mins)
- Search and copy/paste each CDN link (1~2 mins)
- Start coding
BTGen
- $ btgen angular myApp --bt (0~1 min)
- Start coding

Stage 4: The difference

You already know all about starting the project manually... Let's talk about BTGen.

BTGen will create/download all files you'll need to start coding, even package.json if it is needed, in some cases with sample code, scripts and recommendations, all in just a few seconds!

All boilerplates are customizable (at least a little bit) and, right now, you have just 8 boilerplates to choose from, but, with your help, we can have many more templates available soon.

Stage 5: The clousure

It deserve a try, is very light-weight and have not dependencies, and all you need to do in order to get starter is type this in your terminal:

$ npm i -g btgen

And here is the official documentation.

Please, let me know what do you think about my tool and how can I improve it.

Thank you!