Mario Sanchez Carrion

This is a simple web application that let’s users rsvp for a party, indicating their name, number of people coming with them, and what will they bring.

The app implements routes using the Bottle web framework, following the MVC design pattern.

Routes

/ (or index route): This route renders the entry point to the app, and presents the user with a web form to fill in their information. All fields are required. If any field is not completed, the app will re-route the user to the same page to try again. If all input has been entered and is valid, the user will be directed to a confirmation page where a message will indicate that their rsvp was successful.

Tech Stack

Sun, 01 Jan 2023 00:00:00 +0000

Computer: HP Pavilion x360 with a 14" display. It has an Intel Core i5-1035G1 Processor, 8GB SDRAM, and 256 SSD. This is a great laptop for the price. I don’t mind the smaller screen since my intention is to maximize portability (while at home, I do most of my web development work in a large monitor anyway).
Operating System: Ubuntu 20.04 LTS. Some of the most significant developments in the world of programming and web development are easily accessible from the Linux command line. Microsoft recognizes this and recently introduced WSL2 (Windows Sub-System for Linux 2). This feature offers you a full Ubuntu Linux kernel from within Windows, which you can open just like any regular app. WSL2 is not just a translation layer, but a full Linux environment complete with its own filesystem. Basically, I am now running Ubuntu Linux from within Windows.

Pynt: A Static Site Generator Made with Python

Fri, 10 Jun 2022 00:00:00 +0000

Made with: Python

Description:

Pynt is a pint-sized static site generator with basic blog capabilities written in Python in less than 100 lines of code. It doesn’t use any web framework, just pure Python functionality.

Why

A few years back I became familiar with static site generators (there are many of them). I tried several: Jekyll, Metalsmith, Hugo, etc. I was always fascinated by the way they worked and how a user could create a working static website with minimal effort at a click of a button. I always wondered if one day I would be able to write one, so I took the opportunity of CS50P’s final project to build one.

Auction Site with Django

Wed, 06 Oct 2021 00:00:00 +0000

Made with: Python

This app was my implementation of CS50W’s Project 2, which involves Django, SQL, Models and Migrations.

Here are the specs:

Models: Your application should have at least three models in addition to the User model: one for auction listings, one for bids, and one for comments made on auction listings. It’s up to you to decide what fields each model should have, and what the types of those fields should be. You may have additional models if you would like.

Wikipedia Clone with Django

Sat, 04 Sep 2021 00:00:00 +0000

Made with: Python

This project is part of the CS50W Web Applications with Python and JavaScript online course.

It doesn’t use models, just views and templates, to build a wiki page. The program reads through a folder filled with entries written in Markdown, converts them to HTML and sends the HTML to Django templates.

The specs call for:

A home page that lists the titles of all the entries and links to each individual entry page
Search functionality
Random page generator
The ability to edit entries

Here is a short video of the final product:

URL Shortener with Python

Mon, 22 Mar 2021 00:00:00 +0000

Made with: Python

This is a practice project in Python. We will create a Python program to shorten URLs using Bitly’s API.

Of course we can always shorten URLs directly from the Bitly page, but we don’t want to do that. We want to be able to do it straight from our computer’s command line, and to store each URL key value pair (long url, short url) in a CSV file in our computer.

Today's Moon Phase With JavaScript

Sun, 28 Feb 2021 00:00:00 +0000

Made with: JavaScript

I wanted a simple web page to show today’s date, moon phase and percentage illumination, plus a nice picture of the moon.

My first step was to find an API that I could call to retrieve today’s moon phase and illumination. After some research I found the Farmsense moon phase API. The API accepts a date as a parameter, formatted in milliseconds (Unix Time), but only takes the first ten digits.

Covid-19 Dashboard

Thu, 17 Dec 2020 00:00:00 +0000

Made with: Python

This is a practice project in Python using the Covid package, which lets us retrieve information about Covid-19 from John Hopkins API.

The application.py file contains our program logic.

We start by importing the package that will provide us with the data:

from covid import Covid

The data comes in the form of a list of dictionaries (or if you’re more used to JS parlance, an array of objects). You can learn more about this package here.

Mailing List Form with Express and CSV

Sun, 13 Dec 2020 00:00:00 +0000

Made with: Node and Express

This is a simple server-side application made with Node and Express.

Instead of using a more advance data base, we used a super simple CSV file to store our data, and took advantage of the fs Node module and the neat-csv package to convert string information from our CSV database into an array of objects that we can then pass along to our success template made with Pug. The success page displays all the entries of our CSV file.

The Psychology of Money

Sun, 06 Dec 2020 00:00:00 +0000

The Psychology of Money, by Morgan Housel, is probably the first book I would read. More than short term tactics, it deals with the mindset we need to develop to acquire wealth.

