DEV Community: Alex Parra

React PWA: Salary per time calculator

Alex Parra — Mon, 16 Nov 2020 17:45:20 +0000

This weekend I took on automating something many of us probably do over and over... (at least I do).

Problem:

If I make x€ per hour how much is that per year in £?
If I make y$ per year, how much is that per month in €?

Solution:

A pwa that calculates all other values when I change one of them.

App: https://alex-parra.github.io/salary-per-time-calculator/

Repo: https://github.com/alex-parra/salary-per-time-calculator

TODO

favicon images
local storage
??

My first npm package: sequelize-airtight

Alex Parra — Sat, 31 Oct 2020 18:51:14 +0000

I've recently published my first npm package: sequelize-airtight

There are some features to add before bumping to v1.0.0 but it's taking shape and progressing a little bit every day.

The goal is to extend the validation methods available in sequelize (through validate.js) in order to make your models and data safer and reliable.

Additionally, it includes mutators that allow you to transform values on write (overloading each field's set method) or on read (overloading each field's get method).

All validators and mutators are opt-in meaning that just installing the module won't cause any changes to your models.
Per field, you can add a new attribute airtight that can contain the validators and mutators to apply.

I'll surely write more about how everything works closer or at time of the release of v1.

I took this opportunity to learn and use GitHub Actions workflows and also dependency aliases which allowed me to easily test against sequelize v5 and v6 continuously.

Today, I'm just putting the word out and inviting you to have a look and possibly find something I've overlooked till now.
All constructive feedback is highly appreciated.

Very curious to know if this "clicks" with the community.

Package: https://www.npmjs.com/package/sequelize-airtight
Repository: https://github.com/alex-parra/sequelize-airtight

Best

Creating a JS repo for your ProjectEuler100 solutions

Alex Parra — Sun, 05 Jan 2020 14:00:06 +0000

Intro

If you haven't ever solved the Project Euler problems, you now have a good opportunity by committing to the #ProjectEuler100 challenge posted by Quincy Larson. Find out more about this on the announcement post.

Topic

As described in the announcement post, you can go through the problems on the Project Euler website or solve them on freeCodeCamp as there you have ready made tests to run against your code instantly. Plus it'll be recorded on your freeCodeCamp profile.

But, as the challenge requires posting a link your solution on a GitHub repo, you'll need it anyhow. As I was creating mine I though some of you would benefit from a little help in creating your own repo with tests. So here we are...

Step 1 - Create a repo

Head over to your GitHub main page and create a new repo:

Name it project-euler-100 or something similar;
Fill the description with whatever you wish;
Leave Public checked;
Check Initialize this repository with a README;
On Add .gitignore select Node;
Click Create repository;

Step 2 - Clone the repo to your machine

On your computer Terminal, cd into a folder where you'd like to keep your projects and clone the repo with:

git clone https://github.com/USERNAME/REPONAME.git
# You can get the above url on the GitHub repo page:
# 1. by clicking the green `Clone or Download` button. 
# 2. by copying from the browser address bar.

The above will create a directory with the same name as your repo with two files: .gitignore and README.
Now cd into that folder and open it with your preferred code editor. For VSCode do code ..

Step 3 - Adding dependencies

We want to be able to run tests on our code and we'll do that with Jest. We also want to use ES6 imports so we'll also need Babel.

Before installing dependencies we need to create a package.json file.
On your Terminal, at the repo folder root, type:

yarn init

Some questions will be asked for you to customise the values of package.json. To use defaults, just press ENTER on all or run yarn init -y instead.

Now we'll install our dependencies with the following command:

yarn add --dev jest babel-jest @babel/core @babel/preset-env

The above will add a devDependencies property to package.json and also create a new node_modules folder with the dependencies required.

We need to configure babel by creating a file named babel.config.js at the root of our repo folder. An easy way is to run:

touch babel.config.js

Open babel.config.js with your code editor and set it's contents to:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { targets: { node: 'current' } },
    ],
  ],
};

Finally, we need to edit our package.json file and create a scripts property as follows:

{
  ...
  "scripts": {
    "test": "jest"
  }
}

Here is the full content of my package.json right now:

{
  "name": "project-euler-100",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/alex-parra/project-euler-100.git",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0"
  },
  "scripts": {
    "test": "jest"
  }
}

To verify it's all set up fine run:

yarn test

You should get the following output:

yarn run v1.21.1
$ jest
No tests found, exiting with code 1
# more info about the "error"

This is a good time to commit our changes so far as in the next step we'll create the files for the first problem.

