Blog: 2023

My Favorite New York Times Interactives

This post was written in en

Image without description Screenshot of 2021: The Year in Visual Stories and Graphics | Copyright The New York Times

Many people who know me personally, know that I love the New York Times. I'll get straight to the point... I love their Interactives. New York Times (NY Times) interactive articles allow me to visualize and get a deeper understanding of what is trying to be conveyed. Some interactives are very simple to very complex in nature. The interactive visuals are amazing.

Since I am really into photography, I really appreciate the the beautiful photography across the New York Times but the interactives take the cake! I will literally drool hours upon hours just reading and browsing the beautiful photography. The videography was amazing as well. I used some videos from the interactives as examples or inspiration. on how to become better at using the camera, and make better content, overall.

The New York Times is great at their web development. It really has helped me become better at designing on the web and becoming more visual. I am no where near any good web designer/web developer.

My first interactive, which I don't think they called interactive at the time, was Snow Fall back in 2012.

The categories of Interactives that I enjoy are (in no particular order):

  • Environment
  • Education
  • Latin America
  • Politics
  • Technology
  • Travel

Here is my top 5 6 New York Times Interactives. If you need access to an article, I can help you out. Just send me an email at hello@lifeofpablo.com.


Podcasts I am currently listening

This post was written in en

I remember when I was a kid in the early 2000s when iTunes was at the height of its popularity. I used to get a free song of the week, which was baller! Who doesn't like free music. Then one day I stumbled upon the podcast section of iTunes. I remember seeing lots of podcasts on there. If my memory recalls correctly, podcasts were not only audio but also certain podcasts were available as videos. Often these videos were extras, bloopers, behind the scences, interviews, etc. I've been enamored with podcast at an young age. For ten years or so, I remember simply falling off of podcasts. I regret that very much. Better late than never to jump back on. I wish I could remember the name of the podcasts I used to listen to.

I am sharing the podcasts I enjoy listening too. I am always looking for more. If you have any goodones to share, email me at hello@lifeofpablo.com. I'd be happy to take with open arms any suggestions.

Listen wherever you get your podcasts.

New York Times

The Daily from the New York Times

First Person from the New York Times

Hardfork from the New York Times

The Ezra Klein Show

Gimlet Media/Spotify

Heavyweight from Gimlet Media

Science VS from Gimlet Media

Try Guys

The Try Pod by The Try Guys

World Languages

KoreanClass101

Reddit Based

rSlash

Crooked Media

Offline with Jon Favreau


Setting Up Vouch Proxy using Nginx

This post was written in en

Image without description

Location: 38.581573, -121.494400

Blog Post on this using Indieauth coming soon!

Table of Contents

Introduction

Recently I have started experimenting with identity. An SSO solution for Nginx using the auth_request module. Vouch Proxy can protect all of your websites at once.

Today, I'll demonstrate how to setup Vouch Proxy on an nginx web server. In this example I will be using Google as our provider

This tutorial assumes you have prior knowledge of using a linux server such as Debian. Message me at hello@lifeofpablo.com if you need some help. I'd be happy to do so!

What Vouch Proxy Does?

According to the Repository README.md, it states the following:

Vouch Proxy (VP) forces visitors to login and authenticate with an IdP (such as one of the services listed above) before allowing them access to a website.

Vouch Proxy protects websites

VP can also be used as a Single Sign On (SSO) solution to protect all web applications in the same domain.

Vouch Proxy is a Single Sign On solution

After a visitor logs in Vouch Proxy allows access to the protected websites for several hours. Every request is checked by VP to ensure that it is valid.

VP can send the visitor's email, name and other information which the IdP provides (including access tokens) to the web application as HTTP headers. VP can be used to replace application user management entirely.

Things you'll need/prepare:

  • A linux server with a public IP address with hosting and SSL
    • Debian will be used here but any of the common distros will work
    • Certbot is an easy solution to get SSL certifcate for https://
  • Go Language (to compile vouch-proxy)
  • Vouch Proxy

  • Nginx Web Server

    • Digital Ocean has a good guide if you need to learn how to setup virtual blocks in nginx.

