DEV Community: David Ojeda

Reduce Google Fonts file size by more than 80%

David Ojeda — Thu, 01 Oct 2020 04:16:10 +0000

Sometimes we only need a font for a couple of words, like a logo or slogan. Why do we download the whole font file if we only need a few letters?

In this post, I'll show you how you can reduce your font file size by more than 80%. This size reduction will be more effective the fewer characters you need.

Base HTML

This is the base HTML we'll use. It contains the Roboto font and two headers. One with Roboto font-family and the other with the default font:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

</head>
<body>
  <h1 style="font-family: 'Roboto', sans-serif;">David Ojeda</h1>
  <h2>Default font</h2>
</body>
</html>

Measuring current font file size

If you open this file with your browser and open the network tab of the Developer Console, you would see this:

~657 bytes for the Google Fonts API call and ~11.1 kB for the actual Roboto font.

If you look at the HTML again, you can notice that we're only using the font for my name, David Ojeda. What if we could download only those letters? It turns out we can.

Changing the font URL

We need to change the font URL from this:

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

to this:

<link href="https://fonts.googleapis.com/css2?family=Roboto&text=David%20Ojeda" rel="stylesheet">

What's new? The &text= URL parameter. We'll only download the characters we need. Just remember, the text parameter value:

Is case-sensitive.
Needs to be URL encoded.

Measuring updated font file size

Let's measure the size of the file now:

~359 bytes for the Google Fonts API call and ~1.3 kB for the actual Roboto font. That's like 89% file reduction for the font!

Wrap up

I found this implementation in the Google Fonts documentation days ago, and I wanted to share it so more people know about it.

It saved me this 80-90% file size on my personal finance blog, and I'm sure it can help others do the same.

Thanks for reading me! 💙

Queues: A Primer

David Ojeda — Wed, 30 Sep 2020 16:49:32 +0000

Queues are a natural phenomenon in everyday life. You queue to buy food, to pay in the supermarket, or to get on a plane. But queues are also used in software to handle heavy processes.

A queue can help devs like me and you store a request for later processing. It's a common practice to use a queue to handle data exports from a site, for example.

What you'll learn

In this post I'll compare queues in software development with queues in a fast food restaurant. You'll learn:

What's a queue
Uses of a queue
Caveats of queues
Benefits of using a queue
Common services you can use

Queuing for food: First In, First Out (FIFO)

When you go to a fast food place you need to first get in line to place your order.

You wait in line until it's your turn to say whatever you're gonna have. Ideally, no one gets in the line; that would be disrespectful and will cause some complaints.

This queue operates with a FIFO principle. That means that the first person dispatched is the first to be in line. The first that gets in line is the first to get out.

You can picture each person in line as a heavy processing job request from a client to the application. An asynchronous worker processes each of these requests that are waiting in line. And by worker I mean something like a server that's not reachable by your customers.

Each of these requests should respond in the order in which they were issued. But it's not always the case.

Preparing your food: Order might change

Once you place your order, the cashier sends it to the cooks, so they can start preparing it. The orders get into another queue.

Now, imagine there's only one cooker. You ordered a triple cheeseburger with extra onions, a vanilla milkshake, and small fries. The person after you only ordered some small fries.

The cooker might say: let me serve the customer that only ordered fries first because that's quick. That puts you after that customer in the queue even though you ordered first.

In software development, queues are usually used with distributed systems. And in these type of systems the order of the elements in the queue might change.

There are special types of queues that guarantee the order, but not every queue does it. So your application must not depend on the order of the requests.

There's another problem you need to manage. What if there's more than one cooker and two or more of them start preparing the same order? It's very common for an application to have multiple workers that read the same queue.

Mistakes in food preparation: Handling idempotency

If two cooks take your order they will each prepare you what you asked for. You'll end up with two cheeseburgers instead of one. There should be a way to avoid two cooks working on the same order.

A caveat of a distributed queue is that two workers can read the same message at the same time. So we say these requests should be idempotent. That is, the same operations requested multiple times should produce the same result.

For example, a DELETE request on a REST API should delete a resource the first time it's called. This usually returns a 200 (OK) or 204 (No Content) response. The result should be the same if that same request is called a second time: the deletion of the resource.

Some systems only disable the resource instead of deleting it from the database. In that case, the result (side effect in the application) and the response (literal response from the API) will be the same.

If the system deleted the resource the first time, then you'll receive a 404 (Not found) response on the second call. Here two identical requests had the same result, but a different response.

In both cases the delete request was idempotent. Two same requests resulted in the same outcome.

Getting your food: Notifying the end user

It's common to receive a device that vibrates and lights on when your order is ready. That's how the restaurant notifies you that your order is ready for pickup.

Workers also need a way to communicate to its users. Email is a great solution since most of the processing workers do is asynchronous.

The only job of the queue is to receive and store requests until they're processed.

Why do we need queues?

Queues improve user experience

You don't want to wait in front of the cashier until your order is ready; you don't know how long will it take.

Similarly, you don't want your users to wait while looking at a loading spinner. Moreover, it can be taxing on the client-facing servers.

The HTTP request window is short. Applications close the connection between server and client when a request is taking more than 30-60 seconds, resulting in a timeout.

How can you handle a resource-intensive task that takes more than 60 seconds? You send it to a queue, and a worker in the background can take that message and process it.

Queues are language agnostic

It doesn't matter if you send a message to a queue with Python and receive it with JavaScript. The intermediary, called the message broker, will handle it.

Queues decouple your systems

With queues, you can separate concerns and allow a different service or part of your application to handle specific requests.

The messages in the queue will be waiting even if your workers fail.

Popular queue services and message brokers

You don't have to implement the queue's internal logic, it's a solved problem. You can instead use one of these popular services:

I've only used Amazon SQS, and it's fast to start working with it. It gets complicated as you dig deeper, but it's a great way to start.

What I didn't tell you

There are other factors to consider when working with queues and message brokers. The intention of this post is to only give a general overview of how the mechanism works.

To give you an idea, you need to configure and/or handle, among many others:

Retry policy
Failed messages
Security of your queues
Duration of messages in the queue
Reliability and availability of your queues and message brokers

Wrap up

Queues are a great addition to your software developer arsenal. If you need to do a resource-intensive task, a queue should be one of your options.

Thanks for reading me! 👋

**Cover image taken from unDraw

4 Time Zone Bugs I Ran Into

David Ojeda — Wed, 23 Sep 2020 16:25:48 +0000

Software development is hard. Time zones are hard. Dealing with time zones in software development? Yeah, harder.

Here are 4 places where time zones might differ; and 4 personal bug stories for each case. I'll be referring to the same app for each story, the one I work with and maintain in my day-to-day job. This app works with Mexico's City time zone.

Time zone of your app

Your app runs with a default time zone. It's usually the time zone of the server it runs on, but it can be different.

In Java, you can define the time zone of the whole application when it boots. If for some reason you don't want to work with your server's timezone, this is the place to change it.

The bug - Time in Chile off by one hour

The app shows the date of creation of an object in many places. Three of these places were showing different times; two incorrect and one correct.

One error was because I forgot to pass the user's timezone to the date formatter. Quick fix.

The second error was weird. I couldn't identify why, so I compared it with the correct one.

But the third case was only right because the date had been double parsed! Once on the server and a second time on the client (browser).

So none of the three dates were actually correct. WTF?

After some headaches, I learned that each version of Java comes with a time zone data file. This file includes the latest information on the world's time zones, and the Internet Assigned Numbers Authority (IANA) manages it.

Time zone changes happen when governments decide to apply or not to apply daylight saving times (DST).