Before committing, run git status to make sure which files are being committed. You should see babel.config.js, package.json and yarn.lock listed as Untracked files.
The node_modules folder should not be committed as it contains third-party code. Our .gitignore file as an entry for it to tell git to ignore it.
If you're on a Mac, you may see a .DS_Store file as Untracked. These files can/should also be ignored by git. Add a line to .gitignore with .DS_Store to ignore them.

Now the commit:

git add . # add all untracked files to the staging area
git commit -m "Set up dependencies" # commit with message
git push # push latest commit to GitHub remote

Step 4 - The first problem

In this post, I won't solve the first problem. That's on you. ;)
But I'll show you how to set up the folder and files in a way that allows you to run the tests on your code locally.

Start by creating a folder for the problem to be solved. In this case, we'll create a folder named 001-multiples-of-3-and-5.
Inside that folder create a file named 001-multiples-of-3-and-5.js and another named 001-multiples-of-3-and-5.spec.js.

In order to make it easy to code locally and also post the solutions on freeCodeCamp, we'll keep the naming used on the freeCodeCamp stubs.
As such, you can go to freeCodeCamp - Project Euler - Problem 1 and copy the function stub present on the right hand pane:

function multiplesOf3and5(number) {
  // Good luck!
  return true;
}

The only change we need is to export this function so that we can use it in the tests. As such, make the contents of 001-multiples-of-3-and-5.js look like:

export function multiplesOf3and5(number) {
  // Good luck!
  return true;
}

Nice!

Lastly, we need to set up the content of the tests file 001-multiples-of-3-and-5.spec.js.
This file will be run by jest and needs to import the code file and implement at least one test:

import { multiplesOf3and5 } from './001-multiples-of-3-and-5';

test('multiplesOf3and5(1000) should return 233168', () => {
  expect(multiplesOf3and5(1000)).toBe(233168);
});

In review:

we import the function from the implementation file;
we write tests to validate the return values match what we expect;

Let's write all the tests present on freeCodeCamp for problem one:

import { multiplesOf3and5 } from './001-multiples-of-3-and-5';

test('multiplesOf3and5(1000) should return 233168', () => {
  expect(multiplesOf3and5(1000)).toBe(233168);
});

test('multiplesOf3and5(49) should return 543', () => {
  expect(multiplesOf3and5(49)).toBe(543);
});

test('multiplesOf3and5(19564) should return 89301183', () => {
  expect(multiplesOf3and5(19564)).toBe(89301183);
});

test('multiplesOf3and5(8456) should return 16687353', () => {
  expect(multiplesOf3and5(8456)).toBe(16687353);
});

And now run the tests:

yarn test

You should get a long error output that ends with:

Test Suites: 1 failed, 1 total
Tests:       4 failed, 4 total

The error is expected as we haven't implemented our solution yet. And this is also the recommended way to go about it:

write tests;
run tests and see them fail;
write code that makes the tests pass;

Let's commit what we have and push to GitHub.

Set up is now finished!

Now it's problem solving time!
Once you get all tests passing, commit the solution and push to GitHub.
Best of luck!

A template

I hope you went about the steps above and created your own repo.
In any case, I'll finish this post with a lazy solution for you which is to fork the template repo I made https://github.com/alex-parra/project-euler-100-js-template, clone it to your computer and running yarn install to set up the dependencies.

CSS display "stack"

Alex Parra — Thu, 02 Jan 2020 18:55:21 +0000

NOTE: display: stack does not exist. Read on for more info.

Background

Two and half years ago, I wrote a post on Medium about this possible new kind of display I called stack that "would be a hybrid of flexbox and z-index".

https://medium.com/@alexpds/css-display-stack-7bdc02bc1434

This new layout method, would allow the ‘stack’ wrapping element to automatically assume the height of the tallest of it’s childs.
So, with similar syntax to flexbox, we could override the order (z-order) of the various elements, more or less like we can with z-index, but the tallest child would affect the ‘stack’ height and thus no issues with unwanted overflows, uncontrollable overlaps.

Grid to the rescue!

Back then (May 2017), CSS Grid was still being defined and if what I'm showing below was possible back then I didn't know.
But today CSS Grid support is very broad and it allows exactly what I described in the original article.

.stack { 
  display: grid;
  grid-template-areas: "stack"; /* or whatever name you prefer */
}

.stack > * {
  grid-area: stack; /* same name as used above without quotes */
}

.stack .top-most {
  z-index: 1; /* default order is 0. Highest shows on top  */
}

Example on CodeSandbox

https://codesandbox.io/s/dry-worker-0nv9b

JavaScript - Seconds to HH:MM:SS

