web development on luis angel ortega

Dropdowns and Toggles with Pure CSS

hey@luisangel.me (Luis Angel Ortega) — Sat, 05 Nov 2022 11:53:11 -0500

We could imagine the technologies of the platform on which I work, Build It, as a dish; where Ruby on Rails is our main dish but is accompanied by a good portion of JavaScript through Stimulus JS, and while this brings the functionality and that magical feeling of a single page application (SPA), there are things we want to keep simple instead of using a sledgehammer to kill an ant, as a university professor used to say. Therefore, we decided to take a page from Apple when handling dropdown menus or dropdowns and do it through pure CSS and HTML; without requiring a line of JavaScript.

The Pillars

Our two pillars in the view will be <input> elements of checkbox type and <label> tags. We will form our basic skeleton as follows:

<input id="toggle" type="checkbox"></input>
<label for="toggle"></label>

We will be using the checked property of checkbox-type inputs to control the content we show and when we show it. For this, we will be relying on the <label> element since by linking it through its for property it will also be affected by the class change when the checked property of our checkbox is present.

All our code will really be inside <label> in two sections: container and toggle as shown below.

<input id="toggle" type="checkbox"></input>
<label for="toggle">
 <div class="toggle">
 <!-- The element with which the user will interact -->
 </div>
 <div class="container">
 <!-- What we want to show-->
 </div>
</label>

The Magic

Now that we have our HTML skeleton ready, it’s time to add the CSS that will give our component the magical touch:

#toggle {
 display: none;
}

.container {
 display: none;
}

#toggle:checked + label .container { 
 display: inherit; 
}

Our input with the toggle id will never be shown so that we do not have the checkbox present on our page, what we will show and with which the user interacts is what is inside our div with toggle class. Once they click on our toggle, the input will have the value of checked and with #toggle:checked+label we affect the style of our <label> to obtain a result like the following

And with a little more style (courtesy of Thulio Philipe) we can have results like this

Or as the examples we have inside Build It

A small popover that is always present, giving vital information to the user

Or a filter menu that can be shown easily.

As we can see, modern CSS allows us to make interactive pages without the need for a script for it; giving us a new solution to a problem with endless ways to solve it, so it will be necessary to consider the needs of the project and what is most suitable.

Finally, I leave you a repository with a couple of examples seen in this article for future reference and I invite you to visit the platform and especially my profile, where we can connect for future projects.

Thinking Outside the Box an Online Resume With Docz

hey@luisangel.me (Luis Angel Ortega) — Thu, 21 Oct 2021 15:32:45 -0500

One of the best traits of humankind is its curiosity. It is so human that in honor of it we named a Mars rover “Curiosity” in 2003.

Talking about curiosity in the developer world, open source projects top the list, since by nature they invite us to experiment, modify and share what else we can do with them. This is why I propose to think a little outside the box with Docz - a software documentation tool that is completely open source.

What is Docz?

Docz is a Gatsby-based project that simplifies the process of documenting other projects without worrying about configuration, speed and support.

It provides a library that allows you to write MDX pages instead of HTML or JSX files, handles the routing and provides plugins for all the other needs that you may have. All of this results on projects anyone can contribute to!

Is this simplicity and friendliness that makes Docz a great option for more than just docs.

Creating our Docz project

Before we can jump into Docz, there are some prerequisites that you will need have in order to create the project:

NodeJS
Yarn or npm

Now that you have the prerequisites, let’s start by creating a new React app with create-react-app (CRA)

Go to your terminal and run:

npx create-react-app my-resume

If you don’t have CRA installed, npm will ask you if it’s okay to install create-react-app type y to continue and let CRA create the new project.

We are using the command npx instead of npm since we want to execute a package, not install it to a project. You can read more about it here.

Now lets move to the directory of our project and install Docz.

cd my-resume
yarn add docz # or npm install docz

Then let’s remove everything that CRA created for us inside the src folder, since we don’t need it.