In 2015, Chile decided to move from seasonal DST to permanent DST, and some JRE releases included this change. But then, in 2016 Chile decided to revert to how it was before; seasonal DST instead of permanent. What was the issue? The app was using one of these JRE releases with an outdated time zone data file.

You can read more about these DST issues with Java here.

Time zone of your server

The operative system defines your server's time zone. I've always used Linux for production servers, and they come with UTC as the default time zone.

If you need to change this time zone, make sure to do it before your application starts or it won't reflect the change.

The bug - App using the wrong default time zone from the server

I was migrating some processes in our build and deployment pipeline. From configuring the app with every deploy to a pre-built AWS Amazon Machine Image (AMI) with HashiCorp's Packer.

One step of the initial configuration was to change the server's time zone to America/Mexico_City, and I was aware of it. So I created a bash script that changed the time zone on the AMI we were going to use. The script worked well when I tested it on a Linux instance. No problem there.

I proceeded to use this AMI in our staging environment and neither I nor my teammates noticed something off. So, to production!

Customer's questions and complaints about dates behaving weird arrived minutes later 😥

The issue? The script that updated the server's time zone was failing silently and I missed double-checking it in the staging environment. The app wasn't using an explicit time zone, so it took the server's. And the server's time zone was UTC by default, and we needed America/Mexico_City. I fixed the script and, to make sure, updated the app's default time zone to the expected one.

Time zone of your database

You can also change your database's time zone. I use AWS Relational Database Service (RDS) and the default time zone is UTC. You can update it from the parameter group of your cluster or individual instance.

The bug - Wrong database time zone

Now I was doing a migration of our database. I anticipated myself by changing the database's time zone to America/Mexico_City because the app and server had it. Every part of the system should be in the same page, right? Wrong!

The database was perfectly okay being in UTC while the app and server were in America/Mexico_City. That's how it worked.

This bug was not as critical as the previous ones because I caught it in our staging environment.

Time zone of your users

If it wasn't enough, each one of your users can have a different time zone, and you have to take that into consideration when showing time sensitive-data.

The bug - Many of them!

I've encountered many bugs related to user's time zones:

Missing time zone in date formatter.
Incorrect time zone selection from the user.
Missing DST time zone options for users to select.
Storing dates with time zone modifications that get parsed again when retrieved.

Time zones are one of the most complicated topics you'll find while developing software. They're complex by themselves, and even more when you throw some code into the mix.

I hope these short stories can help you avoid my mistakes in the future 🙌🏼

Thanks for reading me! 💙

I finished the #100DaysOfCode challenge in 140 days, here are my thoughts

David Ojeda — Fri, 07 Aug 2020 00:00:00 +0000

I started the #100DaysOfCode challenge on March 21st and finished it today, August 7th. FINALLY! 🥳 And yeah, that's way more than 100 days 🙃

For those who don't know, the #100DaysOfCode challenge consists of coding at least one hour every day for the next 100 days. Every day during this period you also must:

Tweet your progress using the #100DaysOfCode hashtag.
Engage with at least two other people doing the challenge.

The purpose of the challenge is to help you form a habit and to meet other people doing the same. Check the full challenge description on their official page.

When I started this challenge, I was at a point in life where I was looking to improve many of my current habits and to be more active on Twitter, and the challenge was a mix of both.

I want to share some thoughts about this journey and the challenge itself since I have mixed feelings. Before I go on, I want to say that this is my perspective. The perspective from an experienced dev who already codes in its 9-5 and has multiple side projects, not all code related.

Let's get to it.

Public commit is real

Yelling out loud that you'll commit and achieve something it's a powerful way to actually do it. And the challenge starts just like that, committing in public. It can help you build a habit if you didn't have one because it creates a sense of accountability. Even if no one really cares.

A more in deep view of this fact is in SWYX Learn In Public article. Highly recommended read 👌🏼

You meet great people along the way

The challenge invites you to share and engage with other people going through the same journey, and you end up creating bonds. I want to thank them:

Alex was my accountability buddy from the very beginning. He's a humble, great developer who's constantly learning and improving his craft.

Alex ChiuFollow

Bringing ideas to life with code 🪄 | { JavaScript , TypeScript } = 👨‍💻 | Learning in public 📖 | Building for fun

Annie and I engaged in some of our tweets for the challenge, and it's been a pleasure to see her Twitter following skyrocket. Do check her out for some mind-blowing CSS illustrations 🤯
Alfredo and I are also accountability buddies. He loves DevOps related stuff and he's on his way to write consistently!

It's daunting to do anything 100 times in a row

Starting to form a habit by doing one thing, for at least one hour, for 100 days in a row, is like rolling out a snowball uphill. It will eventually grow so big that it will crush you.

When I formed my habit of working out, it didn't start by saying: "I'm gonna exercise for one hour for the next 100 days". That's exactly how you don't create a habit.

You'll probably start highly motivated the first few weeks, but believe me, life gets in the way. You'll eventually start to fall off because it's a HUGE commitment. And it's especially hard if you are just starting out as a developer.

It's like starting to run before you crawl.

Instead, to create my exercise habit I said: "I'm gonna exercise for at least five minutes, three times a week". The secret is that five minutes is more manageable, and for that reason more likely to happen.

Once you start, you'll find yourself doing more than five minutes because, well, you're already there with your gym clothes on. You build up from there, and now the snowball rolls downhill.

Missing one day is not the end of the world

I wish this previous sentence was part of the challenge's website.

Whenever I couldn't find a time slot to work on the challenge I felt anxious. Even if no one would even notice that I missed one day. Not even your all-time-friends: the bots.

But you already committed publicly to the challenge! You feel pressured. And many days I would open my computer, do some silly change to my code, and tweet about it. Damn, I even felt stupid sharing changes so small that were nowhere near the 1-hour commit I should be doing:

David Ojeda 🇲🇽

@davidojedal

Day 66 of #100DaysOfCode

Today I only added a small gradient to my social links 😅

I'll probably finish this section tomorrow 💪🏼

06:41 AM - 28 May 2020

That being said, take a break when needed. Nothing's gonna happen if you miss one or a couple of days. It's easy to burnout if you're also doing many other things at once. Your health is more important.

I learned A LOT

Not all 100 days of the challenge were related to a single subject or programming language; it was a huge mix of software-related work. Here are some things I did and learned during this journey.

Design

This is one of my weakest points, so I started with it. Color palettes, Figma and Tailwind CSS:

David Ojeda 🇲🇽

@davidojedal

Day 4 of #100DaysOfCode

- Settled on a color palette for my side-project: Indigo and green as primary/accent colors.

I don't know much about design, so I will change them later if not convinced- already tried four different palettes 😢. Dark theme colors still pending 🌑

16:07 PM - 24 Mar 2020

Nina, a writing app (side project)

A web app to help me standardize my writing process:

Blog post writing app demo

David Ojeda ・ Mar 28 '20 ・ 1 min read

#showdev #writing

Udacity's Front End Developer Nanodegree

I finished it in less than a month to take advantage of a discount 😁:

David Ojeda 🇲🇽

@davidojedal

Day 26 of #100DaysOfCode

I graduated from @udacity's front end nanodegree 👨🏼‍🎓🥳

It was a nice refresher of SCSS, JavaScript, and Webpack. I learned a lot! Thanks Udacity for this free month 🤘🏼

04:11 AM - 17 Apr 2020

AWS CDK

I started another Udacity's nanodegree because they gave me another free month, this one was for DevOps. I couldn't finish it within the free month so I dropped from it, but I managed to learn anyways:

David Ojeda 🇲🇽

@davidojedal

Day 49-51 of #100DaysOfCode