Alex Parra — Tue, 31 Dec 2019 10:35:19 +0000

Yesterday, while making a game where I wanted to show the time elapsed since the game started I put together this short helper:

const SECONDS_PER_DAY = 86400;
const HOURS_PER_DAY = 24;

/**
 * Convert seconds to HH:MM:SS
 * If seconds exceeds 24 hours, hours will be greater than 24 (30:05:10)
 *
 * @param {number} seconds
 * @returns {string}
 */
const secondsToHms = (seconds: number): string => {
  const days = Math.floor(seconds / SECONDS_PER_DAY);
  const remainderSeconds = seconds % SECONDS_PER_DAY;
  const hms = new Date(remainderSeconds * 1000).toISOString().substring(11, 19);
  return hms.replace(/^(\d+)/, h => `${Number(h) + days * HOURS_PER_DAY}`.padStart(2, '0'));
};

The above converts seconds 1234 to 00:20:34.

  secondsToHms(1234); // '00:20:34'

The first version I wrote didn't handle the case of seconds being over 24 hours.
Not really needed in the situation at hand but for the sake of completeness I opted to handle it, especially because the various existing examples I've found don't deal with the day overflow and that's why I decided to share this.

Interactive and tested at CodeSandbox
https://codesandbox.io/embed/js-seconds-to-hhmmss-32zo4?fontsize=14&hidenavigation=1&module=%2Findex.ts&previewwindow=tests&theme=dark

Hope it's useful to you. Cheers.

PS: In case you prefer plain JavaScript...

const SECONDS_PER_DAY = 86400;
const HOURS_PER_DAY = 24;

/**
 * Convert seconds to HH:MM:SS
 * If seconds exceeds 24 hours, hours will be greater than 24 (30:05:10)
 *
 * @param {number} seconds
 * @returns {string}
 */
const secondsToHms = seconds => {
  const days = Math.floor(seconds / SECONDS_PER_DAY);
  const remainderSeconds = seconds % SECONDS_PER_DAY;
  const hms = new Date(remainderSeconds * 1000).toISOString().substring(11, 19);
  return hms.replace(/^(\d+)/, h => `${Number(h) + days * HOURS_PER_DAY}`.padStart(2, '0'));
};

filterMap - JavaScript filter and map in O(n)

Alex Parra — Mon, 18 Nov 2019 12:52:24 +0000

It's common that we need to get a subset of items from an array. For example, get only the users that are subscribed to the newsletter from the list of all users. This is commonly a job for Array.filter.

/**
 * Get list of subscribed users
 * @param {User[]} users The list of all users
 * @retuns {User[]} Only users that are subscribed
 */
const getSubscribedUsers = users => {
  return users.filter(user => user.is_subscribed);
}

It's also common that we need to apply some transformation to a set of data. For example, get a list of full names from a list of users by concatenating each user's first_name and last_name.

/**
 * Get list of users full names
 * @param {User[]} users The list of all users
 * @retuns {string[]} Users full names
 */
const getUsersFullNames = users => {
  return users.map(user => `${user.first_name} ${user.last_name}`);
}

*But what if we need the full names of the subscribed users only?
Frequently we'll see:

const subscribedUsers = getSubscribedUsers(users);
const subscribedUsersNames = getUsersFullNames(subscribedUsers);

The problem with this approach, which might not be too significant on a small set of users but is when dealing with large sets, is that it requires two loops: the first across every user and the second across every subscribedUser.

The method I'm sharing with you here accomplishes the same result but looping just once over the data set – O(n) – thus making it more performant:

const isFn = f => typeof f === 'function';

/**
 * Filter and Map an Array in a single loop
 * @param {array} arr The list to process
 * @param {function} filterFn The filtering logic
 * @param {function} mapFn The transforming logic
 */
const filterMap = (arr, filterFn = null, mapFn = null) => {
  return arr.reduce((acc, item, i) => {
    if (isFn(filterFn) && filterFn(item, i) === false) return acc;
    const newItem = isFn(mapFn) ? mapFn(item, i) : item;
    return [...acc, newItem];
  }, []);
};

And an example usage would be:

const isSubscribed = user => user.is_subscribed;
const getFullName = user => `${user.first_name} ${user.last_name}`;

const subscribedUsersNames = filterMap(users, isSubscribed, getFullName);

In the example above, isSubscribed is a utility function that will be used to evaluate if the item (each user) should be kept or excluded, and getFullName is a utility function that will determine the data we get back in the new list.

Check it out at CodeSandbox with tests:
https://codesandbox.io/embed/js-array-filtermap-mvi1q?fontsize=14&hidenavigation=1&module=%2Findex.ts&previewwindow=tests&theme=dark

