DEV Community: yvesnrb

HeatSat

yvesnrb — Thu, 13 Jan 2022 20:58:29 +0000

HEATSAT

Checkout the application live here: HEATSAT. The site is not ready for mobile yet, so please try to view it on a desktop.

Overview of My Submission

My submission is a web application that scrapes and parses heat satellite data from INPE and stores it in a time series database per region. A region can be any GeoJSON delimited block of land. Once a heat reading has been assigned to a region, it can be visualized on a map. You may also query a region to see how many heat readings it had this month, as well as if that is an increase from last month.

New data comes in every 10 minutes - 24/7 and the application ingests about 200 to 300 heat readings each day! The MongoDB time series database feature was crucial in ensuring all of this data is queried quickly by timeframe and by region. This is because data is stored efficiently by region and by timestamp. You can learn more about time series databases here.

Here are a few feature demo gifs:

Browse heat data on a map.

List regions.

View a region on a map, as well as its stats.

Submission Category:

This project is under the Prime Time category.

Link to Code

yvesnrb / heatsat

Track wildfire satellite data in South America. Atlas + Dev.to Hackaton 2021 project.

HeatSat

More information soon.

View on GitHub

Additional Resources / Info

Special thanks to:

INPE
TailwindCSS
NextJS
TurfJS
@react-google-maps/api

Understanding Immediately Invoked Function Expressions (IIFEs)

yvesnrb — Thu, 25 Nov 2021 17:18:42 +0000

An immediately invoked function expression - often abbreviated to IIFE and pronounced 'iffy' - is a very powerful and useful construct in JavaScript.

You've probably already came across something that looks like this:

(() => {
  console.log('Hello, world');
})();

A function that is defined and then immediately executed is a fairly simple concept, but how does it actually work? Why would you use it? Whats with all of the parentheses?

Let's go through a few basic concepts and understand how the JS engine parses this code block.

Statements vs. Expressions

First, it is important we understand the difference between a statement and an expression.

A statement is simply a stand alone unit of execution which does some type of work. A simple example is the if statement, which will execute the code defined in its block if a condition is true.

In contrast, an expression is a unit of execution which can also perform some type of work but will then be reduced (or evaluated) to a value. For example the expression 3 > 2 will compare the two values, and then be evaluated to the value true.

This is important because in JS, a function can be either a statement or an expression. A function statement looks like this:

function greet() {
  console.log('Hello, world');
}

When the JS engine interprets this snippet, it will allocate space in memory for this function and create a name - greet - which points to said space in memory. One can then execute, or invoke, this function by appending the name with a pair of parenthesis: greet().

On the other hand, a function expression looks like this:

var greet = function() {
  console.log('Hello, world');
}

Here, the JS engine will first allocate a space in memory for the variable greet and set it to undefined. Then, at the moment it evaluates the function expression, it will create an object and set it up with the code inside of the function body. Finally, it will evaluate the assignment expression using both operands of the assignment operator (=) - that is the object and the variable. The assignment expression results in the greet variable pointing to the address in memory of the previously created object.

You might be confused by the use of the word "object" here. Indeed, in JS a function is actually a special type of object. Function objects have a special property called [[Code]] which holds the actual body of the function. When we append a pair of parenthesis to a name as in greet() the engine simply looks for the property and executes it.

Immediate Function Execution

Executing a function expression doesn't have to take place after its assignment to a variable. We can append a pair of parenthesis right after the expression which evaluates to it and execute it right then and there:

var greet = function() {
  console.log('Hello, world');
}();

This is indeed an IIFE. If you execute this snippet in a browser, you will see that the log happens right away. However, inspecting the variable greet will tell you that it is set to undefined. Shouldn't it hold the function object?

To understand why that is, let's look at the operator precedence table on MDN.

This table describes the order in which operators will be evaluated. Operators with a higher number in the 'precedence' column will be evaluated before the ones with a lower number.

If we look for the precedence value of the assignment operator (=) we will find that it is 2. And if we look for the value of the function call operator (...()) we will see that it is 18, a much higher number.

Therefore, the order in which the engine will interpret the snippet is:

1) Allocate an address in memory with the name greet and set it to undefined.
2) Evaluate the function expression to create a function object.
3) Execute the function. Since the function has no explicit return value, this expression evaluates to undefined.
4) Finally assign the result of the last evaluation to the variable greet.