Managed to deploy a web app using the #AWS CDK.

71 lines of TypeScript ➡️ 773 lines of CloudFormation template 🤯

The app template includes: VPC, S3 bucket, ASG, launch configuration, ALB, custom user data, IAM role and security group 🔐

00:13 AM - 12 May 2020

Personal blog re-design

It was time for a new design for my personal blog, and I wanted to try Eleventy for a while:

David Ojeda 🇲🇽

@davidojedal

Day 83 of #100DaysOfCode

New blog design is finally out!! 🥳

Check it at davidojeda.dev

I suck at design btw 😅 It's missing many details, but I needed to release it to continue creating content.

It looks OK in mobile. It's missing animations on table/desktop size 👀

06:23 AM - 25 Jun 2020

Personal finances blog re-design

I also have a personal finance blog in Spanish, it's called Perro Dinero 🐕💰. I use Squarespace because at the beginning all I wanted to do was to focus on writing. Now that I have the habit, I want more freedom, so I'm moving to Eleventy too:

David Ojeda 🇲🇽

@davidojedal

Day 97 of #100DaysOfCode

Still migrating my blog posts to Markdown 😅

Also did some minor style changes to my blog; liking it a lot so far!

05:40 AM - 05 Aug 2020

Enjoy the journey

Engage and learn from others. I believe that's the most valuable takeaway of this challenge.

The rules and hashtag encourage you to comment on other's people work; positive vibes only 🤗. You meet new people, you learn from them, you expand your network. Do what you like, slow the pace if needed, but always have fun and enjoy the process.

Closing thoughts

The #100DaysOfCode challenge is a great initiative for new developers, it can help them to:

Create a coding habit.
Meet new people.
Learn new languages.
Showcase their work.

And the challenge is more than just coding, it's about sharing and community ❤️

I couldn't keep the 100 days streak or something even close because I already code every weekday. There were times when I didn't want to code on weekends, I wanted to disconnect. That's totally fine for me, but it didn't stop my anxiety.

So, was a great experience? It was!

If I went back in time would I do it again? I would!

Am I gonna do round 2? Not at all.

Do I recommend it?

If you're starting out as a developer or want to create a side project or habit and you need public accountability, go for it!

If you're an experienced developer with an already ongoing side project, the challenge might not be the best place to put your efforts on.

Thanks a lot for reading me, and I hope these words can help you through your journey, be it that you're already on it or planning to start 👋

Blog post writing app demo

David Ojeda — Sat, 28 Mar 2020 18:08:52 +0000

Hello Devs 👋🏼

I want to showcase an app I've been working on for the past few weeks. It aims to solve the pains I have when writing my blog posts:

I can't remember the Markdown syntax to create a link or image. Is it () or [] first? 🤔
Different post destinations use different formats; HTML, Markdown, etc.
I don't like to use apps that don't respect my privacy, e.g., Grammarly.

I made a video tour of my work so far; bare with me please since I'm terrible at video 😅

A brief summary:

A blog post writing app to write your content once, and publish it anywhere you want.

Main features:

No specific syntax required, write with common text processor tools 👌🏼.
Grammar and insensitive checks out of the box; nothing leaves your browser 🖍.
Automatic browser storage to avoid losing your content 🔄.
Easy and intuitive image uploads 🌠.
Post directly to DEV.to as a draft 😱.
Export as Markdown or HTML ⬇️.

I'd like for this app to also help me follow a template or style, which I'm still trying to find. I'll see how to add that in the near future.

Any feedback is really appreciated! 🙏🏼 And if you want to try it out, let me know!

UPDATE: My app has a name! It's called Nina, like my dog 🐕.

Thanks a lot 💙

AWS S3: The Basics

David Ojeda — Thu, 26 Mar 2020 18:56:39 +0000

Disclaimer: This is the second revision of a post I did before about this same topic. I feel that I could improve it, and now really commit to expanding on it in a series.

Storing and downloading files and data is a common activity for most applications. Where do you centralize this information? Amazon Simple Storage Service (S3) is a great option!

In this post we'll learn the following:

What Amazon S3 is.
How it works at a high level.
Why you might need it.

Let's get to it!

What is S3?

S3 is the object storage solution of Amazon Web Services (AWS) to reliably store and retrieve data. Some concrete examples of things you can store include:

Your entire static web site:
- HTML, CSS, JS
Assets for your apps for later retrieval through a Content Delivery Network:
- Images, videos
Build files to keep a history and implement rollbacks:
- .zip, .war
Data exports for your customers:
- CSV, XLS, JSON
Logs for later analytics processing:
- .log, .txt

S3 is also one of the most used services of AWS since it provides integrations with many of its other offerings.

How is data stored?

S3 stores our data as objects inside buckets. You can see buckets as a top-level directory on your drive, followed by a key, which is the path to our object.

Once we have objects in our buckets, we can retrieve them in many different ways. The following are the most common:

From the AWS console.
With the AWS SDKs.
Through the REST API.
With a signed URL.

We'll talk about each one in a different post.

Now, in terms of security, you probably don't want all your files to be publicly available. Data leaks are common, and it happens because customers leave their S3 buckets public.

S3 allows us to create policies and rules to explicitly define who has access to each bucket and/or object in our account. The available options to restrict/allow access are overwhelming and often confusing, even to experienced people, that's why you see many data leaks.

I will not dive into the permissions options in this post. Right now, our takeaway is that you can, somehow, restrict access to your data.

S3 Consistency model

A consistency model is a set of rules that, if followed, guarantee consistent results of reading, writing and/or updating your data.

S3's consistency model is called Read-after-Write consistency. For example, if you issue a PUT request to create an object on a bucket, the next GET request will ALWAYS have the desired object.

However, if you try to issue requests in the following order, immediately one after the other:

GET, when the object doesn't exist
PUT
GET

You MIGHT not found the desired object. The consistency model when issuing the request in this order is now called eventual consistency. In other words:

Read-after-Write consistency:

PUT /my-bucket/photo.png -> 200 ok
GET /my-bucket/photo.png -> 200 ok

Eventual consistency:

GET /my-bucket/photo.png -> 404 not found
PUT /my-bucket/photo.png -> 200 ok
GET /my-bucket/photo.png -> 404 not found

Some changes made to your S3 buckets need time to propagate and replicate through AWS servers. For example, when you delete an object you also get eventual consistency; you MIGHT see an object listed on your bucket even though you already deleted it a couple of seconds ago.

Why do I need S3?

If you need to store files or data that doesn't fit on a database, and you need them to be available from the internet, you probably need a solution like S3.

Why S3 specifically? Here are some reasons:

Virtually unlimited storage space.
Stored objects availability is 99.99% by default (We'll talk more about this in another post).
Objects' tight access restrictions depending on security requirements.
Pay for what you use: space occupied and requests.
Integration with most of the other AWS services.
Low entry barrier.

S3 has many more interesting features. The ones mentioned before are the ones I consider most important.

Wrap up

Whenever you are evaluating a storage solution to use, S3 will probably be on the top three. It's a highly secure, available, and performant service that can solve most of your storage problems.

In the next post we'll create our first buckets and objects with S3. Also, we'll cover how to properly secure them 🔐. Stay tuned!

Thanks for reading me 💜.

Enable "Ignore load balancer 4xx errors" health rule on AWS Elastic Beanstalk using .ebextensions

David Ojeda — Fri, 20 Mar 2020 00:50:17 +0000

If you are an Elastic Beanstalk (EB) user, you are probably aware of a frequently requested feature that was released on July 25, 2018: To ignore application 4xx errors when determining your environment's health. It's was a new EB health rule that ignores 400-499 HTTP status codes when alerting if your environment instances are having trouble 🏥.

It is common for applications to receive many 4xx errors, for example, due to:

Client's API integrations using invalid credentials.
Client-side test tools.
Broken links that create 404 responses.

I started to use this feature since the moment it was released.

Today I logged in into my EB console and switched the design to the latest version of the console. Everything okay. Then, as I was exploring the new console, I noticed a new configuration that was not previously available: To ignore load balancer 4xx errors.

In this post, I will show you, through a story, how to enable this feature using .ebextensions, because, infrastructure-as-code, you know 🤓. The funny part, I can't seem to find the documentation anywhere on AWS. Never happened before, right? 🙃.

Follow along!

Digging through the docs 🗂

The first thing I do when trying to configure this new feature is: go to the docs page where the almost identical feature is documented, that is, the ignore application 4xx errors. I found that is the same page as it was before, with no extra information about a load balancer health rule. Citing the docs:

Currently, this is the only available enhanced heath rule customization. You can't configure enhanced health to ignore HTTP errors returned by an environment's load balancer, or other HTTP errors in addition to 4xx.

Liars! Just kidding 😝

Without luck on this doc page, I proceeded to look somewhere else:

Went through the EB release notes to see if I missed the announcement. No luck.
Went to the EB public roadmap and found nothing there either.
Asked on Twitter, but since no one follows all I got was a response from AWS support to look at their forum. Go follow me on Twitter! 👀.
Went to the EB forums and only found people asking how to work around the fact that there was no feature to ignore load balancer 4xx errors 🤦🏻‍♂️.
Asked a question in StackOverflow and got a comment saying that I should create a support ticket.

What next❓

I had already searched through a lot of docs without any progress. I posted the question on Twitter and StackOverflow, and I wasn't expecting any response soon. I thought about trying to guess the new field names and do a try-error session.

My current configuration document looks like this:

{
  "Rules": {
    "Environment": {
      "Application": {
        "ApplicationRequests4xx": {
          "Enabled": false
        }
      }
    }
  },
  "Version": 1
}

If I were the software developer that created this feature, how would I call the new field? Some options:

LoadBalancerRequests4xx
ALBRequests4xx
ELBRequests4xx

But, should they be nested under "Application" or should it be another high-level field? By this time I was already hungry, so I went to cook and eat 👨🏻‍🍳🍲

Enlightenment! 🔮

Taking a break helps, you should consider it in your daily routine. Back to the topic...

I realized that even though I can't find a way to configure this feature through code, I can do it directly in the console. This would only be temporary because the environments re-create themselves on each deploy- any new environment would have this feature disabled.

And here is where I got an idea💡 What if I:

Enable the feature on the console.
Save the environment configuration as an EB Saved Configuration.
Retrieve it with the EB CLI to see how the field is called at an API level.

That's exactly what I did. Once the configuration was saved, I retrieved it:

$ eb config get NAME_OF_MY_CONFIGURATION

and 💥, the configuration showed itself:

{
  "Rules": {
    "Environment": {
      "ELB": {
        "ELBRequests4xx": {
          "Enabled": false
        }
      },
      "Application": {
        "ApplicationRequests4xx": {
          "Enabled": false
        }
      }
    }
  }
}

There was a high-level field called "ELB", and a property "ELBRequests4XX"; I was not that erred 👨🏻‍💻.

I added those new fields to my .config file on the .ebextensions folder and everything worked as expected 👏🏼 Here is the final .config file I used:

option_settings:
  - namespace: aws:elasticbeanstalk:healthreporting:system
    option_name: ConfigDocument
    value: {
"Rules": {
  "Environment": {
    "ELB": {
      "ELBRequests4xx": {
        "Enabled": false
      }
    },
    "Application": {
      "ApplicationRequests4xx": {
        "Enabled": false
      }
    }
  }
},
"Version": 1
}

Wrap up 🔄

I can't imagine how complex is to add a feature to a system as big as AWS while maintaining all the docs updated. I don't blame them.

Nonetheless, we figured out at the end 🙌🏼. In short, to configure your EB environments to ignore load balancer 4xx errors, you need to add the previous .config file to your .ebextensions folder and deploy a new version.

Maybe the docs are updated by the time you read this, and the story will not be that fun 🙃 Anyhow, it was a blast to write.

I hope you enjoyed it. Thanks for reading me 💙

What are you learning or planning to learn next? 📚

David Ojeda — Wed, 05 Feb 2020 23:14:44 +0000

Are you struggling with something specific?

Copy to clipboard button with Stimulus 2.0 (Beta)

David Ojeda — Tue, 28 Jan 2020 00:46:41 +0000

Stimulus is a JavaScript framework developed by a team at Basecamp, and it aims to augment your existing HTML so things work without too much "connecting" code.

Contrary to other frameworks, Stimulus doesn't take over your front-end, so you can add it without too much hassle to your already running app.

Its documentation is very clear and digestible. Included in its handbook is an example of building a clipboard functionality, which I recommend you go through if you are trying Stimulus for the first time.

Right now we are replicating that functionality and adding a couple more things using a development build specified in this Pull Request (PR)

The Values and Classes APIs #202

sstephenson posted on Nov 02, 2018

This pull request introduces two new APIs to Stimulus: Values and Classes. These APIs are designed to improve upon, and ultimately obviate, the current Data Map API. We plan to ship them together in the upcoming Stimulus 2.0 release.

Values

Most uses of the Data Map API in Basecamp fall under the following categories:

Storing small strings, such as URLs, dates, or color values
Keeping track of a numeric index into a collection
Bootstrapping a controller with a JSON object or array
Conditioning behavior on a per-controller basis

However, the Data Map API only works with string values. That means we must manually convert to and from other types as needed. The Values API handles this type conversion work automatically.

Value properties

The Values API adds support for a static values object on controllers. The keys of this object are Data Map keys, and the values declare their data type:

export default class extends Controller {
  static values = {
    url: String,
    refreshInterval: Number,
    loadOnConnect: Boolean
  }

  connect() {
    if (this.loadOnConnectValue) {
      this.load()
    }
  }

  async load() {
    const response = await fetch(this.urlValue)
    // ...
    setTimeout(() => this.load(), this.refreshIntervalValue)
  }
}

Supported types and defaults

This pull request implements support for five built-in types:

Type	Serialized attribute value	Default value
Array	`JSON.stringify(array)`	`[]`
Boolean	`boolean.toString()`	`false`
Number	`number.toString()`	`0`
Object	`JSON.stringify(object)`	`{}`
String	Itself	`""`

Each type has a default value. If a value is declared in a controller but its associated data attribute is missing, the getter property will return its type's default.

Controller properties

Stimulus automatically generates three properties for each entry in the object:

Type	Kind	Property name	Effect
Boolean, Number, Object, String	Getter	`this.[name]Value`	Reads `data-[identifier]-[name]-value`
Array	Getter	`this.[name]Values`	Reads `data-[identifier]-[name]-values`
Boolean, Number, Object, String	Setter	`this.[name]Value=`	Writes `data-[identifier]-[name]-value`
Array	Setter	`this.[name]Values=`	Writes `data-[identifier]-[name]-values`
Boolean, Number, Object, String	Existential	`this.has[Name]Value`	Tests for presence of `data-[identifier]-[name]-value`
Array	Existential	`this.has[Name]Values`	Tests for presence of `data-[identifier]-[name]-values`

Note that array values are always pluralized, both as properties and as attributes.

Value changed callbacks

In addition to value properties, the Values API introduces value changed callbacks. A value changed callback is a specially named method called by Stimulus whenever a value's data attribute is modified.

To observe changes to a value, define a method named [name]ValueChanged(). For example, a slideshow controller with a numeric index property might define an indexValueChanged() method to display the specified slide:

export default class extends Controller {
  static values = { index: Number }

  indexValueChanged() {
    this.showSlide(this.indexValue)
  }

  // ...
}

Stimulus invokes each value changed callback once when the controller is initialized, and again any time the value's data attribute changes.

Even if a value's data attribute is missing when the controller is initialized, Stimulus will still invoke its value changed callback. Use the existential property to determine whether the data attribute is present.

Classes

Another common use of the Data Map API is to store CSS class names.

For example, Basecamp's copy-to-clipboard controller applies a CSS class to its element after a successful copy. To avoid inlining a long BEM string in our controller, and to keep things loosely coupled, we declare the class in a data-clipboard-success-class attribute:

<div data-controller="clipboard"
     data-clipboard-success-class="copy-to-clipboard--success">

and access it using this.data.get("successClass") in the controller:

this.element.classList.add(this.data.get("successClass"))

The Classes API formalizes and refines this pattern.

Class properties

The Classes API adds a static classes array on controllers. As with targets, Stimulus automatically adds properties for each class listed in the array:

// clipboard_controller.js
export default class extends Controller {
  static classes = [ "success", "supported" ]

  initialize() {
    if (/* ... */) {
      this.element.classList.add(this.supportedClass)
    }
  }

  copy() {
    // ...
    this.element.classList.add(this.successClass)
  }
}

Kind	Property name	Effect
Getter	`this.[name]Class`	Reads the `data-[identifier]-[name]-class` attribute
Existential	`this.has[Name]Class`	Tests whether the `data-[identifier]-[name]-class` attribute is present

Declarations are assumed to be present

When you access a class property in a controller, such as this.supportedClass, you assert that the corresponding data attribute is present on the controller element. If the declaration is missing, Stimulus throws a descriptive error:

If a class is optional, you must first use the existential property (e.g. this.hasSupportedClass) to determine whether its declaration is present.

Unifying target attributes

We've made a change to the target attribute syntax to align them with values and classes, and also to make the controller identifier more prominent by moving it into the attribute name.

The original syntax is:

<div data-target="[identifier].[name]">

and the updated syntax is:

<div data-[identifier]-target="[name]">

The original syntax is supported but deprecated

Stimulus 2.0 will support both syntaxes, but using the original syntax will display a deprecation message in the developer console. We intend to remove the original syntax in Stimulus 3.0.

Try it out in your application

Update the Stimulus entry in package.json to point to the latest development build:

"stimulus": "https://github.com/stimulusjs/dev-builds/archive/b8cc8c4/stimulus.tar.gz"

View on GitHub

It includes new APIs that will be released with version 2.0 of the framework, so they are not yet available with the current stable production release.

What are we building?

A one-time password "copy to clipboard" button what wraps the DOM Clipboard API.

You can access the final working version on Glitch:

Starting off

First, we are creating our base HTML where the one-time password will be and the actual button to copy it:

<div>
  <label>
    One-time password:
    <input type="text" value="fbbb5593-1885-4164-afbe-aba1b87ea748" readonly="readonly">
  </label>

  <button>
    Copy to clipboard
  </button>
</div>

This doesn't do anything by itself; we need to add our Stimulus controller.

The controller definition

In Stimulus, a controller is a JavaScript object that automatically connects to DOM elements that have certain identifiers.

Let's define our clipboard controller. The main thing it needs to do? Grab the text on the input field and copy it to the clipboard:


(() => {
  const application = Stimulus.Application.start();

  application.register("clipboard", class extends Stimulus.Controller {
    // We'll get to this below
    static get targets() {
      return ['source']
    }

    copy() {
      // Here goes the copy logic 
    }
  });

})();

Now, this is a valid controller that doesn't do anything because it's not connected to any DOM element yet.

Connecting the controller

Adding a data-controller attribute to our div will enable the connection:

<div data-controller="clipboard">

[...]

Remember the static get targets() from above? That allows us to access DOM elements as properties in the controller.

Since there is already a source target, we can now access any DOM element with the attribute data-clipboard-target="source":

[...]

<input data-clipboard-target="source" type="text" value="fbbb5593-1885-4164-afbe-aba1b87ea748" readonly="readonly">

[...]

Also, we need the button to actually do something. We can link the "Copy to clipboard" button to the copy action in our controller with another identifier: data-action="clipboard#copy". The HTML now looks like this:

<div data-controller="clipboard">
  <label>
    One-time password:
    <input data-clipboard-target="source" type="text" value="fbbb5593-1885-4164-afbe-aba1b87ea748" readonly="readonly">
  </label>

  <button data-action="clipboard#copy">
    Copy to clipboard
  </button>
</div>

Our controller is now automatically connected to the DOM, and clicking the copy button will invoke the copy function; let's proceed to write it.

The copy function

This function is essentially a wrapper of the DOM Clipboard API. The logic goes like this:

[...]

copy() {
  this.sourceTarget.select();
  document.execCommand('copy');
}

[...]

We take the source target we defined earlier, our text input that is, select its content, and use the Clipboard API to copy it to our clipboard.

At this point, the functionality is practically done! You can press the button and the one-time password is now available for you on your clipboard.

Moving further

The copy button works now, but we can go further. What if the browser doesn't support the Clipboard API or JavaScript is disabled?

If that's the case, we are going to hide the copy button entirely.

Checking API availability

We can check if the copy command is available to us by doing this:

document.queryCommandSupported("copy")

One of the best places to check this is when the Stimulus controller connects to the DOM. Stimulus gives us some nice lifecycle callbacks so we can know when this happens.

We can create a connect function on our controller and it will be invoked whenever this controller connects to the DOM:

[...]

connect() {
  if (document.queryCommandSupported("copy")) 
    // Proceed normally
  }
} 