I have included the most relevant quotes from the book below, although I highly recommend that you read the whole book.

“The premise of this book is that doing well with money has a little to do with how smart you are and a lot to do with how you behave. And behavior is hard to teach, even to really smart people.”

Pizza Selector

Sat, 05 Dec 2020 00:00:00 +0000

Made with: JavaScript

JavaScript program to choose only the pizzas with the ingredientes you want.

Select the ingredients you don’t want from a list of options and hit the submit button. The program will only show you pizzas with ingredients you want.

The script uses a plain vanilla XMLHttpRequest to bring the pizza information from a JSON file. They iterates over all pizzas and all ingredients in a pizza setting the property “wanted” to false if the pizza contains any ingrediente selected in the not-wanted list.

Donate Button with Paypal Integration

Sat, 30 May 2020 00:00:00 +0000

Made with: Node and Express

I got the inspiration for this project from this post in Willem Middelkoop’s blog. While Willem’s post went through the basic process, it didn’t provide detaied instructions on how to make this work on an actual server, or how to interact with the payment platform’s API. That’s when I went online and searched for tutorials and videos that might help me.

On Writing Well

Sun, 24 May 2020 00:00:00 +0000

I’ve been writing often on this site lately, so I decided to listen to the audio version of On Writing Well: The Classic Guide to Writing Nonfiction by William Zinsser. The book was highly recommended by Derek Sivers. More than a collection of grammatical rules and techniques, On Writing Well is a common sense guide on how to keep your writing concise and engaging. Here are the passages and concepts that resonated with me:

Demo Site with Node and Express

Mon, 18 May 2020 00:00:00 +0000

Made with: Node and Express

Before we go to our example site, let’s talk about Express:

Express is a web framework usually paired with Node. It is a light weight tool that makes it easy to build dynamic web applications.

Since Express is made with JavaScript, you can install it directly from NPM. Once you install it, you can build your first Express aplication: a simple Hello World! message displayed when you access the / route, or the root of your website (usually that will be your home page):

How To Implement a Dark Theme Switch for your Site

Sun, 23 Feb 2020 00:00:00 +0000

Made with: JavaScript

We will implement a dark theme selector for our site that visitors can activate by clicking on an icon. We will discuss what we have to do to the HTML, CSS and JavaScript files that make up our site to make that happen.

The HTML

<!--DOCTYPE-->
<html>
  <head>
    <script src="script.js"></script>
    <script 
      src="https://kit.fontawesome.com/3fe16e504a.js" 
      crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="style.css">
    <title>Dark Theme</title>
  </head>
  <body>
    <p>
      <a href="contact.html">Contact</a> |
      <a href="about.html">About</a> 
      <span id="toggle-switch" title="Toggle Dark Theme">
        <i class="fas fa-moon" id="toggle-switch"></i>
      </span>
    </p>
    <h1>My Dark Mode Theme</h1>
    <p>This is a sample site to demo how to switch to dark mode.</p>
  </body>
</html>

For this example, we will create three simple HTML pages: index.html, about.html and contact.html. The code above is the index.html page. At the top of each page, we will include a simple navigation menu next to which we will place a moon-shaped icon that users can click to turn on dark mode. Once in dark mode, the moon icon will switch to a sun icon, indicating that by clicking it the visitor can go back to the default light mode. Both the moon and the sun icons can be found in Fontawesome.

Foreign Exchange Mobile Web App

Thu, 20 Feb 2020 00:00:00 +0000

Made with: JavaScript

Update: The API I was using for this project is not in business any more, so the demo will not work. I am looking for a new API to adapt this project and make it work again.

We will create a mobile web app that will display the current exchange of a basket of currencies versus the US dollar. Besides the current rate we also want to display the YTD % devaluation (or revaluation) for each of the currencies.

Airlines

Tue, 21 Jan 2020 00:00:00 +0000

Made with: Python

With this simple app we can type the name (or part of the name) of an airline in a form, and upon Submit we get a list of airlines that match our input followed by its IATA symbol. For example, you can type “american” in the search box:

If you then click Submit; the result will be a list of all the airlines that have “american” in their name, followed by their IATA symbol in parentheses:

JavaScript Photo Gallery

Wed, 08 Jan 2020 00:00:00 +0000

Made with: JavaScript

I wanted to post a few pictures from my trips and other activities here in the site. Looking around the web for ideas I settled on a simple square format for the pictures, with a subtle frame and a gray transparent rectangle for the description placed at the bottom of the photo:

University of Miami

These are the style declarations for the photos:

The Millionaire Next Door

Wed, 01 Jan 2020 00:00:00 +0000

