DEV Community: Ulises Viña

God bless ThinkPads

Ulises Viña — Tue, 11 Apr 2023 05:38:14 +0000

I recently found myself in a bit of a predicament. My beloved ThinkPad L440 was suffering from a serious issue - I accidentally injected 12V on the 5V rail of the left-hand side USB 3.0 port, causing the LCD backlight to immediately go out. After testing the LCD panel on another computer, it was clear that the issue was with the board itself. I was left wondering how I could trace the problem and replace the faulty component, and my frustration only grew as I began to suspect that a protection diode or an IC had been damaged.

It was clear that my trusty ThinkPad L440 was in need of some serious repairs, and I began to consider my options. While I could have spent the time and money to fix the broken component, I realized that it might be time to consider upgrading to a newer model. That's when I discovered the ThinkPad T460s, and I thus became a proud owner of the T460s.

The T460s offers all of the features that I loved about my L440, but with some serious upgrades, there's a little caveat though, less upgradability: while my older L440 allowed a CPU replacement, my new T460s has it soldered-in, same goes for RAM (I've got a 4GB soldered + 4GB SODIMM setup). The newer model boasts a sleeker design, longer battery life, and improved performance. Plus, as a Linux enthusiast, I knew that the T460s would be a perfect fit for my needs. Its hardware compatibility out-of-the-box with Linux makes ThinkPads just the great choice for all the penguin lovers and FOSS enthusiasts.

Of course, one of the biggest advantages of purchasing a second-hand ThinkPad is the price. I was able to get a great deal on a T460s in excellent condition, and I know that it will last me for years to come. And as someone who cares deeply about the environment, I appreciated the fact that I was making an eco-friendly choice by opting for a second-hand model rather than buying a brand new laptop.

You can get an used ThinkPad for VERY cheap on eBay or similar sites, but it all depends on the path you want to follow.

If you're into FOSS, you might wanna get a ThinkPad you can LibreBoot, like the X220 or T60 both of which range between $100-150 USD. If you want the newest features however you might want to consider something in the X1 Carbon lineup, or a X280 that ranges between $250-300 USD, in my case I'm somewhere in between those, so you might want to follow my steps and get either a T440p/L440 (both have same specs, but beware, the L440 CAN'T be installed with a FOSS firmware option like CoreBoot on the T440p) or a T460/T460s, both raging between $150-250 USD.

To finish this post, I want to finish with a cherry on top, and that is: it turned out the only issue with my older L440 was a shorted SMD fuse and a BIOS corruption, after reprogramming the BIOS and removing that fuse, my L440 continued working just fine! So really, God bless ThinkPads.

Dynamic Website 101

Ulises Viña — Tue, 11 Apr 2023 05:15:33 +0000

It's well known that static websites have become a thing of the past, so in order to make an attractive website you'll need to make it as dynamic as possible, that means, the less hard-coded content, the better. Today, I'll talk about all the integrations I've made to my website to make it attractive.

Introduction

For starters, you'll need to know the JavaScript and React basics, but we'll not cover that in this post, rather, we're going to immediately talk about design.

Choosing content

When making a website, you need to choose what content will go on it, today we're going to focus on portfolios, in which, you don't want every component to be dynamic, as an example, the Awards component on my website

This section barely changes, and it doesn't make any sense to create an API to maintain that section, given that changes occur say, once every 3 months, and the changes are minimum, you can just modify the section and re-deploy the website. Same goes for my "About" section.

So, what can we make dynamic?

I chose what content is dynamic in my website following this criteria:

Does the content change regularly?
Can I implement it using an API?
Is the information relevant to the website I'm creating?

When evaluating the third condition, if you're creating a portfolio (or website for yourself) you can consider that everything that is of your liking could be relevant to the website, as a website made for yourself is exactly meant to make people know a little bit more about you.

Creating the dynamic content

For this example, I'll use my portfolio's dynamic colour palette; if you want to follow this pathway, you're more than welcome to do so.

In my website, the whole design changes when a song is played on Spotify, this is thanks to the dynamic colour palette feature, similar to the Monet engine on Android 12 or higher.

In this case, the album's cover is obtained using the Spotify's API, then, passed onto an Image object in JavaScript, and then, that Image object is used with the ColorThief library in order to create a colour palette consisting of six colours, a primary, a secondary, a tertiary and their corresponding text colours (either #FFF, white or #000, black), the last of which is obtained using a math algorithm rather than a library.

First, the Spotify API is fetched using an API endpoint on my website's end (using Next.js backend)and it's corresponding controller.

The code for the controller goes as follows

const getAccessToken = async () => {
  const res = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      Authorization: `Basic ${process.env["SPOTIFY_AUTH_BASIC"]}`,
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
      grant_type: "refresh_token",
      refresh_token: process.env["SPOTIFY_REFRESH_TOKEN"],
    }),
  });

  return res.json();
};

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken(),
    nowPlaying = await fetch(
      "https://api.spotify.com/v1/me/player/currently-playing",
      {
        headers: {
          Authorization: `Bearer ${access_token}`,
        },
      }
    );

  return nowPlaying;
};