[...]

One way to hide/show the copy button depending on the API availability is to initially load the page with the button hidden, and then displaying it if the API is available.

To achieve this we can rely on CSS:

.clipboard-button {
  display: none;
}

/* Match all elements with .clipboard-button class inside the element with .clipboard--supported class */
.clipboard--supported .clipboard-button {
  display: initial;
}

Our button is now hidden from the beginning, and will only be visible when we add the .clipboard--supported class to our div.

To do it, we modify the connect lifecycle callback.

Here is where we can start to see major differences from this latest development version. With the actual production version you would need to specify the CSS class in the controller, effectively doing this:

[...]

connect() {
  if (document.queryCommandSupported("copy")) 
    this.element.classList.add('clipboard--supported');
  }
} 

[...]

There is a new, better way to achieve it.

Classes API

Now, CSS classes can be actual properties of the controller. To do so, we need to add some identifiers to our HTML and add a new array to our controller:

<div data-controller="clipboard" data-clipboard-supported-class="clipboard--supported" class="clipboard">

[...]

[...]

application.register("clipboard", class extends Stimulus.Controller {

[...]

  static classes = ['supported']

  connect() {
    if (document.queryCommandSupported("copy")) 
      this.element.classList.add(this.supportedClass);
    }
  } 
[...]

Great! Now we can access our supported class string from our controller with this.supportedClass. This will help keep things loosely coupled.

The clipboard real-life example from Stimulus' handbook ends here. Now, to show the other newest additions and use the Classes API once more, we're adding the following functionality:

A new style to the "Copy to clipboard" button once it has been clicked
A refresh interval for the one-time password. This will generate a new password every 2.5 seconds
A data attribute to keep track of how many times the password has been generated

Values API

This, along with the Classes API, is one of the new additions to Stimulus. Before this API you would need to add arbitrary values to your controller with the Data Map API, that is, adding data-[identifier]-[variable-name] to your DOM element, and then parsing that value in your controller.

This created boilerplate such as getters and setters with calls to parseFloat(), parseInt(), JSON.stringify(), etc. This is how it will work with the Values API:

<div data-controller="clipboard" data-clipboard-supporte-class="clipboard--supported" data-clipboard-refresh-interval-value="2500" class="clipboard">

[...]

[...]

application.register("clipboard", class extends Stimulus.Controller {

[...]

  static values = {
    refreshInterval: Number
  }

  connect() {
    if (document.queryCommandSupported("copy")) 
      this.element.classList.add(this.supportedClass);
    }
    // Access refreshInterval value directly
    this.refreshIntervalValue; // 2500
  } 
[...]

Accessing your controller values is now cleaner since you don't need to write your getters and setters, nor do you need to parse from String to the type you need.

Moving forward, let's write the one-time password refresh.

Implementing password generation

We're going to define a new function to create a new random password. I grabbed this random UUID generator snippet from the internet:

([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));

Adding it to our Stimulus controller:

  connect() {
    if (document.queryCommandSupported("copy")) 
      this.element.classList.add(this.supportedClass);
    }
    if(this.hasRefreshIntervalValue) {
          setInterval(() => this.generateNewPassword(), this.refreshIntervalValue)  
    } 
  } 

  // copy function

  generateNewPassword() {
    this.sourceTarget.value = ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
  }
[...]

We use setInterval to refresh our password text field each 2500ms since that's the value we defined in the DOM.

Our refresh feature is now working! Some things still missing:

Add new style when copy button is clicked
Keep track of how many times a password is generated

Giving all we have learned so far, this is what's need to be done:

Add a new CSS class to the stylesheet, DOM element, and controller
Add this new class when the button is clicked, and remove it when the password is refreshed
Add to a counter when the password refreshes

This is how it will look at the end:

/* CSS */

.clipboard-button {
 display: none;
}

.clipboard--supported .clipboard-button {
  display: initial;
}

.clipboard--success .clipboard-button {
  background-color: palegreen;
}

<!-- HTML -->

<div data-controller="clipboard" 
     data-clipboard-refresh-interval-value="2500"
     data-clipboard-supported-class="clipboard--supported" 
     data-clipboard-success-class="clipboard--success"      
     data-clipboard-times-generated-value="1" 
     >

      <label>
        One-time password: <input data-clipboard-target="source" type="text" value="fbbb5593-1885-4164-afbe-aba1b87ea748" readonly="readonly">
      </label>

      <button data-action="clipboard#copy"               
              class="clipboard-button" >
        Copy to Clipboard
      </button>

    </div>

 // JavaScript

 (() => {
    const application = Stimulus.Application.start()

    application.register("clipboard", class extends Stimulus.Controller {

      static get targets() {
        return ['source']
      }

      static values = {              
        refreshInterval: Number,
        timesGenerated: Number
      }

      static classes = ['supported', 'success'];

      connect() {                 
        if (document.queryCommandSupported("copy")) {
          this.element.classList.add(this.supportedClass);                
        }                            
        if(this.hasRefreshIntervalValue) {
          setInterval(() => this.generateNewPassword(), this.refreshIntervalValue)  
        } 
      }


      copy() {              
        this.sourceTarget.select();
        document.execCommand('copy');
        this.element.classList.add(this.successClass);
      }

      generateNewPassword() {              
        this.sourceTarget.value = ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
          (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));     
        this.element.classList.remove(this.successClass);
        this.timesGeneratedValue++;
      }                  

      // NEW! Read about it below
      timesGeneratedValueChanged() {              
        if(this.timesGeneratedValue !== 0 && this.timesGeneratedValue % 3 === 0) {
          console.info('You still there?');
        }
      }

    });

 })();