Naturally, if the function had an explicit return value we would have ended up assigning that to the variable:

var greet = function() {
  return 'Hello, world';
}();

This is in fact an IIFE, just not its most popular form. What you probably want to do is have a stand alone function expression and then execute it.

Stand Alone Expressions

The JS engine does not mind interpreting useless expressions which never get used anywhere:

3; // number expression
"I'm a string" // string expression
{ name: 'object literal' } // object literal expression

All of the above expressions will be evaluated into their literal values and then immediately thrown away. If you execute the above in a browser you will see that no error is thrown. However, if you try to do the same for a function expression:

function(name) {
  console.log('Hello, ' + name);
}

The engine will throw a syntax error with the message of "Function statements require a function name. But wait, did
it just say "statement"?

Indeed, the difference between a function statement and a function expression is not whether or not we name the function after the keyword function, but rather where it sits lexically in our code.

When we declare a function as an operand of the assignment operator =, the engine knows to evaluate it as an expression. When we declare a function as a parameter of another function or object method, the engine also knows to
evaluate it as an expression. Finally, when we declare a function stand-alone, it will be interpreted by the engine as a statement and it will expect a name or throw an exception.

To actually create a stand alone function expression, we have to trick the syntax parser into interpreting it as an expression. There is actually a few different ways to do this, but the most popular way is to wrap the function in parentheses:

(function(name) {
  console.log('Hello, ' + name);
});

The outer set of parenthesis here are the 'grouping operator'. If you refer to the MDN documentation on them you will learn it controls the precedence of evaluation in expressions. As in, it expects everything contained withing it to be an expression. Thus, we've created a stand alone function expression.

Once again, we can execute the expression immediately after its evaluation into an object by appending it with another set of parenthesis:

(function(name) {
  console.log('Hello, ' + name);
})();

This time, the parenthesis are the "function call" operator. Thus, a pair of parenthesis can be three different things depending on where it sits lexically in our code: the grouping operator if its stand alone, the function call operator if it is appended to a name or an argument list when its after the function keyword.

With the introduction of arrow functions in ES6, the most popular way of declaring an IIFE is with them:

((name) => {
  console.log('Hello, ' + name);
})();

An arrow function is simply a function expression with no binds for the this or super keywords. A topic for another post.

Why Though?

How are IIFEs useful? There are a few different uses for them. There first one is as a bypass to the rule that you can't use async/await in the top level of your code:

(async () => {
  // fetch some data or do some other async thing here
})();

The second one is to avoid polluting the global namespace with variables which we will only use once during the initial phase of our script:

(() => {
  // some initiation code
  let firstVariable;
  let secondVariable;
})();

// firstVariable and secondVariable will be discarded after the function is executed.

Conclusion

That is all. I hope you've learned as much about IIFEs reading this post as I did writing it!

DO Hackaton Submission

yvesnrb — Sun, 10 Jan 2021 01:46:19 +0000

What I built

Dbug is an application where programmers can connect with each other for pair programming.

Category Submission:

Program for the People

App Link

dbug.xyz

Screenshots

Edit your contact information

Add a new project

Share your contact information

Receive and select contact offers

Description

This application allows people to save their contact information and share it with other users. The information stays private and is only shared with people that you decide to share it with. Once you create a project you can receive multiple contact offerings and see on what platforms they are available, as well as GitHub statistics for their profile. After selecting a contact, you are given their contact information for further contact.

Link to Source Code

https://github.com/yvesnrb/dbug

Permissive License

MIT

Background

I wanted to build this app because I think opportunities to bring people together safely is invaluable today. I hope I can give people the opportunity to video call each other to help solve problems and build cool stuff.

How I built it

This application is composed of a full TypeScript stack. I've used ReactJS for the front-end and Express and TypeORM on the back-end. Additionally the application interfaces with a PostgreSQL database. Digital Ocean's App Platform made it extremely easy to get the entire stack running and to deploy new iterations of my application for other people to try.

Additional Resources/Info

Check out the other posts in this series for some additional insight on how I've built this application.

DO Hackaton Log #4

yvesnrb — Fri, 08 Jan 2021 16:12:50 +0000

Hi devs,

My appllication is finally ready! You can go to this link right now to try it out. In case you haven't read the last posts, dbug is an application where programmers can post short project ideas or problems they are trying to solve and other programmers can offer their contact information for pair programming. Here is a demo of the features:

Edit your contact information

It is required to have at least one of any contact information available (meet, discord or zoom). This information is not public and only gets sent to the author of projects you decide to share your contact with.

Add a new project

You may only have one active project at once. The projects stay up indefinitely until you either delete it or choose a contact offer.

Share your contact information

You can do this on as many projects as you want, it does not guarantee that the author of that project will be able to contact you as they may select some other contact offer. Also the project list has an infinite scroll feature.

Receive and select contact offers

New contact offers will show up on the project page. Once you select one, you are taken to a screen were you can see all of the contact information that was made available by that user. This will also close that project.

What I've learned

Building this submission has given me the opportunity to learn a lot of new technologies:

TypeORM I had already worked with TypeORM before but in a much simpler capacity. Now I know a lot more about relations and queries.
react-query This I had never used before, it took a while for me to figure out how this library is supposed to be used and I considered giving up on it and just doing the axios requests manually but I'm glad I didn't, this tool is a huge time saver and makes querying an API a hundred times easier.
Storybook Also had used before but only on a very surface level. You can read my other post on this series if you want to know more about Storybook it is a great took for front-end work.

Finalizing

Now I just need to write some readme files before making my submission. I hope you all had as much fun as I did in this hackaton!

DO Hackaton Log #3

yvesnrb — Wed, 23 Dec 2020 22:54:57 +0000

Hi devs,

My latest addition to my hackaton project has been the implementation of user authentication through the GitHub OAuth API. Users can now start a session with their accounts to gain access to restricted pages and also destroy their sessions and sign out.

The way it works is quite simple: when we register an OAuth application with GitHub we can generate a link that will show the authorization screen, we can also set a callback URL that GitHub will redirect to after the user accepts. When the user is redirected, GitHub adds a code to a query parameter of our callback URL. This code is sent to my application server where it can be traded for a token. Since the scope of my application is empty, this token can only really be used to read publicly available data on the user that tried to sign in, but if our application had more in-depth integration with GitHub's services we could add other things to the scope and take actions on behalf of the user, such as creating repos, commenting on issues etc. After the application reads the user data it checks to see if that user already exists in our database, if it doesn't it creates a new one, if it does it simply updates that user's information. The server can finally emit a JWT for that user and return it with some session information.

On the front end side of things, I am using the context API to keep session information and persisting it trough the browsers local storage (I realize this isn't the end-all solution for JWT safe-keeping but it will be improved upon later).

I'd love it if you gave it a try at this link and let me know what you think.

Have a great hackaton!

yvesnrb / dbug

Use dbug to find people to pair program using your favorite communication platforms.

DO Hackaton Log #2

yvesnrb — Sun, 20 Dec 2020 03:39:06 +0000

Hello devs,

My latest push on the hackaton project has been to implement Storybook and create all of the UI components on the front-end package.

Storybook

If you don't know what Storybook is, you are seriously missing out! It is a tool where you can organize all of the components of an application in 'stories'. Each story of a component is a way in which it can be used, so you can have the different variations of a button component for example. It is also a great place to work on your components since it implements hot reloading and you don't have to worry about placing your components in a dummy page to work on them.

The controls you see on the right of the page are all built automatically by inferring from typescript interfaces. The 'color' radio buttons come from color: 'primary' | 'secondary' and the toggles are all boolean props. It will even generate documentation:

If you are writing your React components with Typescript, Storybook will do all of that on its own, no extra configuration necessary.

What you do have to do is write the stories, but that is super easy, here is the stories file for my button component:

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';

import Button, { Props as ButtonProps } from './index';

export default {
  title: 'Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
} as Meta;

const Template: Story<ButtonProps> = args => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  color: 'primary',
  children: 'Im a button!',
};

export const Disabled = Template.bind({});
Disabled.args = {
  color: 'primary',
  disabled: true,
  children: 'Im a button!',
};

export const Secondary = Template.bind({});
Secondary.args = {
  color: 'secondary',
  children: 'Im a button!',
};

export const Small = Template.bind({});
Small.args = {
  color: 'primary',
  small: true,
  children: 'Im a button!',
};

export const Loading = Template.bind({});
Loading.args = {
  color: 'primary',
  loading: true,
  children: 'Im a button!',
};