As you can see, it obtains credentials from the environment variables and makes a request to the Spotify API using the access token obtained through the getAccessToken() function. The getNowPlaying() function retrieves information about the currently playing song on the user's Spotify account, which is then used to obtain the album cover image.

Once the album cover image is obtained, it is passed onto the ColorThief library which generates a color palette. This color palette is then used to style the website, with the primary color being used for the background and the secondary and tertiary colors being used for accents. This is done using a React Context Provider, and this is the code for it:

import { createContext, useState, useEffect, useContext } from "react";
import ColorThief from "../node_modules/colorthief/dist/color-thief.mjs";

export const MusicContext = createContext();

export const useMusic = () => useContext(MusicContext);

export const MusicProvider = ({ children }) => {
  const [music, setMusic] = useState({ isPlaying: false });

  const musicLogic = () => {
    fetch("/api/now-playing")
      .then((res) => res.json())
      .then((data) => {
        if (!data.isPlaying) return;

        console.log(data);

        const img = new Image(),
          colorthief = new ColorThief();

        img.crossOrigin = "Anonymous";
        img.src = data.albumImage;
        img.addEventListener("load", () => {
          try {
            const palette = colorthief.getPalette(img);

            const primaryBg = `rgb(${palette[0][0]}, ${palette[0][1]}, ${palette[0][2]})`,
              secondaryBg = `rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]})`,
              tertiaryBg = `rgb(${palette[2][0]}, ${palette[2][1]}, ${palette[2][2]})`,
              primaryText =
                palette[0][0] * 0.299 +
                  palette[0][1] * 0.587 +
                  palette[0][2] * 0.114 >
                180
                  ? "#000"
                  : "#fff",
              secondaryText =
                palette[1][0] * 0.299 +
                  palette[1][1] * 0.587 +
                  palette[1][2] * 0.114 >
                180
                  ? "#000"
                  : "#fff",
              tertiaryText =
                palette[2][0] * 0.299 +
                  palette[2][1] * 0.587 +
                  palette[2][2] * 0.114 >
                180
                  ? "#000"
                  : "#fff";

            document.documentElement.style.setProperty(
              "--primaryBgColor",
              primaryBg
            );
            document.documentElement.style.setProperty(
              "--secondaryBgColor",
              secondaryBg
            );
            document.documentElement.style.setProperty(
              "--primaryTextColor",
              primaryText
            );
            document.documentElement.style.setProperty(
              "--secondaryTextColor",
              secondaryText
            );
            document.documentElement.style.setProperty(
              "--tertiaryTextColor",
              tertiaryText
            );
            document.documentElement.style.setProperty(
              "--tertiaryBgColor",
              tertiaryBg
            );

            setMusic({
              ...data,
              primaryBg: `${palette[0][0]}, ${palette[0][1]}, ${palette[0][2]}`,
            });
          } catch (e) {
            console.log(e);
          }
        });
      });
  };

  useEffect(() => {
    musicLogic();
    const interval = setInterval(() => {
      musicLogic();
    }, 30000);
    return () => clearInterval(interval);
  }, []);

  return (
    <MusicContext.Provider value={{ music }}>{children}</MusicContext.Provider>
  );
};

Conclusion

Creating a dynamic website can be a lot of work, but it's worth it. By making use of APIs and libraries, you can create a website that not only looks good but also provides a great user experience. When deciding what content to make dynamic, remember to evaluate how frequently it changes and whether it's relevant to your website. With the right tools and some creativity, you can create a dynamic website that stands out from the rest.

Creating an Operating System: The Journey

Ulises Viña — Sat, 03 Sep 2022 22:28:01 +0000

Ever since I started wondering how stuff on my computer worked, I had the dream of writing my very own operating system from scratch. And this is what I've learned in the last 8 months:

Introduction

For starters, you need to know how a computer works on a low-level to understand what you're doing, so let's start with the very basic:

The Transistor

A transistor is an electronic component that acts as a switch, it uses semiconductors (most commonly silicon) to turn or on off electrical circuits. We can use these to create the so-called logic gates.

A common transistor has three ends: the collector, the base and the emitter. Each does what it's name describes, but I'm going to explain it anyways.

Collector: It's the pin that collects the voltage from the electrical source of the circuit, this is should be always on.

Base: This pin collects an input that could be either on or off, it doesn't have to be necessarily the same voltage as the collector, but it must come from the same circuit, otherwise, these wouldn't be connected and the electrons wouldn't have a path to travel in the circuit. (tl;dr: base and collector must have a common ground).

Emitter: This pin outputs voltage if the base input is HIGH (on).

Now that you know the basics on transistors, we get to explore what are these magical (and complex) logic gates.

Logic Gates

Logic gates are pretty much the electronic circuitry of the propositions you learnt in your philosophy class, but I'm going to explain the basics of them.