Spotted a mistake? Let me know!

Basic Svelte app with Parcel

Alex Parra — Sat, 19 Oct 2019 15:55:39 +0000

The easiest way to start a Svelte app is to use create-svelte-app (https://github.com/ph1p/create-svelte-app) which uses webpack.

But going through a setup of your own allows for more freedom and increased knowledge... So the following is a step-by-step approach to setting up your own Svelte app from scratch, using Parcel.js bundler.

Kick-off

On your terminal, navigate to wherever you put your dev projects in and create a directory with a name of your choosing by running mkdir myFirstSvelteApp.

Then, cd into the newly created directory and initialise a git repo with git init.

Now, run yarn init to quickly set up the project details in package.json. This will show some questions that you can either accept the default (leave blank and press Enter) or type in something more fitting.

With the basic done, we now need to install a couple of packages:

parcel-bundler Parcel.js
svelte Svelte
parcel-plugin-svelte (https://github.com/DeMoorJasper/parcel-plugin-svelte)

We can easily install all with a single command:
yarn add -D parcel-bundler parcel-plugin-svelte svelte

As we're using the -D flag, these will be installed as devDependencies.

If you now open your package.json file you'll see not only the content of the questions you answered after yarn init but also a section devDependencies with the entries listed above. Also note that yarn add not only added the dependencies to package.json but also installed them so you now have a node_modules folder with all the packages needed.

As an extra exercise, if you need to get a better feel of how dependencies "work", delete the node_modules folder with rm -rf ./node_modules/ and then run yarn install which will recreate it and download/install all the packages from scratch.

Before we make our first commit to save what we did above, we need to tell git to ignore the node_modules folder and some other default files. You may have these already ignored via a global gitignore but it's wise to have it at the project root.
As such, a quick way to create a .gitignore file that tells git to disregard node_modules and other sensitive files is below:

echo "node_modules" >> ./.gitignore
echo "dist" >> ./.gitignore
echo ".cache" >> ./.gitignore
echo ".env" >> ./.gitignore

Each line above appends the content between double-quotes into the file .gitignore. You can also manually edit the file in VS Code or similar. This file can have comments with # as a marker.

It's highly advisable to also create a README.md file with details about this project but I won't go into detail about it on this post.
In my opinion, this is a good time to make a first commit.

Getting some Hello

As we've left it, we're still missing a couple of things.
Let's get to it... We need to create the basic app files which will be:
./src/index.html used by parcel as starting point
./src/index.js our boot up script
./src/components/App.svelte the root component
./src/css/styles.scss our global generic styles

Note the subfolders src, src/components, src/css.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width" />

    <title>Svelte with Parcel</title>
    <link rel="stylesheet" href="./css/styles.scss">
  </head>

  <body>
    <script src="./index.js"></script>
  </body>
</html>

Parcel.js will read this file and compile whatever it "imports".
This file is just pure HTML.

index.js

import App from './components/App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'Svelte',
  },
});

export default app;

This file is parsed by Parcel.js because it is referenced in index.html.

App.svelte

<script>
  export let name;
</script>

<style>
  h1 {
    text-align: center;
  }
</style>

<h1>Hello {name}!</h1>

This is our root component. We'll keep it really basic now.

styles.scss

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  color: #212223;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

Just regular scss. Import partials, declare variables, etc...

Almost there!!

In order to easily run the parcel bundler in dev mode or build for production we're going to add a scripts section to our package.json file:

  "browserslist": [
    "last 1 chrome versions"
  ],
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }

Add the above, wherever you prefer inside package.json as long as it's inside the root {}.
The browserslist entry is need to prevent a compilation bug. More info

All done!

At your root folder, run yarn dev and then open http:localhost:1234
You should see:

Now head over to the Svelte tutorial and try it out on your newly created app.

Cheers!

PS: This took way longer to write than I imagined and much much longer that the process itself takes. Phew...

Prevent scroll “bubbling”

Alex Parra — Sat, 19 Oct 2019 07:40:16 +0000

A few days ago I stumbled upon a post about a CSS property I hadn’t seen before: overscroll-behavior

As per MDN docs:
“ The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.”

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

It struck me as it was exactly what we needed on a piece of overlayed ui that had inner scroll and was causing the less than ideal effect of scrolling the entire page too.

Tested it out yesterday and it did the job wonderfully.

So, apart from some exceptions, whenever you set overflow: auto on a panel or some modal content, add this property too: overscroll-behavior: contain.