Apart from what we've already discussed about the Values API, there is also something new: Value changed callbacks.

These callbacks are called whenever a value changes, and also once when the controller is initialized. They are connected automatically given we follow the naming convention of [valueName]ValueChanged().

We use it to log a message each time the password has been refreshed three times, but they can help with state management in a more complex use case.

Wrapping up

I've created multiple Stimulus controllers for my daily job, and I must say that I always end up pleased with the results. Stimulus encourages you to keep related code together and, combined with the additional HTML markup required, ends up making your code much more readable.

If you haven't tried it yet, I highly recommend going for it! It offers a different perspective, one of magic 🧙🏻‍♂️.

Thanks for reading me 👋🏼.

25 Days of Serverless - Day 02

David Ojeda — Wed, 04 Dec 2019 05:38:23 +0000

Cover image taken from Microsoft's 25 Days of Serverless repo

It's time for the second post of this series, hence the solution to the second challenge of the 25 Days of Serverless! Let's get to it 💪🏼.

Challenge 2: Task Scheduler ☕️

Here is the description from their GitHub repo:

Lucy's Dilema

Today we find ourselves in Stockholm, where a little girl named Lucy needs our help!

Every December 13th, Lucy is tasked with wearing a crown with six lit candles and delivering coffee to all of her family members — her mother, father, sister, and brother. Each candle only lasts ten minutes before burning out, and she needs to be careful to keep the candles lit during the delivery time!

Lucy is somewhat forgetful, though, and the stolen servers mean Lucy's usual reminder app isn't working! With only a few weeks to go before her big night, Lucy is worried how she'll remember everything she needs to do and keep her timing in order. She thought about using sticky notes with color codes to remind her of the things she needs to do, but what if they get mixed up? How can she optimize her tasks using serverless technology?

It takes Lucy 25 minutes to make a large pot of coffee that will serve everyone, and about four minutes to deliver two cups of coffee (remember that she only has two hands to deliver them!). As mentioned, the candles will need to be relit every ten minutes.

Create a task scheduler that will tell Lucy exactly when she should relight candles, pour coffee into cups, and deliver batches of coffee. How you want to notify Lucy is up to you: maybe you can send her an SMS via Twilio, or build a webapp that uses WebSockets and browser notifications?

Then there is a section with tips on when to notify what:

8:00 AM - start the coffee, set out 4 cups

8:25 AM - pour two cups

8:30 AM - light the candles

8:35 AM - deliver the coffee to Mom and Dad

8:39 AM - return to kitchen, fill two more cups

8:40 AM - relight the candles

8:45 AM - deliver the coffee to Sister and Brother

8:49 AM - return to kitchen, take a break!

My solution

Following the same path as the previous challenge, we're using the AWS SAM CLI to create a serverless app. This time the following services are used:

Lambda
CloudWatch Events
Simple Notification Service (SNS)
Identity Access Management (IAM) Roles
CloudFormation

Creating the app

We created an app with a quick start template again, only to have the file structure ready to go ✅.

Resources

All resources are defined on the template.yaml file. Let's first go through the Lambda serverless function definition:

25DaysOfServerlessDay02:
  Type: AWS::Serverless::Function
  Properties:
    CodeUri: day-02/
    Handler: app.lambdaHandler
    Runtime: nodejs12.x
    Role: !GetAtt 25DaysOfserverlessDay02Role.Arn
    Events:
      day02:
        Type: Schedule
        Properties:
          Schedule: cron(0,25,30,35,39,40,45,49 7 13 12 ? *)
          Name: day-02-schedule
          Description: Schedule to remember when to serve coffee
          Enabled: True

The values that are different from the previous challenge are the Role and Events.

The Role value uses a CloudFormation function to get the ARN of an IAM role that we're going to create in this same template.yaml file; we'll get to that in a little bit.