PAW (prodigious accumulator of wealth) is someone who has achieved high net worth. UAW (under accumulator of wealth) is someone with low or negative net worth. PAWs may have normal or even below average income. UAW may have high income. It’s not how much you make: it’s how much you keep.
PAWs live below their means.
PAWs have budgets and stick to them.
The majority of PAWs own their own businesses. Businesses are not fancy but provide solutions to basic necessities.

Stock Info Dashboards with ReactJS

Mon, 21 Oct 2019 00:00:00 +0000

Made with: React

Update: As of May 9, 2020, the API I was using to fecth the stock info has gone out of business so the values you will get in the Demo are all null. The functionality of the app, though, remains correct. I will update as soon as I find another free API.

Objective

To build a stock info app using React.

What we wanted to accomplish

We wanted a simple form that let us input stock symbols. Upon submission, we wanted a page listing the names of those companies, hyperlinked to a specific company page where we could look at some financials.

Progress Circle with JS and CSS

Mon, 08 Jul 2019 00:00:00 +0000

Made with: JavaScript | CSS

I started with progressbar.js by Kimmo Brunfeldt, which does most of the heavy lifting. You can add it your project by including a link near your closing body tag to the CDN repository where progressbar.js resides.

I used Progressbar’s circle as the base for my project (you can use other geometrical shapes), which is intended to create an animated score dashboard to display at the end of a quiz. I then customized the shape with the following options:

eCommerce App with Flask and SQLite

Tue, 25 Dec 2018 00:00:00 +0000

Made with: Python, SQLite and JavaScript

This app was my CS50x final project.

The app loads a gallery of soccer shirts that includes: image, description, price, and a small form to add item to cart. The shirt info is stored in a SQLite database and is displayed using Bootstrap’s card class.

The app includes a series of filters implemented using SQLite queries so you can see only shirts that match a certain filter: shirts by region, clubs vs. national teams, shirts on sale, etc.

Micro Blog Front End with React

Tue, 23 Jan 2018 00:00:00 +0000

Made with: ReactJS

This front end project is inspired in a minimal version of Twitter. We use React components and JavaScript ES6 classes, and put into practice the concept of state. It also uses JSX syntax.

We start by running Create React App, which provides the scaffolding for our site and performs all the lifting so that we can focus on the code.

Real Estate Website with Bootstrap

Fri, 02 Jun 2017 00:00:00 +0000

Made with: HTML | CSS | JavaScript

The objective was to design a clean, efficient, and fully responsive website for a real estate investments business. It needed to clearly describe what the company did, and include easy to follow call-to-actions throughout the site.

It was made using the Agency template for Bootstrap, a fully functional form by Formspree, and several jQuery plugins for smooth transitions and a carrousel of testimonials.

Ego Is The Enemy

Mon, 20 Mar 2017 00:00:00 +0000

Ego Is The Enemy, by Ryan Holiday, came highly recommended by Derek Sivers. It explores how remaining humble and embracing a learning mindset can lead to success. Here are my favorite highlights:

“If ego is the voice that tells us we’re better than we really are, we can say ego inhibits true success by preventing a direct and honest connection to the world around us.”

“If you start believing in your greatness, it is the death of your creativity.”

Basic Calculator with HTML, CSS and JS

Sat, 18 Mar 2017 00:00:00 +0000

Made with: HTML | CSS JavaScript

Project involved creating the calculator interface with HTML and CSS and then adding fuctionality through event handlers and callback functions. It works fine, with some improvements yet to be made, like limiting the display to a certain number of digits so that they fit in the calculator window when the number is too large.

You can try it out here:

The Compound Effect

Mon, 30 Jan 2017 00:00:00 +0000

More than just a productivity book, The Compound Effect, by Darren Hardy, deals with the importance of developing good habits. It is easy to read and full of valuable insights and actionable steps.

Here are my most important takeaways:

Massive results take time

Whether we are trying to build wealth, lose weight, learn a new language or any other worthwhile pursuit, success only comes after small, consistent actions performed over a long period of time. Most people get discouraged because they don’t see results weeks, months or even years after they start, but eventually momentum is built and massive results begin to show. The author makes the analogy of “the penny that doubles” (if you start with a penny and double it every day, after 30 days you will have $10.7M).

Talk Like TED

Sun, 20 Nov 2016 00:00:00 +0000

A few weeks ago I was rehearsing a presentation, and one of my co-workers recorded it on video. What an eye opener! I was terrible…

After getting some honest feedback and a few tips, and going through the presentation for five or six more times, my delivery got better, to the point that I almost didn’t have to cringe when I watched it.

As if fate had it, a few days later I was at a Fedex store and saw Talk Like TED, by Carmine Gallo, sitting on the shelves. I went to my local library and picked it up. Here are my most important takeaways:

Building a Single Page Application with AngularJS

Tue, 02 Aug 2016 00:00:00 +0000

Made with: Angular