The gist of it is this: the default export of this file is an object with metadata about all of the stories relating to this component, here you can define the display name of the component, how storybook will display it on the screen and (much, much) more. Then we define a template, this is a function that will be used to render all of the stories. All we need to do then is export the stories themselves, by describing what the props for that story will be in the 'args' object.

This barely scratches the surface, some features of Storybook include the ability to replace the imports of a component with mock versions for testing, decorators, MDX pages for writing documentation and an add-on API for extending the entire thing.

Storybook is not just for React, it supports a long list of frameworks and libraries, including the big three you would expect and several more. I hope you will give it a try in the future because it has helped me quite a bit with front-end work.

UI Components

The UI components I've build so far are fairly boring stuff, buttons, inputs and spinners. If you want to check it out you can clone the repo and run these:

yarn
yarn workspace @dbug/web storybook

yvesnrb / dbug

Use dbug to find people to pair program using your favorite communication platforms.

Have a great hackaton!

DO Hackaton Log #1

yvesnrb — Wed, 16 Dec 2020 01:00:01 +0000

I'm late!

No problem, my project is going to be super simple for this year: my idea is for an application where programmers can post short project ideas or problems they are trying to solve and other programmers can offer their contact information for pair programming. I'm calling it dbug for now (accepting suggestions).

I will be using a full typescript stack with ReactJS on the front-end and Node in the server. I will also use the amazing TypeORM to interact with a PostgreSQL database.

Figma Prototype and Use Cases

First order of the day was coming up with some Figma screens. You can check out what I've come up with here:
Figma Prototype

Drawing the screens on Figma really helps me solidify the functionalities I want to get out of an application. We are trying to keep it lean for this one, users will only be capable of offering their information to other people's projects, posting their own project and selecting an applicant to their project to pair program with. Other than saving and updating their contact information (zoom, meet and discord for now) this is pretty much it. I'm also delegating all user authentication to GitHub's OAuth API, this should give me access to a lot of useful user information like avatars, bios and stars while adding very little overhead to the application.

Other things are in the back of my mind too, such as tagging and searching listings by technology and a place to store and retrieve previous contacts. I'll complete this MVP first and see how much time I have left to add on to it.

GitHub Monorepo Setup

I've been hearing a lot about the idea of monorepos lately so I've decided I'd give this a try for this project. Using yarn's workspace feature I've defined two packages: @dbug/server and @dbug/web. @dbug/server was scaffolded with a simple Express hello world thing, and the necessary scripts for transpiling the typescript into a /dist folder. I also ran trough some simple configuration for Eslint and Prettier, using the popular Airbnb style guide. @dbug/web was scaffolded with create-react-app using the typescript template, I've also ran trough a similar configuration for Eslint and Prettier.

It's not a lot, but it will do for setting up the next part: the Digital Ocean App platform. You can check out the repository here:

yvesnrb / dbug

Use dbug to find people to pair program using your favorite communication platforms.

Digital Ocean App Platform Setup

My experience deploying this application to DO's Apps has been super pleasant. All you need to do is fill a few forms and your application gets built and deployed!

The first thing you need to do is select what repository you will be deploying from:

Then it will prompt you for the region of the datacenter you want your application to live in as well as the branch that it will pull the code from.

The next step is to set up environment variables and build commands:

You can see it already recognized we are trying to deploy a node application. For environment variables we only need one for now: APP_PORT that I'll set up with the value of 8080. My build command for the @dbug/server package is this:

yarn workspace @dbug/server build

We also need a run command:

yarn workspace @dbug/server start

The HTTP routes field lets you setup a url path in which this component will live, I've set it to '/api' so our server will be reachable on [base_url]/api. At the very bottom you will see 'HTTP Port'. This is the port that will be forwarded to the external 80 port out of the Docker container (this whole thing is built with Docker, you can even upload you own Docker files to get fine grain tuning).

The final thing you need to do before launching is selecting your plan and you are live!

Another 'component' you can have on DO's App is a static site. The setup is very similar except you don't really need a run command, all you need is the build command and the path where the final static files of the site can be found. DO will then upload the static files to its spaces platform and serve them as you would expect. Also, SSL certificates are all handled for you!

You can check out my progress on dbug.xyz. It isn't much for now but should grow in time.

I'd love to see some feedback and suggestions, have a great hackaton!