FSVDR's Blog RSS

Search items that match query

Fri, 23 Oct 2020 00:00:00 GMT

TL;DR

const items = [
  /* some items */
];

const itemsThatAreCool = items.filter(item => [item.name, item.description].join(' ').includes('cool'));

Right? Let's examine this beauty with an example ⬇️

Too Long; Read Anyway

Imagine you're working with the following data:

const phones = [
  {
    id: 'iphone-12',
    name: 'iPhone 12',
    cameras: ['Ultra Wide', 'Wide'],
    description:
      '5G. A14 Bionic. All‑new design. Ceramic Shield. Edge‑to‑edge OLED display. Night mode on every camera. All in two perfect sizes — including the new iPhone 12 mini.',
  },
  {
    id: 'iphone-12-pro',
    name: 'iPhone 12 Pro',
    cameras: ['Ultra Wide', 'Wide', 'Telephoto'],
    description:
      '5G. A14 Bionic. All‑new design. Ceramic Shield. LiDAR Scanner. A Pro camera system optimized for low light — and pushed even further on iPhone 12 Pro Max.',
  },
  {
    id: 'iphone-11',
    name: 'iPhone 11',
    cameras: ['Ultra Wide', 'Wide'],
    description:
      'A new dual‑camera system captures more of what you see and love. The fastest chip ever in a smartphone and all‑day battery life let you do more and charge less. And the highest‑quality video in a smartphone, so your memories look better than ever.',
  },
  {
    id: 'iphone-xr',
    name: 'iPhone XR',
    cameras: ['Wide'],
    description:
      'All-screen design. Longest battery life ever in an iPhone. Fastest performance. Water and splash resistant. Studio-quality photos and 4K video. More secure with Face ID. The new iPhone XR. It’s a brilliant upgrade.',
  },
];

Now let's say you want user's to be able to search for phones by name, you'd do something like this

const phones = [
  /* Same as above */
];

let searchQuery = '12';

const phonesFilteredByName = phones.filter(phone => phone.name.includes(searchQuery));

Nice, but what if later on you want users to also be able to search based on the phone's description? Do you add another condition for the return? That would get messy fast as you add lookup fields, right?

How about we compose a string with all the fields we want to lookup?

const phones = [
  /* Same as above */
];

let searchQuery = 'iPhone';

const phonesFilteredByNameAndDescription = phones.filter(phone =>
  `${phone.name} ${phone.description}`.includes(searchQuery)
);

Better, but having to type the ${} every time we add a field can be troublesome, what if it's late, we haven't slept and for some reason we forget to put a field inside ${} then we'll also be matching the word 'phone' and 'whatever field we intended to look for'. Not to mention that we'd eventually end up with a very long string that gets hard to read and could potentially lead to hours of debugging, JavaScript isn't gonna yell at us, as far as it is concerned, everything is fine.

So, a nicer syntax would be something like this

const phones = [
  /* Same as above */
];

let searchQuery = 'iPhone';

const phonesFilteredByNameAndDescription = phones.filter(phone =>
  [phone.name, phone.description].join(' ').includes(searchQuery)
);

No we don't have to worry about wrapping each field in ${}, we just add it to an array, straightforward. Then every field will be joined to a string into which we can lookup for the search query!

I think this is nicer because we now have dependency array we can easily modify to fit our needs.

Let's say we want to include the cameras array into our lookup, how do we do that?

const phones = [
  /* Same as above */
];

let searchQuery = 'Telephoto';

const phonesFilteredByNameDescriptionAndCameras = phones.filter(phone =>
  [phone.name, phone.description, ...phone.cameras].join(' ').includes(searchQuery)
);

Nice! Now the cameras will be part of our lookup string. One last thing to note here is that String.includes is case sensitive so it might me good to through in a String.toLowerCase both to the lookup string and search query 🙃

How to calculate travel distance and time

Mon, 14 Sep 2020 00:00:00 GMT

Making a case for Mapbox

Let me just say... it is no fun working with Google Maps APIs. I'm sorry, don't @ me it might be just me but the burden of working with anything Google is enough to make me roll my eyes and want to cuddle my bed pillow till the weekend.

Fortunately the Internet is a big place and there are other players in town (yes there are, just... google or even better duckduckgo them).

And when it comes to maps I've found that Mapbox is the alternative. Not only is it really easy to get started but they also have a very generous free tier for most of their services unlike (cof cof you know who).

Enough rambling, you're here for the code so let's get to it ...

Creating an account

You can skip this step if you already have an account 🙃

First of you're going to need a Mapbox account before we do anything so head over to their signup page.