Download/Install Vouch Proxy from Github

Make sure to have Go Lang installed

$ git clone https://github.com/vouch/vouch-proxy.git
$ cd vouch-proxy
$ ./do.sh goget
$ ./do.sh build

Vouch Proxy Nginx Virtual Block

Let's go ahead and create a virtual block to proxy Vouch Proxy.

server {
        server_name  vouch.example.com;  # spoint this to a subdomain. You an call it whatever you wish.

  # Proxy to your Vouch instance
  location / {
    proxy_set_header  Host  vouch.example.com; # make sure this matches the server_name, above
    proxy_set_header  X-Forwarded-Proto https;
    proxy_pass        http://127.0.0.1:9090;
  }

Let's go ahead and create a virtual block for a regular nginx website site or edit an existing virtual block. This is the website/service that you will protect with Vouch Proxy.

In this example I am using a php web app. If you a non php site site to work you can remove this location block and and edit it to your needs.

Google Cloud Console

Google Cloud Console API

Before we modify the config.yml, lets create an OAuth 2.0 Client ID and Client Secret which you will paste into the config.yml file.

You will have to do the following 1. Create a Project

  • Call it whatever you like.
  • I called it oauth
  1. Create Credentials
  • You'll create the client ID and client secret (don't worry if you do the following steps and forget to copy these down. They will be available for you to copy at any time.
  1. OAuth consent screen
  • App Name:
  • This is where you will need to setup where your redirect URL is https://vouch.example.com/url. Just like the server_name set in the nginx virtual block config above.
  • Authorized Domain: example.com (just the base domain)
  • Fill out any other required fields

Modify your config.yml

# Vouch Proxy configuration
# bare minimum to get Vouch Proxy running with google

vouch:
  domains:
  - yourdomain.com
  - yourotherdomain.com #optional unless you would like to use another domain that configured on the same server/machine

  # set allowAllUsers: true to use Vouch Proxy to just accept anyone who can authenticate with Google
  # allowAllUsers: true

  cookie:
    # allow the jwt/cookie to be set into http://yourdomain.com (defaults to true, requiring https://yourdomain.com) 
    secure: false
    # vouch.cookie.domain must be set when enabling allowAllUsers
    #  domain: yourdomain.com


oauth:
  provider: google
  # get credentials from...
  # https://console.developers.google.com/apis/credentials
  client_id: xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
  client_secret: xxxxxxxxxxxxxxxxxxxxxxxx
  # Google may require callback_urls (redirect URIs) to be 'https'
  callback_urls: 
    - https://yourdomain.com/auth
    - https://yourotherdomain.com/auth #optional unless you would like to use another domain that configured on the same server/machine
  preferredDomain: yourdomain.com # be careful with this option, it may conflict with chrome on Android 
  # endpoints are set from https://godoc.org/golang.org/x/oauth2/google

Nginx Virtual block protected by Vouch Proxy

server {
        listen 80;
        listen [::]:80;
        root /root/to/web/directory;
        index index.php index.html;
        server_name secretapp.example.com;

location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }
    client_max_body_size 100m;

location ~* \.php$ {
    fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;# Adjust to your setup
  include fastcgi.conf;
        fastcgi_index yellow.php;
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }



}

Eventually you will need to secure your site with SSL/TLS that makes your site use https://. Google will require that your traffic is secure with using it as 0auth as the method used to sign in to your protected website.

Do this after you have the survey blocks working in the following section.