As we learnt before, computers work with the principle of conditions, thanks to the nature of the transistors present in the CPU, and thus, we need to know more about these conditions.

Through a complex series of arrangements, you can make a transistor "think" logically, using these logic gates:

Not: This is the equivalent to the negation in philosophy, it inverts the input, so for instance, if you input HIGH to this logic gate, the output will be LOW (off).

Or: This logic gate takes two (or more, as all of the gates we're going to explore from now on) inputs, and it's output will be HIGH only if one or more inputs are HIGH.

And: This logic gate's output will be HIGH only if all of it's inputs are HIGH.

Xor: This logic gate's output will be HIGH only if it's input are different from each other. And now that we're exploring this concept, you should know that logic gates can only take two inputs at once, so what you do when there are more than two inputs is concatenate them, so, a xor with three inputs would be ((p ⊻ q) ⊻ r).

Nor: This logic gate is the conjunction of the not and or gates, meaning, the output will be like if you passed a NOT gate through a OR condition (every possible input returns LOW except for the one where all it's values are LOW).

Now with this knowledge, we can pass on to the CPU.

CPU

The Central Processing Unit (a.k.a. CPU, or simply, processor) is the circuit that processes all the signals in your computer, it is generally divided into more units, like the ALU (Arithmetic Processing Unit), and Cores (you can think of these as tiny processors in which the jobs are divided into).

Each of these smaller units uses logic gates and transistors in them, and yes, you can make math using "Yes" and "No".

The CPU has also a set of instructions, which we'll use to program what it's doing at the time of our code's execution, as you'll discover later, these are General-Purpose and very intuitive.

The CPU also has these sections of memory (in which you store data) built-in called registers, in the x86 architecture (the one most PC's run on) has general purpose registers, but also some that are for specific use cases, such as storage, video, etc.

With this, let's pass to the memory.

Memory

The memory (not to be confused with storage) is the component in your computer used to load the programs you run on your computer. The information the program needs to store is temporarily loaded onto your computer's memory. This component is also known as RAM (random-access memory), and it's volatile, meaning it's contents are erased when it's powered off.

Memory divides into addresses, which are tiny sections of it that can contain data. These are commonly represented in hexadecimal, speaking of which, is represented by numbers that start with "0x", just like "0b" for binary.

Now, let's pass over to some action.

Assembly language

Assembly is a general-purpose low-level programming language designed to communicate directly with a computer's hardware (mainly CPU and memory). It's fairly simple compared manually writing binary. Assembly uses CPU instructions, and has to be compiled ("assembled") to run.

Hello World!

As this post is getting bigger and bigger without getting to code, I'm going to end it with the code for a "Hello world" message in screen written in assembly, but don't worry, I'll explain how it works.

org 0x7C00
bits 16

xor ax, ax
mov ds, ax

start:
    mov si, msg
    mov ah, 0x0E
.loop   lodsb
    or al, al
    jz halt
    int 0x10
    jmp .loop

halt:   hlt
msg:    db "Hello world!", 0 

times 510 - ($ - $$) db 0
dw 0xAA55

The first line defines the origin in memory of the program, 0x7c00 is the first address value in which the program is going to be stored. There is a reason of to why this number, that I'll explain in another post.

bits 16 defines that the program will run on 16 bits (even though our CPU could be 32 or 64 bits. This is a x86 architecture convention).

xor ax, ax means the next line will run if the condition is true. It compares the ax register against itself (again, there's a reason for this that I'll explain later).

mov ds, ax moves the contents of ax over to ds, both are CPU registers.

start:, .loop, halt: and msg: (seen later) defines sections of code (you can think of these as functions), though, the msg: section is more like a variable, as it immediately returns "Hello world" and a null termination character.

mov si, msg moves the contents of the msg variable over to the si register. This will be later used to display the value of msg.

The .loop section is a recursive function that calls itself over and over until the character to evaluate is the null termination character (\0). It calls the 0x10 interrupt (used to display text stored in the al register if the value on the register ah is 0x0E (teletype)), and then, passes to the next character to evaluate it.

times 510 - ($ - $$) db 0 calculates the size of the code minus 510 (so that we have two bytes left) and then fills the space between the two last bytes of the sector and our code with zeroes.

dw 0xAA55 fills the two last bytes with the 55 AA hex values, note that I inverted the order of these two, this was on purpose, as the x86 architecture is little-endian.

We need to have these 55 AA bytes at the end so that the BIOS knows we're trying to boot off of the drive that contains our code.

Conclusion

Creating an operating system is a process for which you need low-level computing knowledge, which you should have acquired if you read the full post. Mainly, you'll need to know Assembly, and what are the components in your computer, how they work and what they do.

By the end, you'll have a working bootable "Hello world".

That's all for today, and thanks a lot for your attention!

Hello World

Ulises Viña — Sun, 25 Jul 2021 04:21:49 +0000

This article is just to test out the blog page on my portfolio.