This role is the one that the Lambda function will be allowed to assume and it's needed for SNS.

The Event is where we define the CloudWatch event. Remember, from the tips above, that we want to notify Lucy in specific minutes of the hour. CloudWatch allows us to define a schedule using a cron expression so we can run this Lambda function on those required minutes. Here is the expression:

0,25,30,35,39,40,45,49 7 13 12 ? *

You can check the AWS specifics of the cron format here. To be sure on what dates this cron expression will run, you can go to the AWS Console, on the CloudWatch Events > Rules section:

By the way, our cron expression runs on the 7th hour since AWS works with UTC times, and Stockholm's timezone is UTC + 1:

That will do for the Lambda function. The other resource is the IAM role used to run the function. Here is its definition:

  25DaysOfserverlessDay02Role:
    Type: AWS::IAM::Role
    Properties: 
      AssumeRolePolicyDocument: '{
          "Version": "2012-10-17",
          "Statement": [
            {
              "Effect": "Allow",
              "Principal": {
                "Service": "lambda.amazonaws.com"
              },
              "Action": "sts:AssumeRole"
            }
          ]
        }'
      Description: Allow to send SMS through SNS
      ManagedPolicyArns: 
        - arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole                      
      Policies:
        - PolicyName: sns_allow_send_sms
          PolicyDocument:
            Version: 2012-10-17
            Statement:
              - Effect: Allow
                Action: 'sns:Publish'
                Resource: '*'
      RoleName: 25DaysOfserverlessDay02Role

There are three important keys here: AssumeRolePolicyDocument, ManagedPolicyArns, and Policies.

The first, AssumeRolePolicyDocument specifies the trust policy associated with this role, in other words, it defines which entities can assume the role. In this case, the Lambda service.

Next, the ManagedPolicyArns is a list of policies already managed by AWS that you can attach to this new role. The specified policy gives basic execution permissions to our function. You can look for these policies on the AWS Console, under the IAM service:

Finally, the Policies section is a custom policy defined by us that allows our role to publish text messages using SNS.

The Lamda function code

Now the actual code solution for the challenge 👀 We start by getting the minute when the function was called. We can safely assume that it's running on one of the specified minutes since that's what we defined in the cron schedule:

let minutes = new Date(event.time).getMinutes();

let keyMinutes = {
  0: 'Start the coffee, set out 4 cups',
  25: 'Pour two cups',
  30: 'Light the candles',
  35: 'Deliver the coffee to Mom and Dad',
  39: 'Return to kitchen, fill two more cups',
  40: 'Relight the candles',
  45: 'Deliver the coffee to Sister and Brother',
  49: 'Return to kitchen, take a break',
};              
let smsPayload = keyMinutes[ minutes ] || '';

Here is a JSON example of the event object used at the beginning:

{
  "id": "cdc73f9d-aea9-11e3-9d5a-835b769c0d9c",
  "detail-type": "Scheduled Event",
  "source": "aws.events",
  "account": "123456789012",
  "time": "1970-01-01T00:39:00Z",
  "region": "us-east-1",
  "resources": [
    "arn:aws:events:us-east-1:123456789012:rule/ExampleRule"
  ],
  "detail": {}
}

To get the minute we first transform the time String from the event object into a date, and then we use getMinutes() since that's the time granularity we need.

We then create an object whose keys are the minutes when the function will run, and whose values are the reminders to Lucy. Now, into actually sending them.

We're using SNS since it's readily available on our Lambda function through the AWS SDK. We create the client at the beginning of the Lamda file:

const aws = require('aws-sdk');

and we use it like this:

var params = {
  Message: smsPayload,
  PhoneNumber: '+523331412794',
};                    

var publishText = await new aws.SNS({apiVersion: '2010-03-31'}).publish(params).promise();

Sending an SMS with SNS only requires the String payload and the phone number 📲.

With that, we have a scheduled Lambda function that reminds Lucy what to do next with minute precision ⏳.

You can find all the final files on my GitHub repo.

You can now go and build and deploy this serverless app with the AWS SAM CLI like in the previous challenge 🥳

Recap

This concludes with the Day 02 challenge from 25 Days of Serverless.

Now that it's my second time using the AWS SAM CLI, I could move faster and get straight to what was needed to solve the problem.

I loved how you can create events with the CLI and use them to locally test your Lamda functions. Definitely helps a lot since you don't have to deploy everything to test your changes.

Thanks a lot for reading me! 💚

25 Days of Serverless - Day 01

David Ojeda — Mon, 02 Dec 2019 23:26:38 +0000

Cover image taken from Microsoft's 25 Days of Serverless repo

Yesterday while scrolling through Twitter I found an interesting opportunity to learn about the current state of serverless technologies, it's called 25 Days of Serverless.

It's an initiative from Microsoft that consists of one challenge each day from the 1st through the 25th of December.

I decided to give it a try, but using AWS as the cloud provider since it's what I use every day. The point of the challenge is to learn, not to show what provider is the best.

So fasten your seatbelts since I'll be posting my solutions for the next 25 days 🤘🏼

Challenge 1: A Basic Function

Here is the description from their GitHub repo:

🎶 "I had a little dreidel
I made it out of sand
And when I tried to spin it
It crumbled in my hand!" 🎶

Your first stop is Tel Aviv, Israel, where everybody is concerned about Hanukkah! Not only have all the dreidels been stolnen, but so have all of the servers that could replicate spinning a top!

Have no fear, though: you have the capability to spin not only dreidels, but to spin up serverless applications that can spin a dreidel just as well as you can!

Your task for today: create a REST API endpoint that spins a dreidel and randomly returns נ (Nun), ג (Gimmel), ה (Hay), or ש (Shin). This sounds like a great opportunity to use a serverless function to create an endpoint that any application can call!

My solution

I used the AWS Serverless Application Model (SAM) CLI since it provides a pre-defined template with built-in best practices for serverless applications and functions. Internally it uses the following services:

AWS Lambda
AWS API Gateway
AWS CloudFormation

Creating the app

Since it is my first time developing a serverless application I went with the Hello World tutorial. It guides you through the minimum steps needed to have a serverless endpoint up and running; most of the tutorial is pure magic from the AWS SAM CLI 🧙🏻‍♂️.

So, following this tutorial, I went with a quick start template and the nodejs12.x runtime:

$ sam init
Which template source would you like to use?
    1 - AWS Quick Start Templates
    2 - Custom Template Location
Choice: 1 

Which runtime would you like to use?
    1 - nodejs12.x
    2 - python3.8
    3 - ruby2.5
    4 - go1.x
    5 - java11
    6 - dotnetcore2.1
    7 - nodejs10.x
    8 - nodejs8.10
    9 - nodejs6.10
    10 - python3.7
    11 - python3.6
    12 - python2.7
    13 - java8
    14 - dotnetcore2.0
    15 - dotnetcore1.0
Runtime: 1

This command by itself will create a project structure and the files needed for a serverless app with a single endpoint and Lambda function.

It looks like this:

$ tree
.
├── README.md
├── events
│   └── event.json                # Sample event for testing
├── hello-world
│   ├── app.js                    # AWS Lambda logic
│   ├── package.json              # Dependencies
│   └── tests
│       └── unit
│           └── test-handler.js
└── template.yaml                 # SAM template for AWS resources

4 directories, 6 files

Building the app

The AWS SAM CLI facilitates this step too:

sam build

This creates the actual artifacts that will be deployed to AWS, which in this case are the AWS Lambda function code and the CloudFormation template.

If you have Docker installed you can test your API endpoint locally before deploying to AWS. Supposing you have so, you can run:

sam local start-api

and navigate to the given endpoint on your localhost to see the 'Hello World' response!

At this point, you are ready to deploy your Hello World serverless app, but that's not what we have been asked to do 🤔

From the initial challenge spec:

Your task for today: create a REST API endpoint that spins a dreidel and randomly returns נ (Nun), ג (Gimmel), ה (Hay), or ש (Shin). This sounds like a great opportunity to use a serverless function to create an endpoint that any application can call!

We have to modify our app.js file to solve this problem. My solution goes like this:

exports.lambdaHandler = async (event, context) => {
    try {
        let possibleResults = ["נ", "ג", "ה", "ש"]
        response = {
            'statusCode': 200,
            'body': JSON.stringify({
                result: possibleResults[Math.floor(Math.random() * Math.floor(possibleResults.length))],                
            })
        }
    } catch (err) {
        console.log(err);
        return err;
    }

    return response
};

I created an array with the four possible results and made the endpoint randomly return one of them in JSON format.

Deploying the app

According to the tutorial you can now go ahead and deploy the app with this command:

sam deploy --guided

but I got an error saying that the IAM role for the Lambda function was not found. As far as I know, I gave permission to the AWS SAM CLI to create the necessary roles to run the app. I also tried creating the IAM role first before deploying the function; however, I got the same error.

I ended up deleting this piece of code from the Outputs section of the template.yaml file:

  HelloWorldFunctionIamRole:
    Description: "Implicit IAM Role created for Hello World function"
    Value: !GetAtt HelloWorldFunctionRole.Arn

and this allowed the deployment process to create an IAM role for the function.

With that out of the way, the deploy command should work correctly and return you an HTTPS endpoint from API Gateway to call your API 🥳

Here is my GitHub repo with the final version of all the files. You can notice that I changed how the endpoint and resources are named, but nothing else.

Recap

This concludes the first day challenge of 25 Days of Serverless.

At first, I was overwhelmed by the amount of boilerplate created just to run a single AWS Lambda function, but later I realized that all that code includes very useful things like the HTTPS API endpoint access and the advantage of having every resource codified; similar to Infrastructure-as-Code.

I also noticed that some files for testing were created. I haven't yet tried to create tests for a serverless app. That should come soon though!

Thanks a lot for reading me! I learned a lot just by doing this first challenge, can't wait for the rest! 💙

My privacy setup 🔐

David Ojeda — Tue, 20 Aug 2019 23:42:54 +0000

One of the most precious things in this modern world is data, our own personal data.

With data, companies can persuade us to do, buy, like, and do whatever fits their interests- and most of the time those interests not really matches ours.

I'm confident that you have already been in this situation: you are talking to a friend about, let's say, going to Disneyland, and a couple hours later while happily scrolling through your Instagram feed you see a sponsored Disneyland add. It's not a coincidence.

Or maybe you were chatting with a friend through Whatsapp, talking about babies. Just to receive an email from Amazon about some baby clothes offers. It's not a coincidence.

Many apps read, hear, and collect more information than we can imagine. Instagram hears what you say, Whatsapp reads what you write, Google knows where you are, and all that data is shared among so many other 3rd parties looking for profit. Knowledge is power.

If you think, "I don't really care, I have nothing to hide", it's not about hiding something. It's about unauthorized entities knowing everything about you. It's your life.

And in order to protect your data, your privacy, I put together this post with the details of my own privacy setup. It includes some rules I follow, as well as apps that help me protect my privacy.

Some general rules that apply to most of the things you do:

Don't give away your information just because it's easy. If you are signing up for a new service, I recommend you to investigate it before. You don't want to share details about you with a company that is known to sell them to someone else
For some temporary signups, you don't need real information. Some establishments, like coffee shops, ask you for your email address and name to connect to their WiFi, but most times you don't need a real email address since they don't ask for confirmation
Check allowed permissions of apps you install. There are apps that ask for way more than they need. If you can match every permission with a specific feature of the app, then you are probably good to go. Here is a Lifehacker guide for more information on the topic
Review privacy settings. Many apps have a privacy section on its settings where you can change what data can they collect or if targeted ads should be shown to you. Here's Twitter's for example:

Now let's get to the apps I use!

Brave

An open source privacy-first browser that comes with ad and tracker blocker by default. I have never missed Chrome or Firefox since I made the switch.

It's based on Chromium, so all your Developer Tools options are available to you. It also lets you open new tabs with Tor, for a truly private experience.

DuckDuckGo

A privacy-first search engine. DuckDuckGo doesn't store any of your searches, nor does it track you in any way. Every search you make is as it was your first search ever!

It does not have some quick responses as Google does, but it's totally worth it anyway. I have never missed Google Search either.

Signal

Signal is a messaging app that, you guessed it, it's privacy-first; it offers E2E encryption on everything. Plus, it's open source and a nonprofit organization. This app is even recommended by Edward Snowden!

The downside I have found so far is that not many people are willing to switch or use yet another messaging platform. Whatsapp is way to strong here in México at least.

Bouncer

This one is only for Android users. Bouncer is an app that allows you to grant permissions temporarily. It will automatically deactivate permissions after you have used the feature that required them.

For example, if you were to share your location using Whatsapp, you would need to accept the location permission first, then Bouncer will ask you once if you would like to remove or keep the permission after you have finished using it. As soon as you exit the app, Bouncer will remove location permissions from Whatsapp so it can't access them in the background. It's awesome!

Moreover, Bouncer doesn't even require internet permission, so you shouldn't fear of it sharing your information.

Tor

One of the world's strongest tool for privacy right now. It comes in many forms such as Tor Browser, Tor OS and private tabs with Tor from Brave, and it allows you to navigate the internet freely and with privacy thanks to its multiple layers of encryption.

It is slower than normal since the traffic goes through a series of relays, but for some people such as bloggers or journalists that must remain private, it's a jewel 💎.

NordVPN

A VPN will allow you to protect your IP address and to make sure no one can see which websites you visit. It can also help you block ads and protect you on public W-Fi networks.

I use NordVPN and it works just great! It offers hundreds of servers around the world and some more specialty servers such as double VPN, P2P and Onion over VPN.

There are some specific apps/companies that I try to avoid whenever possible. Here are some of them:

Google

I personally don't trust many giant tech companies like Google. They make really good products, I can't deny that. However, their business model thrives when users give away their privacy.

Take Gboard for example. This keyboard will have access to your camera, microphone, location and basically to anything you type with it. I admit the keyboard has really great features, but I would rather use something else than this keyboard just from the fact it comes from Google.

I do use Google Maps frequently, I just have many features disabled such as recommendations and location history.

Social networks

This should be a no-brainer. Social networks profit from gathering personal information and then using it for ad targeting. I don't have Instagram nor Facebook, but I still have Twitter. I don't use the native apps though, I always check it on the website be it on mobile or desktop.

Leaving your social networks might feel impossible to you since you might have family and friends with whom you talk to or at least follow, and that's okay. I would recommend just not to share too many personal details on your posts.

Closing out

Your privacy is rapidly becoming a privilege rather than a right, that's why I use all these apps and tips to keep mine.

I don't pretend to cover everything there is about online privacy on this post, but hopefully it sparks your curiosity to learn and do more to protect what's yours. I still have plenty of things to do, and my next objective is to completely stop using Google Products.

Here are many resources I have studied/read/watched to keep myself informed about this. I highly recommend to check the DuckDuckGo resources below, they have immense high quality information about why you should care about privacy.

Cover image was generated using Cover-Image-Generator 💙

I hope you find some of what I have shared here useful, and if you know something else I should be doing please leave me a comment!