Here is the link for Certbot for Debian. I have tested this on Debian 10 & 11. [https://certbot.eff.org/instructions?ws=nginx&os=debianbuster](Link for Certbot)

Cert bot can do this for you as long as you have the subdomain in your DNS pointing to your machine and have cert bot installed. It'll add these blocks in your

or

server { 

   server_name vouch.example.com  # or the domain of protected site will be in place of *vouch.example.com* by certbot

                                .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 

    listen [::]:443 ssl; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/vouch.example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/vouch.example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = vouch.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name secretapp.example.com;
    return 404; # managed by Certbot


}

Let's check for errors in nginx. Type the following command.

nginx -t

You should see something similar to this:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Let's open a browser tab or window!

Note: I'm using firefox. (Preference). Any modern browser should work.

Type in the protected app' URL in the address bar

Image without description

Sign in to Google

Sign in with an email that is allowed to sign to access the website when you configured it in Google Cloud Console. Image without description

Voila, the protected page.

Here is the home page of a Bludit CMS on subdomain acting as "secretapp.example.com" Image without description


ChatGPT combines Code Lyoko and Digimon Frontier

This post was written in en

76bfe5e09e02f1520780a27926b7ba5ac0e3be95ef5d902c2f6b4af004ec2531._RI_V_TTW_.jpg 91eamnbzj6l.-ri--1-.jpg

Introduction

I started messing with AI a lot more. One of my students got me doing more with it! Thanks Ryan! I started out with ChatGPT from OpenAI. I've been thinking about tv show crossovers. Crossovers are fun! Especially on animated shows.

Every since I was a kid I've really enjoyed two animated shows, Digimon Frontier and Code Lyoko. They both involved the digital/virtual world and the real world.

Code Lyoko tends to show a lot more regarding how "AI" can go wrong. I will write a blog post on Code Lyoko very soon!

Background on Code Lyoko and Digimon Frontier

Code Lyoko is a French animated television series that was produced by MoonScoop Group and aired from 2003 to 2007. It follows the adventures of a group of four students - Jeremie, Ulrich, Odd, and Yumi - who discover a virtual world called Lyoko. In Lyoko, they fight against an evil artificial intelligence named XANA that seeks to take over both the virtual and real worlds.

Digimon Frontier is the fourth season of the Digimon anime series. It aired in Japan from 2002 to 2003 and was dubbed into English and aired in North America in 2004. The show follows a group of five children - Takuya, Koji, Zoe, J.P., and Tommy - who are transported to the Digital World to fight against an evil force known as the Royal Knights.

Unlike previous seasons of Digimon, the children in Digimon Frontier transform into Digimon themselves and fight alongside their partner Digimon. Each of the children has a unique spirit that allows them to transform into a different Digimon, and they must learn to master their powers in order to save the Digital World.

The show is known for its action-packed battles, complex characters, and intricate

ChatGPT Combining Code Lyoko and Digimon Frontier

I ask ChatGPT to create a story line combining both worlds and I got this. I really like this.!

Combining Digimon Frontier and Code Lyoko would create an interesting story that combines the elements of both shows. The concept of a virtual world threatened by an evil force is a common thread between the two shows, and could serve as a basis for a crossover.

In this hypothetical scenario, the characters from Digimon Frontier would find themselves transported to the world of Code Lyoko, where they must team up with the Lyoko warriors to defeat XANA and save both the digital and real worlds from destruction. The Digimon would bring their unique powers and abilities to the fight, while the Lyoko warriors would provide their expertise in hacking and computer programming.

Together, the two groups would explore the virtual world of Lyoko, battling monsters and uncovering XANA's plans. The conflict between XANA and the Digimon's arch-nemesis, the evil Digimon Emperor, could also be woven into the story to add an additional layer of complexity.

Overall, a crossover between Digimon Frontier and Code Lyoko could create an exciting and action-packed adventure that would appeal to fans of both shows.

Question

Do you think we will ever get to this point where we need to fight the evils of the digital/virtual worlds? Honestly, I think we will someday. I'd love to hear from you all.

  • Pablo

Implementing Indielogin to my site and microsub compatible.

This post was written in en

Image without description

Intro

I've been on this SSO/oauth rabbit hole these last few weeks. I have implemented vouch-proxy (blog post coming soon, I promise. pls don't hate me! ) I happened to stumble upon indieauth which leadme to indielogin, and so forth continuing my rabbit hole. I heard about it this many years ago but it placed on my, "I know I should look into this soon" filing cabinet. Queue the Spongebob scene.

Indie Web states the following:

The IndieWeb effort is different from previous efforts/communities:

  • Principles over project-centrism. Others assume a monoculture of one project for all. We are developing a plurality of projects. The IndieWeb community has a code-of-conduct.
  • Publish on your site instead of emailing a list. Show before tell. Prioritize by making what you need, creating, iterating on your own site.
  • Design first, protocols & formats second. Focus on good UX & using your own prototype features to create minimum necessary formats & protocols.

I would like to give a shoutout to the IndieWeb Community and Aaron Parecki all that they do. You guys provide so much information. It wouldn't have been possible for this.

Disclamer: By no means is my setup even close to being perfect. I'm still a new to this.

The premise here is that you use your domain. Mine for example:

https://lifeofpablo.com

IndieAuth

IndieAuth is a federated login protocol for Web sign-in, enabling users to use their own domain to sign in to other sites and services. IndieAuth can be used to implement OAuth2 login AKA OAuth-based login.

Here are a few examples of sites that use indieauth:

image-4.png screenshot-2023-03-18-at-21-22-25-webmention.io.png screenshot-2023-03-18-at-21-34-44-indielogin.com.png

Selfauth

On my site I implemented, selfauth. Selfauth is a single user authorization endpoint written as single-file PHP without a database. For common indielogin/indieauth, it usually requires putting a <link..... rel="me> in my header pointing to Twitter or Github to help identify me and use as a method of authenticating my domain. I instead used selfauth and used a to a directory on my server to use as an authorization_endpoint as shown below.

<link rel="authorization_endpoint" href="https://lifeofpablo.com/auth/" />

So now I can login to any website that authenticates users using indielogin/indieauth

Adding h-entry microformats2

h-entry is the microformats2 vocabulary for marking up blog posts on web sites. It can also be used to mark-up any other episodic or time series based content.

Today, I added h-entry tags to my homepage and to my blog. H-entry tags are simply html classes added to a specific locations on a page. I am using Datenstrom Yellow. I used their API and the blog layouts (blog-start.html & blog.html )

Your h-entries should have, at minimum, the following properties:

e-content

  • the main content of the post

p-name

  • if your post is an article with a name, use this classname.

dt-published

  • the datetime the post was published at, in ISO8601 format, with a timezone
  • Datenstrom Yellow does this already in this format

u-url

  • the canonical URL of the post, especially important on pages listing multiple posts

Here is a full list of h-entry tags

Use this site to help you validate and make sure the information is pulling correctly. Adjust your code accordingly.

Here is my code reflecting h-entry tags as classes on Datenstrom, (the flat-file cms this site is running on).

I recommend using <span></span> where you need to place two or h-entry tags on the same line. It will help prevent unnecessary line breaks. Datenstrom, for example puts the date and author in the same line. (Look at example below and then look what I do in my code)

2023-03-19 by Pablo Morales

Webmention.io Webmention.io

Webmention is an open web standard (W3C Recommendation) for conversations and interactions across the web, a powerful building block used for a growing distributed network of peer-to-peer comments, likes, reposts, and other responses across the web.

This is the part where I start losing it a bit. Webmention.io is pretty straight forward. I have started experimenting with cross-site conversations. Luckly Webmentions.io helps me with this.

Basically, you sign up using your domain and configure your website with the appropriate steps to webmentions.io to start allowing you to do cross-site interactions.

The steps are

  • Sign up using your domain
  • Setup
  • Get your mention feeds
  • Get your API key.

Joining the community and attending events

There seems to be a big community! I am for sure commited! I will continue to share and contribute to this community. I am always looking to find new people to share things I enjoy.

I am really excited to join my first event virtually. I am going to join the "Homebrew Website Club" this week and meet some cool people! Want to join ? Here is the link.

Here's the link to the entire calendar. Upcoming Events

Conclusion

  • That's it! We covered:
  • Indieauth
  • Selfauth
  • h-entry tags & code examples
  • Webmention.io
  • Joining the community

I didn't go too much in detail but it's a start. I am happy to continue experimenting with this protocal and implementation for an open-web. Rabbit holes like this are fun and push my limits! There are so many options on how you can implement indieauth and how you can process your data. It's easier for anyone who is using a popular platform such as Wordpress. Why not try the non-easy route? It's fun!

Happy authenticating!

  • Pablo