Once you do that you'll receive an email to confirm your account click the big blue button and just like that you'll be ready to start coding 🎉

If everything went right you should be looking at the dashboard, it's a pretty simple UI and if you look closer you'll see that Mapbox has already created a default access token for us!

— Mapbox Dashboard

Good stuff. We could plug this token right into our app and everything would work just fine.

The Navigation Service

Now, the service we need to calculate the travel distance between geographical points is the Navigation Service, specifically we care about the Matrix API which defined by their own documentation:

The Mapbox Matrix API returns travel times between many points.

So if we pass 3 geographical points to it, say A, B and C the API will return us a ~~matrix~~ table with each and every travel combination between these points so we get the travel time from A to A, A to B, A to C, B to A, B to B and so on ...

Here's the table I ~~stole~~ borrowed from their documentation which helps me visualize this

— Navigation Matrix

Aren't we getting duplicated travels here? Isn't A to B the same as B to A? Well no, turns out the API is smart enough to understand that the path you took from A to B isn't necessarily going to be the same path you take on your way back cause... you know, lanes and/or traffic as we'll see in a bit.

The Code Dammit!

Ok so the way we interact with this API is through a GET HTTP request to https://api.mapbox.com/directions-matrix/v1/{profile}/{coordinates}.

Where profile is one of:

mapbox/driving - if you prefer to drive 🚗
mapbox/walking - if you prefer to walk 🚶‍♂️
mapbox/cycling - if you prefer to bike 🚲
mapbox/driving-traffic - if you prefer to drive and you care about the traffic ⭐

And where coordinates is a list of {longitude},{latitude} each separated by a semicolon (;). You can pass a minimum of two and a maximum of 25 if you're a busy person...

Note that it is longitude then latitude and not the other way around otherwise it's not going to work and you'll be sad 🙁.

So far I've delivered you the travel time between points but this post is about time and distance so let's keep rolling.

Another parameter we can pass to our HTTP request is annotations this tells the API what sort of matrix are we interested in and the possible values are duration for travel times (this is the default), distance for travel distances or you can use both values separated by a comma (,).

One other parameter you might want to use is approaches. See by default the travel that gets calculated doesn't care about lanes so it could be from either side of the road. Because driving on the wrong side of the lane is considered cheating, we can set its value to curb to indicate that we want to care about arriving on the right side of the road. One important thing to notice is that we need to provide a value for each geographical point so if we want to calculate the travels between three points we would pass approaches=curb;curb;curb.

With all this we have a fine request of the shape: https://api.mapbox.com/directions-matrix/v1/mapbox/driving-traffic/{coordinates}?annotations=duration,distance&approaches=curb;curb. But you know what we're missing? ~~Some tunes for the ride~~ Our access token.

Authenticating our request

We can't just go around sending random requests without some sort of authentication, that's what our access token from the dashboard comes in handy.

For the sake of this tutorial we'll stick to the default token Mapbox generated for us but when moving to real world production apps you should create specific tokens for each different project.

You'll also probably want to put your token in an environment variable before using it in your code because we don't want it to be lying around for other people to grab it and make requests on our behalf.

Now that it's all safe to use, add an access_token parameter to the request with your access token as the value (if using environment variables, which again you should you would access it with process.env.THE_NAME_OF_YOUR_VARIABLE).

Request and you shall receive

Assuming you're making this request from Node.js you could create a fetch call by plugging in some random coordinates:

const fetch = require('isomorphic-fetch'); // In order to use fetch

const origin = { lat: 19.3896346, lng: -99.2486547 };
const destination = { lat: 20.8443792, lng: -101.2292119 };

const response = await fetch(
  // Mapbox endpoint
  'https://api.mapbox.com/' +
  // The navigation matrix endpoint (not sure why it says directions here)
  'directions-matrix/v1/' + 
  // Get there by car and get there fast
  'mapbox/driving-traffic/' +
  // Our colon separated list of coordinates (remember LONGITUDE then LATITUDE)
  // we're using two points here but remember you can use up to 25
  `${origin.lng},${origin.lat};${destination.lng},${destination.lat}` +
  // We want duration and distance please
  '?annotations=duration,distance' +
  // We follow the law and drive on the right lane
  '&approaches=curb;curb' +
  // Our secret token hidden from curious eyes
  `access_token=${process.env.ACCESS_TOKEN}`
).then(response => response.json());

If everything goes right we should now have a response object with a couple properties of which we'll use:

code - The status code of the response (hopefully 200)
durations - The travel durations matrix
distances - The travel distances matrix

For this specific request we would get the following structures:

console.log(response.durations);
> {
    "durations": [
      // These are durations from point A
      [0, 15360.4], // to point [A, B]
      // These are durations from point B
      [14886.3, 0] // to point [A, B]
    ]
  }

console.log(response.distances);
> {
    "distances": [
      // These are distances from point A
      [0, 345994], // to point [A, B]
      // These are distances from point A
      [357204.4, 0] // to point [A, B]
    ]
  }

Note that the values are in seconds and meters respectively and that in each case the travel between a point and itself will always be 0. If no route is found between some given points the value will be null.

Also note that the exact values might change since we're considering traffic and well, it might be different when you check.

And so we got the travel distance and time between our origin and destination points 🎉

If you want to read more about the differences between Google Maps and Mapbox I recommend you this article.

See you next time folks! 👋

The making of: This site

Sun, 16 Aug 2020 00:00:00 GMT

We're back folks! And this time I bring all the goodies behind the development of this site, just as I promised in the last post! I gotta say tho, I thought I'd give up with this blog after the release hype so the fact that I'm still writing this is... uhm... pretty neat 👌.

But maaa, it has too look great!

Honestly I think the reason I kept pushing this site down the line is that I focused — nay, obsessed too much over the design. I wanted it to be unique, modern, playful, stylish, minimalist, brutalist, full of animations, text-over-white simple! UUUUUGHHH the possibilities burden!

Which is why early on this year, when I opened that dusty Sketch file with all the previous design iterations in it, I took a minute to see if I happened to still liked one. Could I stick to one of those designs and sget it through the finish line? 😃

No, I thought I could... but couldn't. But this time! This time I would do things right, and stick to it. I opened Dribbble, Twitter, Pinterest and every other portfolio/blog that I had liked and kept for future reference.

Over my years in college I would often help designing flyers and posters for events — I liked that, good times. It's with these small projects that I felt most creative so I figured I could try designing my site as a series of posters. Focusing heavily on typography and content would keep me out of thinking too much about colors, backgrounds and images which had been huge blockers for me in the past.

— Reminds me of a movie poster, or something

I figured "I don't really have much to say so I'll make text real big and bold to fill all that space 🙂". And I think it did the trick!

Once I felt confident with the direction of the first poster the rest of the site came easier, I don't usually design every single screen/state combination of a website — I'm too impatient for it tbh. So I kept going with the landing page and the first part of the about page with this poster-design approach and at some point the visual language became clear enough so that I could move to the code and let the rest of the site to align to it.

— Enough posters to understand the visual language

Now of course this ain't a legit design process, in terms of design I identify with this guy

— This me while "designing"

but hey, one can dream! And also, I think it didn't turn too bad if I may weight in. 🤓

The JAMstack

With the very first version of this site back in 2015 (maybe?) I went all in with vanilla JS, vanilla CSS and of course vanilla HTML — again, good times. But of course over the time the web became... a bit more complex than that.

The prior version to this (which was just a pretty work-in-progress notice) was running on pretty much the same stack except with the addition of PostCSS and my custom go-to ITCSS base styling.

This time I knew I wanted to go with Gatsby from day one. I wouldn't need a server at all, all my pages would be, well... pages and I was definitely going to avoid configuring a build tool or any kind of tooling at all for the sake of getting lost on the process. So the ease of use, performance optimizations and focus on accessibility that Gatsby provides out of the box was a no-brainer for me.

The one thing I did change halfway in was using Styled Components instead of my ITCSS-PostCSS styles. I didn't like how decoupled things felt having HTML and JavaScript already in well, JavaScript. Also, making that circular text "badge" you can see next to the title of this post was soooo cool and easy with Styled Components.

Finally, for this blog I didn't felt like using an external CMS would be too much overkill, I could get by with plain Markdown files for the posts (at least for now). Hopefully once GitHub Codespaces is out it'll be even easier to create posts on the go!

Netlify ecosystem and the serverless hype

Where do you host a Gatsby site? Well, anywhere really but I think Gatsby+Netlify is a popular choice nowadays.

Netlify's free tier along with their Build Plugins and simplified serverless functions were enough to bring me on board.

In order to boost the SEO of my site I used gatsby-plugin-feed to create an RSS feed of the blog and gatsby-plugin-sitemap and netlify-plugin-submit-sitemap to create a sitemap and submit it to search engines.

Now, I've never really dived into serverless mostly because my whole concept of it sums up to a mental image of the AWS's console which... let's be honest looks daunting to newcomers. But then I heard this Syntax.fm episode where Wes Bos describes his new website and how he used Netlify [serverless] functions to query social media data and generate Twitter and Open Graph images.

