Forem: Andrew Alvarez

An open discussion: What happened to Front-end positions?

Andrew Alvarez — Wed, 28 Aug 2024 19:23:26 +0000

Hello DEV community! I wanted to raise up a discussion after a trend I've been seeing for a while. For some context, I started as a front-end developer about 7 years ago and eventually transitioned to the full-stack development positions I've been working on (mostly on startups) due to having to fill those gaps. I love writing front-end code, I've always engaged faster with the products I build by having visual components to interact with.
Now, I've been watching this trend on job listing websites where there's barely any front-end jobs, almost everyone wants/requires full-stack devs.
So naturally, I start posing questions... Is this the death of front-end careers on corporate companies? Does no one acknowledge the importance of dedicated front-end developers? Is this a product of the ignorance of non-technical people that revolve the industry?

What do you guys think?

How to be a Hackerman

Andrew Alvarez — Tue, 12 Jan 2021 00:54:23 +0000

Working with computers or programming is more than having the brains to come up with code and programs. You'll notice more than one coding instructor going backspace letter by letter to fix a typo, or someone dragging their mouse from the top of the document until the bottom to select everything (just press Ctrl+A for the love of Shia Labeouf, just do it). I have found out that using the mouse incredibly hinders your speed and makes us think more than twice even the most simplest of decisions.

I would like to teach you a set of skills that will improve your speed and performance and help you be anywhere as cool as this guy:

Disclaimer: This guide is meant to work on Windows with WSL (Windows Subsystem for Linux), any Linux distro and MacOS.

distro means distributable, and its just a tailored version of Linux for certain specific needs. For example, Red Hat is the enterprise version, Mint is a general customizable build, and Raspbian is optimized for Raspberry PIs.
I recommend Ubuntu 20.04 since it's user friendly and has a lot of support.

Think of your terminal as the manual way to operate your computer without a graphic interface. Everything can be controlled via keyboard, you just have to know how to access what you need.
Typing is the Hackerman way.

Ergo, lesson 1: Learn them hotkeys.

Now, how can I navigate around if I can't see anything or don't have anything to click?

The first command you'll enter will be pwd.

$ pwd
/user/kweizar

This is a path, it's the address that leads to your Present Working Directory on the computer's file system. Paths are case sensitive, so mind what you type.

You can move between directories by using the cd path command, cd stands for Change Directory.
There are many options you can pass as the cd command argument.

$ cd 
/  : go to the root directory of your system.
.. : go to the parent directory // /user in this case
/user/kweizar/photos : an absolute path.
~/photos 
// or       } these two are relative paths.
./photos

More on absolute and relative paths later on.

Assume you are on the D/ folder, invoking cd .. would take you to C/, cd ~ would take you to A/ since it's assigned as your home directory.
The command cd / would take you to the root folder and invoking cd . wouldn't do anything since you'd be navigating to the same folder.

This concludes the Navigation part, we're now able to go to any directory we require.

It's important to note that everything on your computer are files. These follow a parent/child hierarchy starting from root (/) and keep branching out like a tree.

Directories are files too; they possess extra metadata that greets them their "folder" properties.

Tip: File extensions are actually not required, they just help the OS associate the program that's meant to open that specific type of file.

Now, we'll want to get some Information of our surroundings. Let's use the ls command to list the content of the current directory

$ ls
photos/
documents/
main.go
calculator

Our terminal prints out all of the files in /user/kweizar
We can also combine the command with a path and check remotely the content of that directory.

$ ls ./photos/event/
photo1.jpg
photo2.jpg

Wait, what the heck is . ? This is an alias that represents the directory you're currently at. There are others like .. which as mentioned above, goes to the parent directory.

We printed out information that's already irrelevant to us, let's clear the screen out for less clutter. You can type clear or press ctrl + L and reset your console prompt screen.

🪧 To open the console's manual use the man man command. It will contain the instructions to open the multiple sections of the manual.
This contains information for the shell commands (like ls, cd, etc.), system calls, the C and C++ libraries and their specifications, and many others. Combine man with other commands to get their specific manual pages.
Always refer to this guide first when you need thorough documentation.

Once you start building a project, you're going to have to create files and folders.
To create a file, use the touch command. This will create a blank file with the specified name.
To create a folder, use the mkdir command.

📢 Avoid using spaces in names, preferably use a naming format system like camelCase or snake_case and stick to it!

You will combine 99% of the commands with a filepath. I will introduce two news pattern for commands though, take for example the cp command.

// Pattern 1:
// command source_path destination_path
$ cp ./photos/event/photo1.jpg .

You guessed correctly, cp is the copy command. Now a copy photo1.jpg exists in my current directory.

