DEV Community: Michael Fatemi

Turn your Create React App into a Progressive Web App in 100 seconds

Michael Fatemi — Sat, 10 Jul 2021 00:25:21 +0000

Progressive Web Apps (PWAs) let regular apps become accessible offline. They also have access to more features than regular apps.

React Apps need two features to become Progressive Web Apps.
First, they need a service worker, which does work in the background of the app. Second, they need a manifest.json file in the public folder, which includes the name of the app, the home page, and icons.

If you're starting fresh, you can use the Create React App template cra-template-pwa (or cra-template-pwa-typescript) to bootstrap this process. If you want to create a React app from the start like this, use the command npx create-react-app app-name --template cra-template-pwa or npx create-react-app app-name --template cra-template-pwa-typescript.

But, if you're like me, you didn't think to add this template in the beginning, and are wondering how to add it to an existing app.

1. `manifest.json`

manifest.json goes in the public folder.

Most parts are self-explanatory. You can generate this file with websites like Simicart's.

Here's an example. Note that this requires favicon.ico, logo192.png, and logo512.png to be available in the public folder.


{
    "short_name": "App",
    "name": "My App",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

2. `service-worker.js`

For a baseline, go to the cra-template-pwa github.

Copy service-worker.ts and serviceWorkerRegistration.ts into the src folder.

Then, at the top of your index.tsx (or any entrypoint), import the service worker registration like so:


import * as serviceWorkerRegistration from './serviceWorkerRegistration';

At the bottom of your index.tsx, add the following code to opt into an "offline-first" app:


serviceWorkerRegistration.register();

Learn more about PWAs

Spamming Scammers

Michael Fatemi — Wed, 07 Jul 2021 22:46:19 +0000

Have you ever received a text from a friend that was unfortunately hacked on Facebook?

Phishing is where an untrustworthy website pretends to be someone they are not, in order to collect visitors' login information.

I really dislike phishers, so I decided maybe I would get revenge. Five of my friends sent me a "video" just today.

I clicked on the "video", and it took me to a fake Facebook login page. I looked into the page, and saw this HTML:


<form method="post" action="https://mortalkomb07.xyz//save.php?api=1&amp;lan=facebooknew&amp;ht=1&amp;counter0=combo1407" class="mobile-login-form _5spm" id="login_form" data-sigil="m_login_form" data-autoid="autoid_2" data-countryinsert="true">
    ...
    <input name="pass" type="password">
    <input name="username" type="text">
    ...
</form>

I decided I would replicate fake requests, and hopefully overwhelm them with false data, at least delaying them from attacking other, real, accounts.

I loaded some fake usernames, passwords, and country data (that was also included in the form.)

Setup

First, we import some libraries.

Then, we load some fake data.

import requests
import random
import string
import json

url = 'https://mortalkomb07.xyz//save.php?api=1&lan=facebooknew&ht=1&counter0=combo1407'
chrome_user_agent = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36'

firstnames = json.load(open("firstnames.json"))
surnames = json.load(open("surnames.json"))
countries_and_states = json.load(open("countries_and_states.json"))['countries']

email_domains = ['yahoo.com', 'gmail.com', 'hotmail.com', 'verizon.net']

letters = string.ascii_lowercase
numbers = string.digits

password_chars = string.ascii_letters + string.digits

coinflip = lambda: bool(random.randint(0, 1))

The Loop

Now, we loop 10,000,000 times.

Each time, an email gets generated based on random names and surnames.

A country and state are chosen randomly.

A password is generated as a string of random characters.

Finally, a request is sent to their server.


for x in range(10000000):
    email = ''
    # first name
    email += random.choice(firstnames).lower()

    # add a surname
    if coinflip():
        email += "." if coinflip() else ""
        email += random.choice(surnames).lower()

    if coinflip():
        email += str(random.randint(0, 100))

    email += "@" + random.choice(email_domains)

    password = ''
    for y in range(random.randint(8, 20)):
        password += random.choice(password_chars)

    country_and_states = random.choice(countries_and_states)
    while len(country_and_states['states']) == 0:
        country_and_states = random.choice(countries_and_states)

    country = country_and_states['country']
    state = random.choice(country_and_states['states'])

    # send the request

    requests.post(url, {
        "ua": "",
        "email": email,
        "pass": password,
        "pais": country,
        "Country": country,
        "country": country,
        "state": state
    }, headers={
        "User-Agent": chrome_user_agent
    }, allow_redirects=False)

    print("sent", x + 1, "fake emails and passwords")

Later, the output is:

This was a fun exercise, and hopefully the scammers get held back.

Add Caching to Any Python Function in One Line

Michael Fatemi — Wed, 07 Jul 2021 22:24:13 +0000

Did you know that Python actually has built-in decorators that can add a cache to any function? (what are decorators?)

Let's say I have a function that requires a bit a computing power. For this example, I'll use a fibonacci sequence calculator.

def fib(x):
    if x <= 1:
        return 1
    return fib(x - 1) + fib(x)

Using Python's builtin functools library, I can add a "cache" in one line. A cache will remember the outputs of a compute-heavy function so the values don't need to be calculated multiple times.

If a set of inputs have already been calculated, the cache decorator will return the calculated result without running the fib() function.


from functools import cache

@cache
def fib(x):
    if x <= 1:
        return 1
    return fib(x - 1) + fib(x)

However, @cache will store an unlimited number of inputs and outputs. If we want to limit it to only, say, 1,000 cached values, we can use a "least-recently-used" or "LRU" cache.

With this type of cache, Python will only cache the 1,000 most recently used values. If a new value is calculated, the 1,001st value will be "evicted" from the cache (removed from memory).

Example 1 (note that we do not need parentheses):


from functools import lru_cache

@lru_cache
def fib(x):
    if x <= 1:
        return 1
    return fib(x - 1) + fib(x)

Example 2 (maximum size of 1000 elements):


from functools import lru_cache

@lru_cache(max_size=1000)
def fib(x):
    if x <= 1:
        return 1
    return fib(x - 1) + fib(x)

A Next-Generation ORM: Prisma

Michael Fatemi — Wed, 07 Jul 2021 19:36:20 +0000

What is Prisma?

Prisma is one of the best database libraries I've ever used. In a nutshell, you write a schema, and Prisma can apply the changes to your database, and generate a Typescript client library custom-tailored to your databases.

What are we making?

For this example, I'll use a simple blog app. It has a User table, and an Article table. Users can have many Articles, and each Article only has one author.

To install Prisma, run yarn add prisma -D.

The Schema

In a folder called prisma at the root of your project, you can create a file called schema.prisma. This is where the descriptions (or "schemas") of your tables will be stored.

Prisma uses this file to apply changes to the database, and generate a custom client for us.

You can ignore the migrations folder for now.

Datasource

To specify where your database will be, you start a datasource block.

In the following snippet, I use an SQLite database (a lightweight database good for quickly testing apps, which stores the database in a single file). For the "url" of the SQLite database, I specify database.db.

Sqlite

datasource db {
  provider = "sqlite"
  url      = "file:./database.db"
}

Postgres

Alternatively, you can use Postgres or MySQL as your database.

Because exposing Postgres's database url can compromise its security, we can store it as an environment variable to avoid putting it directly in the code. Prisma supports .env files, which loads environment variables from a file called .env, allowing for a portable development environment.

This is what the snippet for a Postgres database would look like:

datasource db {
  provider = "postgres"
  // Access the DATABASE_URL variable.
  url      = env("DATABASE_URL")
}

Generator

Remember how I said Prisma can generate client-side code for you?

This snippet specifies exactly what behavior the Prisma generator will follow. This has worked perfectly for me.

generator client {
  provider = "prisma-client-js"
}

How the turntables...

Now, it's time for us to add our tables. For this example, I'll use a simple blog app. It has a User table, and an Article table. Users can have many Articles, and each Article only has one author.

We'll start with some basic details about each user, so we can get familiar with the syntax of Prisma.

To start the schema for a table, we declare a model block:

model User {
  // Our fields (columns) go here...
}

We'll add an ID column, which will be an integer, an email column, which will be a string, and a name column, which will also be a string.

model User {
  id          Int
  email       String
  name        String
}

Because we want our ID to be indexable, we'll add the @id decorator. This is a simple app, so we'll make its value automatically increment for each user.

model User {
  id          Int    @id @default(autoincrement())
  email       String
  name        String
}

Because we want each user's email to be unique, we'll add the @unique decorator.

model User {
  id     Int    @id @default(autoincrement())
  email  String @unique
  name   String
}

Now, time for our Article model. We'll make an ID field in the same way as before, and also add a title field, a content field, and a field to specify when the article was published. Finally, we'll add an authorId field for the ID of the user who authored the article.

model Article {
  id          Int @id @default(autoincrement())
  authorId    Int
  title       String
  content     String
  publishedAt DateTime
}

Here's a complete list of data types supported by Prisma.

Our article has a field called authorId, but wouldn't it be nice if there were a field called author which had the type User? With Prisma, we can actually make this happen!

model Article {
  id          Int @id @default(autoincrement())
  authorId    Int
  author      User
  title       String
  content     String
  publishedAt DateTime
}

We aren't done yet, but there isn't much left to do.

We just need to use the @relation decorator.

The @relation decorator uses this syntax:

@relation(fields: [authorId], references: [id])

Let's break this down.

The fields attribute specifies which field of the Article references the id of the author. The references attribute specifies which field of the User table the fields attribute points to.

That might have been wordy, so I'll just show you what it would look like in the schema:

model Article {
  id          Int @id @default(autoincrement())
  authorId    Int
  author      User @relation(fields: [authorId], references: [id])
  title       String
  content     String
  publishedAt DateTime
}

Perfect.

There is one final step. Because each Article has an author, logically, each User will have several Articles. We actually cannot avoid adding that to the schema.

To reflect this in our schema, we just add an articles field to the User model. We'll make it have the type Article[].

model User {
  id       Int    @id @default(autoincrement())
  email    String @unique
  name     String
  articles Article[]
}

Phew! We're done with schema.prisma for this article.

Here's what the final schema.prisma looks like:

datasource db {
  provider = "sqlite"
  url      = "file:./database.db"
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id       Int    @id @default(autoincrement())
  email    String @unique
  name     String
  articles Article[]
}

model Article {
  id          Int @id @default(autoincrement())
  authorId    Int
  author      User @relation(fields: [authorId], references: [id])
  title       String
  content     String
  publishedAt DateTime
}

Applying changes to the database

Now, we want Prisma apply these changes to our database. This will automatically generate the custom client SDK. The process of applying changes to a database is called "migration".
The command to apply these changes is:

yarn prisma migrate dev

The dev at the end specifies that we're working in the development environment.

We will need to specify a name for the migration, so we'll just write initial migration.

If everything goes well, the output will look something like this:

Now, we're ready to start manipulating the database.

Using the Client

Now that we've generated the client code, we can start using Prisma.

If the generated client code doesn't show up, try running the command:

yarn prisma generate.

We'll write our code in a file called index.js. Prisma also has built-in Typescript support.

To create an instance of the Prisma client, we import the PrismaClient class from @prisma/client.

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

Because Prisma's client is custom-generated for our database, it has built-in Intellisense.

Let's walk through some examples of how we would use the Prisma client.

Creating a User

First, we'll create a user.

This is simple enough: creating any table in Prisma can be done with prisma.[table name].create().


prisma.user.create({
  data: {
    name: 'Michael Fatemi',
    email: '<REDACTED>',
  },
});

If we want to retrieve the ID that was autogenerated for the user:


prisma.user.create({
  select: {
    id: true
  },
  data: {
    name: 'Michael Fatemi',
    email: '<REDACTED>',
  },
});

Creating an Article

Because each Article references a User, Prisma doesn't allow us to specify the authorId manually, as this might violate the foreign key constraint created by SQL. So, we must specify that we are "connecting" a User to the article, through the syntax shown below.


async function createArticle(authorId, title, content) {
  prisma.article.create({
    data: {
      author: {
        connect: {
          id: authorId,
        },
      },
      content,
      title,
      publishedAt: new Date(),
    },
  });
}

Listing Articles written by a user

We can fetch data about a user like so:


async function getArticles(userId) {
  return await prisma.user.findFirst({
    select: {
      articles: true
    },
    where: {
      id: userId
    }
  })
}

Listing users who wrote an article before a certain date

This might not be useful in the real world, but can demonstrate how powerful Prisma can be.

This example also shows how you can create more complex queries than checking for equality of a value. You can also check if a value is less than (lt), greater than (gt), equal to (eq), or others by passing an object to the where clause instead of a value.


async function getUsersWhoWroteAnArticleBefore(date) {
  return await prisma.user.findMany({
    select: {
      id: true,
      name: true
    },
    where: {
      articles: {
        some: {
          publishedAt: {
            lt: date
          }
        }
      }
    }
  })
}

Thanks for reading this article, I hope it was helpful for learning how to use Prisma to auto-generate code!

Add interactive maps to your website without an API

Michael Fatemi — Wed, 07 Jul 2021 18:38:53 +0000

You may have wanted to add maps to your website for data analysis, at some point. I definitely did, when I developed a Coronavirus tracker last year. Trying to add maps, especially interactive ones, was difficult! It required loading the geometry of the map manually, and if you wanted to make it possible to hover over a state (for example, in the US), it was a nightmare.

Use a new type of map: svg maps.

If they're in the right use case, SVG maps can be much more effective for representing data specific to several countries at once, like Coronavirus case counts, and much easier to integrate with.

Some Benefits

You can make these maps interactive! Because SVGs are integrated with the DOM, you can add event listeners to individual states with one line of code: document.getElementById('united-states'), or document.getElementById('south-korea'). This also allows you to style the regions of the map, and shade them based on the data you want to visualize.

These maps are used live on https://ncov2019.live/map.

They don't require any API keys or custom scripting.

They are minimalistic.

These maps are available from several places, and I found mine on simplemaps.com.

You can combine this with the https://www.npmjs.com/package/svg-pan-zoom library to let users scroll through the map.