Although it’s still in Draft, it already has a fairly broad browser support:

It’s also available at CanIUse:
https://caniuse.com/#feat=css-overscroll-behavior

What’s your preferred way to test Internet Explorer and Edge from Linux or Mac?

Alex Parra — Mon, 19 Aug 2019 12:54:52 +0000

I’m setting up Parallels with Microsoft’s free developer images.

Do you have a better way?

Insightful Quotes

Alex Parra — Sun, 11 Aug 2019 14:55:57 +0000

‪“We’ve always been better at inventing tools than at using them wisely.”‬
‪— Yuval Noah Harari ‬

Your turn...

GitHub - Set up SSH Key

Alex Parra — Sun, 28 Jul 2019 13:16:59 +0000

TLDR

Generate Key: ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Use descriptive name: /Users/[YourUser]/.ssh/github-[user]-[machine]

Set a passphrase: something-i-will-never-forget

Add to ssh-agent: eval "$(ssh-agent -s)" && ssh-add -K ~/.ssh/MY_KEY_NAME

Copy public key: pbcopy < ~/.ssh/MY_KEY_NAME.pub

Paste key at GitHub: Settings > SSH Keys > New SSH Key

The SSH protocol, allows you to securely connect and authenticate to remote servers and services. Setting up SSH keys on your GitHub account for each computer you work on, allows you to pull/push/commit without supplying your username or constantly typing your password.

To know more about SSH, see https://en.wikipedia.org/wiki/Secure_Shell

In this article, we'll go through the steps of generating a new SSH key on a Mac and registering it on your GitHub account. While I've done this more than I can count, I always have to check the steps so this article also serves as a quick future reference for me.

Do I have any SSH keys on this machine?

The following command lists the contents of the .ssh folder of the current user. SSH keys are just "plain" text files!

ls -al ~/.ssh

So how exactly can I generate an SSH key?

On your preferred Terminal app, run:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Next you'll be asked where to save the key:

> Enter a file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

Since you'll probably have more than one key, it's better to not accept the default suggestion /Users/[YourUser]/.ssh/id_rsa and instead use something like:

/Users/[YourUser]/.ssh/github-[user]-[machine]

This will make it easier to know which key is used where.

We'll refer to the name chosen above for the SSH key as MY_KEY_NAME, in the rest of this article.

In my experience, the path entered needs to be absolute so you can't use ~/.ssh/some-key-name.

The rationale of using a generic id_rsa name is that you can have just one key that identifies this computer and you use that key on any services (GitHub, BitBucket, etc...) that you need to access. If at some point you need to revoke access to a certain service, you can delete the key on that service settings. (GitHub profile settings, etc...).

Personally I find it clearer to have specific keys for each service.

Lastly, you'll be prompted to enter a passphrase.

Enter passphrase (empty for no passphrase):

This allows securing your SSH key. While you can leave this empty (press ENTER) and not use a passphrase it's usually highly recommended. And by adding the key to ssh-agent via ssh-add we'll avoid having to type it constantly.

At this point, your new SSH key has been created.

You can see it by running the list command: ls -al ~/.ssh

You'll see two entries with MY_KEY_NAME. One is the private key which you should never share and the other, ending in .pub, is the public key, which you can use to gain access to remote services. Whenever you need to provide your SSH key, you always give the public key, never the private key.

Let's ensure the SSH agent "knows" about our new key and loads it automatically, which saves us from having to constantly re-type the passphrase.

Run each of the lines below in you terminal app:

eval "$(ssh-agent -s)" && ssh-add -K ~/.ssh/MY_KEY_NAME

We've finished generating a new SSH key, named it with a clear name that allows us to differentiate the keys in the future should we have more that one, and saved it to the ssh-agent so we don't need to constantly type the passphrase.

But GitHub has no knowledge of this key yet...

Hey GitHub, here's my new SSH key!

Start by copying the public key (note the ending .pub) to the clipboard so we can paste it at GitHub's dashboard:

pbcopy < ~/.ssh/MY_KEY_NAME.pub

Now go to your GitHub account Settings > SSH Keys. At the time of writing the URL is https://github.com/settings/keys and click the button New SSH Key.

You'll see a form with two fields:

Title: Enter a descriptive name for this key. Ex: My Work Mac

it's important to use a clear title as it's what will allow you to know which key is used where and as such know which ones can/should be deleted.
Key: Hit CMD+V to paste the SSH public key copied above.

it should be a long string that starts with ssh-rsa ... and ends with the email address entered when the key was created.

Yay! All done!

Hope this article has been useful for you.

Any amends or suggestions are welcome in the comments below.