You can also move files with mv, this is also the command to rename a file, just specify the new name at the destination path!

$ mv ./photos/event/photo1.jpg ./movedpicture.jpg

now photo1.jpg will be moved and renamed to my current directory as movedpicture.jpg

I'll use the mkdir command for our second pattern.

// Pattern 2:
// command destination_path1 destination_path2 destination_path3 ...
$ mkdir music videos pictures

This will create three separate folders called music, videos and pictures.

We've learned enough for today, in no time you will be speedily hacking into any mainframe.

Takeaway:
-Use the keyboard!
-Learn the shortcuts.
Information commands:
    -pwd
    -ls
    -man
Navigation:
    -cd
File Management:
    -touch
    -mkdir
    -mv
    -cp
-Command Patterns
-Aliases

This is my first part of the How to be a Hackerman series. I hope to cover more themes like programs, Vim, Bash Scripts, Piping, Regex, more hotkeys and tips to control your shell, your editor and your OS.

Thanks for reading and let me know if you'd like me to expand on an topic of your interest.

Async Components, FileReader, and Angular

Andrew Alvarez — Sat, 21 Mar 2020 21:43:46 +0000

The problem: User input can't be trusted. When a file is uploaded to the internet, you can check on its Mime type, but can you trust it?

While developing a drag and drop interface to upload media, my partner and I architected a series of processes to reduce the load on the server-side.

We built an app that took audio and video and sent it to a google API for further processing. We didn't want the server to perform file validation since that we would need processes to deal with garbage data. We thought it might be a better idea to validate our media on the front-end to only send the right type of files.

Let's say you upload a .html file and check on its type, you'll get "text/html"; when you upload a .mp3 file you get "audio/mpeg".
So what's the problem with this? The browser is reading correctly your files! But it actually isn't.

NANI!?

If I change my audio file's extension from .mp3 to .txt, yes you'll "break" your file but you'll also be able to fool the browser as it will scan it and output "text/plain as it's Mime type.
No one wants this to happen, we need to ensure the integrity of our app.
The solution: Our Angular component needs to read the file and determine its actual content by its Magic Numbers.

/*
In my component, I have declared a method called validateMime, 
it takes a Blob type since its what we get when our files go online.
*/
export class DragAndDrop {
  validateMime(blob: Blob) {
    // Our validation implementation goes here
  }
  readAsync(blob: Blob) {
    // Our FileReader logic goes here
  }
}

Our tool to go is FileReader, a native JS object that allows us to read the file contents or the raw data buffer! You can read the specs of the FileReader object here.
To execute FileReader, you'll have to call one of its 5 methods. In this case, I'll be using .readAsBinaryString()

reader.readAsBinaryString(blob.slice(0, 4));
    reader.onload = e => {
    const mime = e.target.result.toString()
                                .split('')
                                .map(bit => 
    bit.codePointAt(0).toString(16).toUpperCase())
                                .join('');
    console.log(` - ${mime} - `);
};

Before we proceed, I must note that FileReader's methods work asynchronously, everything that happens within onload() won't be accessible on the outer scopes. We will have to change some of the component's methods. This is where async/await comes to the rescue.

readAsync(blob: Blob) {
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        resolve(e.target.result.toString()
                               .split('')
                               .map(bit => 
        bit.codePointAt(0).toString(16).toUpperCase())
                                       .join('');
      };
    reader.onerror = () => {
        reject (new Error ('Unable to read..'));
    };
    reader.readAsBinaryString(blob.slice(0, 4));
  });
}

Our method returns a promise that will either execute its reject statement if for some reason it can't read the file or it will return the resolved value if it succeeds. The blob yields an ArrayBuffer type value which we'll just slice to get the four first bytes. These will tell us the real type of the file. The method chain will transform these bytes from Unicode into a string that represents the Magic Numbers of our file.

async validateMime(blob: Blob) {
    try {
        const contentBuffer = await this.readAsync(blob);
        // Validation Process
        let isValid = false;
        acceptedMimeTypes.forEach(mimetype => {
        if ( contentBuffer === mimetype.magicNo) { isValid = true; }
    });
    return true;
    } 
    catch (err) {
      console.log(err);
    }
}

As you can see, processFile() is an async method. It will await until readAsync returns (asynchronously) a value to assign it to contentBuffer, a variable I created to compare its value to a list of the accepted Mime Types for my app. If the Mime type shows up in my list it'll return true and it will accept my file!

I hope you liked this article, feel free to give me feedback or contact me if you have any questions. I will keep posting the challenges I keep encountering when developing apps and narrate how I solved them.
Thank you for reading!