rm src/*

Also, it is a good idea to add to the .gitignore the .docz folder since we only needed for development.

# .gitignore

# Docz generated files
.docz/

Let’s go and create a file named index.mdx and a hello world header in the following way.

<!-- src/index.mdx -->

---
name: Hello World
route: /
---

# Hello world from Docz!

And it’s time to run our development server to see what we have just created.

yarn docz dev # or npm run docz dev

If you get an error ERROR #98123 while trying to run the development server, just delete your yarn.lock or package-json.lock and the node_modules folder and install the dependencies again.

Et voila! We have successfully created our Docz project.

Now is a good time to commit your files!

Your time to shine

Before we start adding more pages, let’s create a configuration file named doczrc.js on the root of our project. This will help us to set some meta tags easily, but it manages all the configuration of our project.

// doczrc.js

export default {
 title: "Luis Angel Ortega",
 description: "Hello, I'm Luis Angel and this is my resume made with Docz!",
 ignore: ["README.md"]
}

The title key will set the suffix for our title tag and it will change the text on the top left corner of our project, since it’s an online resume I recommend using your name in this field.

Then, the description key that we added will modify the meta description tag on our webpage to display it when it’s looked up or shared online.

The last key will tell Docz to ignore some files and don’t display them on the webpage, as is in this case with the README file.

Now let’s add more pages! I’ll add a contact page with my socials and resume one in the following way

<!-- src/contact.mdx -->

---
name: Contact
route: /contact
---

# Contact me! 🗣

---

Let's talk! You can find me on these platforms:

- ✉️ [Email](mailto:hey@luisangelme)
- 🤝 [LinkedIn](https://www.linkedin.com/in/luisangel-ortega)
- 🐙 [GitHub](https://github.com/LinkSake)
- 🐦 [Twitter](https://twitter.com/LinkSake)
- 🌐 [Website](https://luisangel.me)

<!-- src/resume.mdx -->

---
name: Resume
route: /resume
---

# Resume 💼

---

## Work Experience

<details>
 <summary>Software Developer. <a href='growthconstant.co' target='_blank'>Growth Constant</a>, (Mar. 2021 - Currently)</summary>
 <div style={{marginLeft: '1em'}}>
 <li> Full stack developer (Ruby on Rails) and copywriter for the first project of the start-up: <a href='virtualdash.co' target='_blank'>Virtual Dash </a>.</li>
 </div>
</details>

<details>
 <summary>Backend Developer Intern. <a href='facturasamurai.com' target='_blank'>Factura Samurai</a>, (Aug. - Dec. 2020)</summary>
 <div style={{marginLeft: '1em'}}>
 <li> Implemented the user authentication on the Elixir API. </li>
 <li> Learn and developed serverless services (Cloudflare Workers) with TypeScript. </li>
 </div>
</details>

<details>
 <summary>Full Stack Web Developer. <a href='biobot.farm' target='_blank'>biobot.farm</a>, (Aug. 2019 - Jun. 2020)</summary>
 <div style={{marginLeft: '1em'}}>
 <li> Successfully launched a new service (web application) that was developed form scratch while learning React. </li>
 <li> Documented the web application and taught a colleague to mantener said application. </li>
 <li> Improved speed, functionality and readability of a Python API and micro-services. </li>
 </div>
</details>

## Education

<details>
 <summary>Bachelor's Degree in Information Technologies and Telecomunications. <a href='ulsachihuahua.edu.mx/site' target='_blank'>Universidad La Salle Chihuahua</a>, (Aug. 2016 - Dic. 2020)</summary>
 <div style={{marginLeft: '1em'}}>
 <li> Degree on engineering on information and telecommunication with specialization on mobile development. </li>
 <li> Academic exchange semester at La Salle Ramon Llull University (Barcelona, Spain) from January to June 2019 with the Computer Engineering degree. </li>
 </div>
</details>

## Skills

<details>
 <summary> Languages </summary>
 <div style={{marginLeft: '1em'}}>
 <li>Spanish: Native</li>
 <li>English: Advanced (TOFEL ITP: 627)</li>
 </div>
</details>
<details>
<summary> Tech </summary>
 <div style={{marginLeft: '1em'}}>
 <li> <b> Professional level </b> </li>
 <div div style={{marginLeft: '1em'}}>
 <li>JavaScript (Node, React, Next)</li>
 <li>Ruby (Rails)</li>
 <li>SQL (MySQL, PostgreSQL)</li>
 <li>Version manager (Git)</li>
 <li>HTML & CSS</li>
 </div>
 </div>
 <div style={{marginLeft: '1em'}}>
 <li> <b> Novice Level </b> </li>
 <div style={{marginLeft: '1em'}}>
 <li>Python (Bottle)</li>
 <li>Docker</li>
 <li>UNIX</li>
 </div>
 </div>
</details>

## Achivements

- Essential part of the winning team of the following hackathons:
 - Ideacon (2018)
 - Reset (2018)
- Essential part of the 2nd place team of the Blockchain Mobility Hackathon 2019 in Barcelona, Spain.

As you can see, using MDX means that we can use Markdown syntax and JSX in the same document, giving a lot of flexibility and customization to our Docz projects.

At the end they will look something like this:

Spice it! Adding a custom component

Now let’s focus on our index.mdx file. Let’s change it’s title to “About me”

<!-- src/index.mdx -->
---
name: About me
route: /
---

# Hello world from Docz!

And then, create a components folder inside of the src directory. There create a welcome.jsx component, this will replace our Markdown heading to make the root page more interesting.

// src/components/welcome.jsx

import React from 'react'

const Welcome = ( props ) => {

 const style = {
 container: {
 display: 'flex',
 flexDirection: 'column',
 },
 textContainer: {
 textAlign: 'center'
 },
 imgContainer: {
 paddingTop: '1em'
 },
 img: {
 display: 'flex',
 margin: 'auto',
 maxWidth: '40%',
 borderRadius: '50%',
 },
 }

 return (
 <div style={style.container}>
 <div style={style.textContainer}>
 <h1>{props.title}</h1>
 <span>{props.children}</span>
 </div>
 <div style={style.imgContainer}>
 <img style={style.img} src={props.img} alt={props.title}/>
 </div>
 </div>
 )
}

export default Welcome

Here I just made a quick component that takes a title, some text and displays it all centered and the image as a circle, but you can make your creativity go wild on this one!

Next, let’s change index.mdx to import our component and use it to give a warm welcome to all the visitors on our webpage, here is how it looks:

It’s alive! Time to deploy

ow that we have our Docz project it’s time to build it and deploy it to GitHub Pages (since we already have the repository there).

First we need to configure some things, go to your doczrc.js file and add a dest key with the value “/docs” and a base key the name of your repo as it’s value.

// doczrc.js

export default {
 title: "Luis Angel Ortega",
 description: "Hello, I'm Luis Angel and this is my resume made with Docz!",
 ignore: ["README.md"],
 dest: "/docs",
 base: "docz-resume"
}

The first key is telling Docz to build the project into the docs directory, we’re doing this since GitHub Pages expects the static files to be on the root or docs directories.

The base key is changing the base folder to match the name of the repo in order to make the public files and links to work in GitHub Pages.

Once we have everything correctly configured, we need to build the project with the following command:

yarn docz build # or npm run docz build

When it is done, you will see a docs folder on your project. Commit and push everything to your repo. After that, let’s go to the settings tab on your project and in the left menu go to the Pages section.

Then select your main branch (or the branch on which you are working on) and select the docs folder.

And that is it! In a few minutes your website should be live on the link that GitHub has given you.

The future awaits

In this article we only scratched the surface of what Docz is capable of, so be sure to check their documentation to learn more.

I encourage you to read about them to make your resume stand out from the crowd and always remember to support the creators of this amazing project and contribute if you can.

Find the repo of the project here. For end result, check out GitHub.

Docker + Rails: A Solution for Your Headaches

hey@luisangel.me (Luis Angel Ortega) — Thu, 02 Sep 2021 15:15:49 -0500

Have you ever spent a week just trying to run the project you just joined? Or does your application not run in production as it did locally? There are a multitude of factors that can contribute to this, which is why Docker offers us a solution with which we can have greater control over these variables across the necessary computers.

With that said, in this article we will see how to make our lives easier by having our entire Ruby on Rails application running on Docker; including any necessary databases.

Prerequisites

To follow this guide, you will need to have Docker installed as well as a project you want to dockerize. If you just want to practice, you can use this example project which requires a connection to Postgres and Redis to function.

Are you impatient? You can clone this branch of the project where the necessary files to run the project inside Docker are already present!

First Comes the Dockerfile

The first thing we will do is create a custom image for our project, so we will create a file at the root of it called Dockerfile

touch Dockerfile

The first line of our file will define the image we will base on, in this case, it will be the official Ruby image, but we will use the Alpine version to have a lighter image as a result.

FROM ruby:3.0.1-alpine

⚠️ Make sure the Ruby version (ruby:X.X.X-alpine) is the same as in your project, or you will have errors when trying to build the image. You can find the version used by your project in your Gemfile.

Next comes the most difficult part of this Dockerfile, installing the necessary dependencies for the project to function; those shown here are the ones that work for our example project, which include the necessary ones to make a connection with Postgres, but you will have to discover which ones are necessary for your project.

FROM ruby:3.0.1-alpine

RUN apk add --update --no-cache --virtual run-dependencies \
build-base \
postgresql-client \
postgresql-dev \
yarn \
git \
tzdata \
libpq \
&& rm -rf /var/cache/apk/*

You can wait to build the image (docker build .) to check the error printed by Docker, with that you can find out what dependencies are missing 😉

The last line (rm -rf /var/cache/apk/*) deletes the packages of the dependencies we just installed, this will save space in the image.

Next, we need to create a directory inside the container where we can copy the code of our application for its execution, we will do this with the following command inside our Dockerfile.

FROM ruby:3.0.1-alpine

RUN apk add --update --no-cache --virtual run-dependencies \
build-base \
postgresql-client \
postgresql-dev \
yarn \
git \
tzdata \
libpq \
&& rm -rf /var/cache/apk/*

WORKDIR /docker-rails

Remember to change docker-rails to your project name!

Just as we gave your project a home inside the container we will create, the gems of the same need a folder too. Therefore, we will inform bundler where to place them through an environment variable.

FROM ruby:3.0.1-alpine

RUN apk add --update --no-cache --virtual run-dependencies \
build-base \
postgresql-client \
postgresql-dev \
yarn \
git \
tzdata \
libpq \
&& rm -rf /var/cache/apk/*

WORKDIR /docker-rails

ENV BUNDLE_PATH /gems

And although we have already installed the necessary dependencies to run Rails within the container, your project will need some gems and some JavaScript packages to function correctly, we will take care of that as follows.

FROM ruby:3.0.1-alpine

RUN apk add --update --no-cache --virtual run-dependencies \
build-base \
postgresql-client \
postgresql-dev \
yarn \
git \
tzdata \
libpq \
&& rm -rf /var/cache/apk/*

WORKDIR /docker-rails

ENV BUNDLE_PATH /gems

COPY package.json yarn.lock /docker-rails/
RUN yarn install
COPY Gemfile Gemfile.lock /docker-rails/
RUN bundle install

Now that we have everything necessary for your project to function, we will copy the code to the container inside the folder we created with the WORKDIR command.

FROM ruby:3.0.1-alpine

RUN apk add --update --no-cache --virtual run-dependencies \
build-base \
postgresql-client \
postgresql-dev \
yarn \
git \
tzdata \
libpq \
&& rm -rf /var/cache/apk/*

WORKDIR /docker-rails

ENV BUNDLE_PATH /gems

COPY package.json yarn.lock /docker-rails/
RUN yarn install
COPY Gemfile Gemfile.lock /docker-rails/
RUN bundle install

COPY . /docker-rails/

Why do we first copy the manifests (package.json, Gemfile, etc.) and then the rest of the project? This avoids having to reinstall the dependencies (since they stay in the cache) after changing the base code and rebuilding the image; this way only when the manifests change will their installation commands be run again.

Finally, we will tell Docker what command to run when we start our container (rails), as well as the arguments for it (s -b 0.0.0.0) and which port to expose so that we can access our application.

FROM ruby:3.0.1-alpine

RUN apk add --update --no-cache --virtual run-dependencies \
build-base \
postgresql-client \
postgresql-dev \
yarn \
git \
tzdata \
libpq \
&& rm -rf /var/cache/apk/*

WORKROOM /docker-rails

ENV BUNDLE_PATH /gems

COPY package.json yarn.lock /docker-rails/
RUN yarn install
COPY Gemfile Gemfile.lock /docker-rails/
RUN bundle install

COPY . /docker-rails/

ENTRYPOINT ["bin/rails"]
CMD ["s", "-b", "0.0.0.0"]

EXPOSE 3000

The default port over which Rails runs is 3000, but if you have designated another port within your application make sure to expose it correctly.

And with this we have our Dockerfile ready, although we are far from having our application ready. If we build our image with docker build . and try to run it with docker start docker-rails we would encounter an error, since Rails does not find the databases it needs to start correctly; but we will soon take care of that.

Then the docker-compose.yml

To coordinate all the services we need for the correct functioning of our application (in this case 2 databases: Postgres and Redis) we will use docker-compose, this Docker utility will help us create multiple containers from different images, connect them, give them environment variables and even volumes.

We will start by creating a file called docker-compose.yml.

touch docker-compose.yml

And on its first line we will specify which version of the tool we want to use, in this case we will use the most recent at the time of writing this article.

version: '3.8'

Next, we will indicate the services we want docker-compose to run, we will do this under the services label. We will give each service a name, which will be important when we are configuring our image, so make sure to name it in a way that makes sense to you. Let’s start with the Postgres service, which we will call db.

version: '3.8'
services:
 db:
 image: postgres:latest
 container_name: docker-rails-db
 environment:
 - POSTGRES_DB=docker-rails-dev
 - POSTGRES_PASSWORD=password
 ports:
 - 5432:5432
 volumes:
 - 'dbdata:/var/lib/postgresql/data'

YAML files are sensitive to indentation, so make sure everything is in order and indented correctly.

The db tag is the name we gave to the service and within which we will specify all the configuration for it.

The first thing we encounter is image, which as its name indicates is the name of the image we want to use for that service, in this case it is the official Postgres image in its latest version (you can specify a version by replacing latest with another valid version).

Then we encounter container_name, which is also self-explanatory and which will come in handy when checking our containers with docker ps.

environment refers to the environment variables, and if we refer to the Docker Postgres image documentation we can see that the only mandatory variable is POSTGRES_PASSWORD but we will also define POSTGRES_DB to give a custom name to the database that the image creates by default.

⚠️ Be sure to choose a secure password for the database!

ports are the ports that we will need to pass from inside the container to our machine, the ones indicated in the file are the ones that Postgres uses by default.

Finally, the volumes are the persistent information we will need so as not to run the migrations every time we turn on the container, this is because Docker deletes all data once we shut down the information, if you want to learn more about this topic I recommend this section of the documentation.

Now, the next service is Redis but we will not delve much into it as it only has a couple of labels which we have already reviewed, for more information you can visit the official image.

version: '3.8'
services:
 db:
 image: postgres:latest
 container_name: docker-rails-db
 environment:
 - POSTGRES_DB=docker-rails-dev
 - POSTGRES_PASSWORD=password
 ports:
 - 5432:5432
 volumes:
 - 'dbdata:/var/lib/postgresql/data'
 redis:
 image: redis:latest
 container_name: docker-rails-redis
 ports:
 - 6379:6379

Our last service we will call web and it will be the image we have built with our Dockerfile.

version: '3.8'
services:
 db:
 image: postgres:latest
 container_name: docker-rails-db
 environment:
 - POSTGRES_DB=docker-rails-dev
 - POSTGRES_PASSWORD=password
 ports:
 - 5432:5432
 volumes:
 - 'dbdata:/var/lib/postgresql/data'
 redis:
 image: redis:latest
 container_name: docker-rails-redis
 ports:
 - 6379:6379
 web:
 build: .
 image: docker-rails
 container_name: docker-rails-web
 ports:
 - 3000:3000
 depends_on:
 - db
 - redis
 environment:
 - POSTGRES_HOST=db
 - POSTGRES_USER=postgres
 - POSTGRES_PASSWORD=password
 - REDIS_URL=redis://redis:6379

The first new tag we encounter is build, which indicates the directory where our Dockerfile is located; since our Dockerfile is at the root we will only put .; if your Dockerfile is not at the root or has another name it is advisable to read this section of the documentation to make sure Compose finds it.

The image tag in this case will serve to name the image that Compose will build, since build is present it will not go to the repository to look for a pre-built image.

Finally, the depends_on tag will inform Compose that it should not try to start the container until the db and redis services are created, as well as it will connect them internally so that we can access them through a URL (as can be seen in the Redis environment variable) or by their respective credentials (as is the case with Postgres), if you want to learn how Docker handles this you can read about Docker Network.

Now that we have finished with the services, the only thing we must do is list the volumes we will use and which we named in the following way.

version: '3.8'
services:
 db:
 image: postgres:latest
 container_name: docker-rails-db
 environment:
 - POSTGRES_DB=docker-rails-dev
 - POSTGRES_PASSWORD=password
 ports:
 - 5432:5432
 volumes:
 - 'dbdata:/var/lib/postgresql/data'
 redis:
 image: redis:latest
 container_name: docker-rails-redis
 ports:
 - 6379:6379
 web:
 build: .
 image: docker-rails
 container_name: docker-rails-web
 ports:
 - 3000:3000
 depends_on:
 - db
 - redis
 environment:
 - POSTGRES_HOST=db
 - POSTGRES_USER=postgres
 - POSTGRES_PASSWORD=password
 - REDIS_URL=redis://redis:6379
 volumes:
 - .:/app
volumes:
 dbdata:

And that’s it! Our docker-compose.yml is ready, now there’s only one step left to start creating our Docker-contained application.

Out of Sight, .dockerignore Out of Mind

Many times we do not want certain files to be in our Docker image because they are not necessary for its construction (or are generated in it) and only end up making the project larger than it needs to be, such as the node_modules and .git folder. To save this space, we will create a file called .dockerignore at the root of our project and add these two folders:

echo ".git \n node_modules" >> .dockerignore

For more information on what a .dockerignore file can contain, you can consult the official Docker documentation

Databases 2 Go

Before running the project it will be necessary to create the database that Rails expects, and creating it is so simple that it can be done in a single command.

docker-compose run web db:create

This command tells Docker to use the image (which it will build) to run a command, in this case db:create. Docker, with what is specified in the docker-compose.yml, knows that since web depends on db it will have to run the Postgres instance first, so the database will be created in this container.

Why only db:create and not rails db:create or rake db:create? In our Dockerfile we gave rails as the entry point, so only the parameters are necessary. If we wanted to perform another command inside the container this would have to be through docker exec.

Our Application in a Container

With the database created, there’s only one command left that will run the containers in detached mode and we will be able to see the fruit of our labor.

docker-compose up -d

And that’s it! You can now access through your browser to localhost:3000 and see the Rails welcome page.

Conclusion

This whole process may be a bit intimidating at first, especially if you are not familiar with Docker, but the result is a much simpler development environment for everyone involved in the project, as now just by having Docker installed they can start programming; not to mention the benefits that this technology can bring to your production environment when combined with Kubernetes or Docker Swarm.

I hope you found this useful, anything you can contact me and I will respond as soon as possible.