It seemed quite straightforward and I was definitely sold on the idea of automatically generated social images so that I wouldn't have to worry about that 👍

It doesn't need to be perfect...

There's still a couple of things I have planned for the site but I knew that if I waited for those I would never release this thing. So, couple of things I'm looking forward:

Using Plausible's privacy-friendly analytics — Because I would like to know how my site is performing but I'm also privacy aware — cheers 🍻
Adding i11n support — So that I can have the site in spanish as well as english and it still makes sense to search engines.
Using TinaCMS — I'd like to be able to change the Spotify songs in the /about page and other details without having to open the code but I don't really need a full-blown CMS...

Overall I'm quite happy with how things turned out here and I learned a lot in the process. It was hard to push myself through the finish line, I had to keep reminding me that web development is a never ending process, if you wait till everything is in place and perfect you'll most likely end up pushing things down the line for 5 years.

Anyhow, that's it, that's all I've got! If you're curious about the actual code you can check it out here.

Till next time, folks! 👋

It's here! Finally.

Sat, 08 Aug 2020 00:00:00 GMT

First of... welcome 😏 whoever you are, whenever you're reading. It's taken too long for this website to exist so it's nice to have someone hanging around — cheers 🍻.

Do people normally click other people's website linked on their Twitter bio and look around even though you're not looking for something specific? I do, in fact a while back I even had a lists (the Twitter kind, not like a sociopath's list of names) specifically for people's whose websites I found to be cool.

I mean I like websites... that's sort of what I do for a living. And I've always wanted one of my own, don't really knew why at the moment, it's not like I was looking for a job or anything at the beginning but anyhow, the point is that that it's been a push-down-the-line kind of a project for what? over 5 years now? 6?

And boy did I had some ideas along the road...

— I believe this one I actually coded at some point 🤔

— Don't really know where I was going with this...

— Back to the basics... but went to a bit too boring

— ... I mean... looks kind of cool

— Not bad actually but never got past the work-in-progress phase

Which brings us to this year

It's been almost 2 years now since I graduated from college and a bit more since I began my professional career as a web developer so I figured it was time for me to put myself out there.

Wether I'd like to move another job or start doing some side freelancing I'd need to have a website/portfolio to showcase my work, it was time. No more procrastinating on it.

Sure it still took me a couple of months to get this out — 6 months (!) according to the git history of the repo. But considering that I did this as side work from my real job during a pandemic and that it went through one and a half redesigns in that time frame...I'm quite happy with it and even more that it's finally out in the wild!

So, I was really hoping for this very first post to be about the technical implementation of the site, y'know all the good stuff. But I think I went too off topic now so I decided to leave that for the next one!

Gotta fill that /blog page somehow ¯\(ツ)/¯

Till next time, folks 👋

A year in TV series

Wed, 01 Jan 2020 00:00:00 GMT

Supernatural S11
Mad Men S7
Lost in Space S2
Supernatural S12
Sex Education S2
Pequeñas Coincidencias
Pequeñas Coincidencias S2
The Morning Show
Truth Be Told
The Stranger
Supernatural S13
Narcos: México S2
Servant
Hunters
I’m not okay with this
This is Us S3
The Handmaids Tale S3
The office
The office S2
The office S3
Supernatural S14
The office S4
Danny Phantom
Luis Miguel: La Serie
Ozark S3
La casa de papel
The office S5
The office S6
Danny Phantom S2
Better call Saul S5
La casa de papel S2
The office S7
La casa de papel S3
The office S8
Trying
Defending Jacob
The office S9
La casa de papel S4
Danny Phantom S3
Killing Eve
Upload
Tales from the Loop
Little Fires Everywhere
Modern Family
Modern Family S2
The Walking Dead S9
Modern Family S3
Modern Family S4
Modern Family S5
Il Processo
Recursos Inhumanos
Killing Eve S2
Billions S1
Billions S2
Historia de un crimen: La Búsqueda
Modern Family S6
Modern Family S7
The Sinner S3
Billions S3
Historia de un crimen: Colmenares
Modern Family S8
Shark Tank México S3
El pantano
Modern Family S9
Shark Tank México S4
Unsolved mysteries
Oscuro Deseo
Dark S3
Billions S4
Modern Family S10
La Jauria
Legion S3
Seinfeld
Seinfeld S2
Seinfeld S3
Killing Eve S3
The Umbrella Academy S2
Seinfeld S4
Billions S5
Dirty John: Betty Broderick
Seinfeld S5
Seinfeld S6
Seinfeld S7
Stumptown
Seinfeld S8
Seinfeld S9
Biohackers
Shark Tank México S5
Daredevil