Forem: Kyle Parisi

Modals Are Promises

Kyle Parisi — Tue, 10 Nov 2020 02:47:43 +0000

Can modals be treated like promises

The answer is yes. I can't count how many times I've coded a confirmation modal. Every time I've been unhappy by the extra state management required to handle the open and close actions. There must be a better way. Promises are a natural resource for control flow. Since a modal is almost always dictated by a user action, promises are a nice pattern.

Here is the tl;dr

// get some context for the modal
const thingContext = {count: 109}
const userAction = new Promise((resolve, reject) => {
  // show the modal
  setDialog({resolve, reject, context: thingContext})
})
try {
  await userAction;
} catch {
  // negative action flow
  setLoading(false);
  setDialog(false);
  return false;
}
// positive action flow

kyleparisi / promise-modal

promise-modal

Article

View on GitHub

15 Seconds of Fame!

Kyle Parisi — Fri, 25 Sep 2020 17:45:20 +0000

It's not often as a web developer that the thing you work on manifests into the physical world. This was one of those rare times. Earlier this week Tesla projected my company's website on a big screen behind the likes of Elon Musk and team.

For once I could show people a physical picture or youtube videos and be like, this is what I work on. Now I'm wondering what others could do to make their website feel more physical like this. Usually developers think in terms of urls and digital mediums. Is there something you could do to make your projects stand out from just 1 digital property online?

Have a great weekend!

Quick UI Review - Stripe Homepage

Kyle Parisi — Thu, 06 Aug 2020 18:43:26 +0000

Font

There are 7 fonts with 124(!) variations.

Sohne-var is the primary font. This was probably a ">= 5" figure decision for them to license this font. Here is some more detail about the font and similar types.

Colors

73 colors were used on that page. This is probably high because they make almost everything on the page an html element. This is highlighted by the fact that there are only 26 assets on the whole page.

Layout

Their previous design was 2 columns with a balance on the center line of the screen. This new design is 4 columns with a left aligned balance.

Notable

The animations are smooth and intricate as they were with the previous site. The animated text editor is pretty amazing.

The outlines I added to illustrate that it's not a gif but actual html elements. Looking at the source code it supports multiple languages, autocompletions, line numbers, a terminal area and more. I can only imagine this feature took considerable amount of time to make. Hopefully they open source it at some point.

Conclusion

There is a depth of knowledge with each new design that stripe uses. My previous post talked about the animation of the drop down from their previous version:

Making Web Animations

Kyle Parisi ・ Oct 17 '18 ・ 2 min read

#animations #css #frontend

Revisiting CPanel Hosting After 8 Years

Kyle Parisi — Fri, 22 May 2020 12:29:02 +0000

CPanel

Oh CPanel. You were serverless before serverless. You were the cloud before the "the cloud". Things were simpler yet still very hard. It's where I started building my first websites. I knew nothing about servers. Fast forward almost a decade and I know way more about servers than I care to admit.

Shared hosting is still a thing and I wonder what it looks like after all this time. So in this post I take a drive down nostalgia road and see what it was/is like to use shared hosting.

Pricing

The advertised pricing is still pretty mind bending. For less than a cup of coffee per month you can host a website.

Look at that up-sell of 90 cents!

But in reality it's more like this.

Experience

The experience is still very much what I remember, just some fancier icons in the CPanel area. The hosting company emails you your password which is pretty interesting. I have to assume their support team has access to this information as well.

What a beautifully formatted invoice

Look at that invoice. No "Cost Explorer" or "Cloud Economist" needed here. Just 12 months of compute baby.

Deployment

Deployment is as easy as drag and drop on an FTP client.

There is one gotcha though. The hosting company is just so busy setting up my cookie cutter account that they couldn't be bothered to tell me when I should expect my FTP files to show up. So I uploaded this and waited.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Retropanel.com</title>
  <meta name="description" content="Retropanel">
  <meta name="author" content="Kyle Parisi">

</head>

<body>
    <h1>Hello</h1>
</body>
</html>

That's right. What you see there is an HTML 5 document. Just look at my lighthouse score.

Cooking with gas. Let's do something dynamic shall we. Let me make a ☕ and I'll be right back.

I'm back! Check it out!

retropanel.com

The next unicorn start up

The hardest part of making this little app was remembering how .htaccess file works. I have converted to Nginx as my reverse proxy a long time ago. The app is a simple timestamp computation and CRUD functionality for subscribers. Syncing the FTP files was a little awkward but I think I could manage it with some practice.

Back To Reality

So would I recommend anyone in this day an age use a shared hosting provider over one of the juggernauts like AWS or Google? The pricing is a little bait and switch.

Like Amazon Lightsail is very clear and doesn't change over the long run. On the other hand, the shared hosting gives you some services like mysql, emails, free domain for the first year, crude metrics, and support. One thing I would recommend is to not use your main contact information. The shared hosting company I used obviously sold my information and now I'm being spammed.

If I were a small local retail shop or maybe a public service with very limited resources, I would probably be ok with it. Will I ever use CPanel for anything? Absolutely not.

This was fun. I hope to do it again in another 10ish years.

Running Scripts at Login MacOS

Kyle Parisi — Wed, 13 May 2020 12:52:16 +0000

The Problem

Every time my computer restarts and I try to pull a git repo, I get a credentials error. So I have to open terminal and run:

ssh-add -KA

This command will take your keychain ssh keys and add them to the ssh agent. The -K is not required but if you don't have a passphrase stored for an ssh key already you can enter it now. I don't recall this being a problem in older versions of MacOS but it is a problem now.

The Solution

I decided to make use of the LaunchAgent feature. This feature will run for the current user, at login, either a daemon or one-off scripts. Here is what you need to do to have the above command run at login.

Create the following script

#!/bin/bash

ssh-add -KA

Place the script somewhere you like

mkdir -p ~/scripts/startup
# create script in ^ folder
chmod +x ~/scripts/startup/ssh-add.sh

Now configure LaunchAgent

# using sublime text editor to make this file
subl ~/Library/LaunchAgents/com.ssh-add.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>Label</key>
        <string>com.ssh-add.app</string>
        <key>Program</key>
        <string>/Users/kyleparisi/scripts/startup/ssh-add.sh</string>
        <key>RunAtLoad</key>
        <true/>
    </dict>
</plist>

Note the program string above should reflect your user. Make sure you try running it first. Now every time you login, you no longer need to think about adding ssh keys to your agent. You could do other things like run docker system prune commands, archive your desktop files, mount a network file system, whatever! Enjoy!

Cynical Observations

Kyle Parisi — Thu, 13 Feb 2020 22:41:00 +0000

Fear of bad code makes more complex code.

Docker. It works on my computer. Turns into a dance of 'docker-compose down, docker-compose rm blah, docker blah build, docker up --build'. Or if you’re a pro you’ve aliased everything.

Webpack. Chrome is literally an operating system of power but we turned concatting files into a science degree.

React. Where smart people write 50 line ternaries, overly complex mapping, and no reactive data.

React.
// Detect dark theme var iframe = document.getElementById('tweet-1256148180116353024-448'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1256148180116353024&theme=dark" }

Typescript. For those that fear they might have to look at the browser console with 0 runtime safety.

Typescript. Using dynamic object selection negates type safety. So much for being DRY.

Kubernetes. Has your operations gotten cheaper? Or how about that scale?

Graphql. A technology optimized for not talking with your team. Screw your pagination, infinite loops, duplicated queries. It’s good for me now.

Microservices. Imagine the unix philosophy, but instead it turns into networked, tightly coupled, dependencies.

Also microservices. How many times have you synchronized deployments?

Terraform. Have you had a problem in the last 30 days that terraform solves?

Simple MySQL with Elixir

Kyle Parisi — Tue, 17 Dec 2019 13:23:08 +0000

Harder than I thought

As with my last post on elixir, I found the default database driver to be painful. Granted this might have been because I have been so trained into model based database interactions or even prepared query interactions. I'm still not a fan of the ecto system; it prevents me from being able to prototype my application before hooking up the datastore.

After a bit of Google research, I found a few options. Unfortunately, they were very sparse in detail. The confusing part is for a functional language, the library authors seem to want to mask this with fancy macros. For a beginner like myself, it makes mental adoption very hard.

I'm also not a fan of the Result struct that the library myxql provides. I just want the data from the database as a table. Instead you'll get something like:

{:ok,
 %MyXQL.Result{
   columns: nil,
   connection_id: 135386,
   last_insert_id: 0,
   num_rows: 1,
   num_warnings: 0,
   rows: nil
 }}

A simple solution

Thankfully I stumbled upon this post by John Smith. Here is how you might use this idea along with the MyXQL library which ecto uses for mysql.

defmodule DB do

  def paginate(query) do
    query = String.replace(query, ";", "") |> String.trim
    query <> " LIMIT 0,100;"
  end

  def paginate(query, page) do
    query = String.replace(query, ";", "") |> String.trim
    query <> " LIMIT #{page * 100},#{page * 100 + 100};"
  end

  def query(query, repo, params \\ []) do
    MyXQL.query(repo, query, params) |> to_maps
  end

  # Insert
  def to_maps({:ok, %MyXQL.Result{last_insert_id: id, columns: nil, rows: nil}}) when id > 0 do
    %{id: id}
  end

  # Update/Delete
  def to_maps({:ok, %MyXQL.Result{last_insert_id: 0, columns: nil, rows: nil}}) do
    :ok
  end

  # Select
  def to_maps({:ok, %MyXQL.Result{columns: columns, rows: rows}}) do
    Enum.map(rows, fn row ->
      columns
      |> Enum.zip(row)
      |> Enum.into(%{})
    end)
  end
end

How to use

Establish your connection

# if in interactive shell
iex> {:ok,:myapp_db} = MyXQL.start_link(username: "root", password; "bleepbloop", hostname: "localhost", database: "myapp")

# if using supervision tree
defmodule MyApp.Application do
  use Application

  def start(_type, _args) do
    children = [
      {MyXQL, username: "root", password: "bleepbloop", hostname: "localhost", database: "myapp", name: :myapp_db}
    ]

    Supervisor.start_link(children, opts)
  end
end

Use the library

"select * from user" |> DB.query(:myapp_db)
# LIMIT 0,100
"select * from user" |> DB.paginate |> DB.query(:myapp_db)
# LIMIT 100,200
"select * from user" |> DB.paginate(1) |> DB.query(:myapp_db)
# use parameters
"select * from user where id = ?" |> DB.query(:myapp_db, [1]) |> hd

The above queries all return a list of maps or a map which is easily converted into json:

# select:
[%{}, ...]
# or
%{}

# insert
%{id: id}

# update/delete
:ok

A Quick Dive in Elixir

Kyle Parisi — Wed, 25 Sep 2019 14:10:11 +0000

What is elixir?

Yet another programming language. There are some unique characteristics of elixir that I have not experienced with other languages. First, the way I approach learning a new language might be of interest. What I do is start a repo for the language or framework, in this case elixir-kiss (keep it simple stupid).

kyleparisi / elixir-kiss

elixir-kiss

Usage

mix deps.get
# terminal 1
iex --name a@127.0.0.1 -S mix
# terminal 2
iex --name b@127.0.0.1 -S mix

# either terminal, Node.list.  example:
iex(b@127.0.0.1)1> Node.list
[:"a@127.0.0.1"]

View on GitHub

From there I start exploring basic ideas that I'm curious about and make branches off the original test bed.

What can you do with elixir?

The main thing you'll find elixir being used for is some kind of distributed system. It's a fun idea to think of a cluster of computers as a single application. To get an application "networked" together, you can do this in a few lines. Here is one example using a library that clusters 2 nodes.

defmodule MyApp.App do
  use Application

  def start(_type, _args) do
    topologies = [
      example: [
        strategy: Cluster.Strategy.Epmd,
        config: [hosts: [:"a@127.0.0.1", :"b@127.0.0.1"]],
      ]
    ]
    children = [
      {Cluster.Supervisor, [topologies, [name: MyApp.ClusterSupervisor]]},
      # ..other children..
    ]
    Supervisor.start_link(children, strategy: :one_for_one, name: MyApp.Supervisor)
  end
end

There are a couple ways you could cluster your applications. The above example uses a builtin strategy called Erlang Port Mapper Daemon. Things like DNS, Multicast UDP gossip, or other API based methods can be used.

What is unique about elixir?

There are a number of unique attributes of elixir. Elixir's control flow is heavily based on pattern matching. This means you define functions based on the data structure being passed in. That looks something like:

  post "/login" do
    {:ok, body, conn} = read_body(conn)
    case Poison.decode(body) do
      {:ok, %{"email" => "", "password" => ""}} ->
        send_resp(conn, 400, Poison.encode!(%{errors: %{email: "Please provide an email.", password: "Please provide a password"}}))
      {:ok, %{"email" => email, "password" => password}} ->
        send_resp(conn, 200, "")
      {:error, :invalid, 0} ->
        Logger.info("No body provided for /login")
        send_resp(conn, 400, Poison.encode!(%{errors: %{email: "Please provide an email.", password: "Please provide a password"}}))
      {:ok, %{"email" => email}} ->
        Logger.info("No password provided for /login")
        send_resp(conn, 400, Poison.encode!(%{errors: %{password: "Please provide a password"}, email: email}))
      {:ok, %{"password" => _}} ->
        Logger.info("No email provided for /login")
        send_resp(conn, 400, Poison.encode!(%{errors: %{email: "Please provide an email."}}))
    end
  end

In elixir there are no return or break statements. The last line in a function is the return statement. This one really caught me off guard. Return statements are definitely designed for procedural mentality. Not having returns really emphasizes the pattern matching functionality.

Documentation is a first class citizen. I've never seen this before.

defmodule Math do
  @moduledoc """
  Provides math-related functions.

  ## Examples

      iex> Math.sum(1, 2)
      3

  """

  @doc """
  Calculates the sum of two numbers.
  """
  def sum(a, b), do: a + b
end

If you configure your tests to use doctests, it will actually assert against the iex> statements. Very cool.

Running elixir can be pretty complex due to it's distributed nature. But elixir is using erlang under the hood which happens to come with some handy GUI tools built in. You can see some of that here.

"Let it crash". Elixir – and Erlang – encourage you to code the happy path. Runtime errors should be allowed to crash the process. ¹

Lastly, elixir has a Read Eval Print Loop (REPL) runtime ability that makes it easy to test thoughts and explore the running application.

What I don't like

Even though elixir has reasonable types (tuples, maps, lists, etc.), doing type conversion I found to be confusing. If I wanted to cast something from a map into a user defined struct, it did not go smoothly.

I was not very pleased with the database driver. The most recommended interface is an abstracted library called Ecto. To use this interface you have to define repos, schemas, changesets or queries. The queries look like some kind of Domain Specific Language (DSL) and changsets is a foreign concept to me. It's surprising that connections, prepared statements, and queries is not the suggested driver.

Some library documentation, although heavily documented, doesn't seem very helpful at times.

Final thoughts

There isn't a language that is the silver bullet for all problems. Elixir is no different. It's still a young language, being originally created in only 2011, it's foundation is based on erlang which is much older. I may look back at it when I have a need for distribution or clustering.

Some interesting links:

https://10consulting.com/presentations/building-cqrs-es-web-applications-in-elixir/#34 ↩

Multiple Emails on GSuite

Kyle Parisi — Mon, 15 Jul 2019 22:15:08 +0000

Email Aliases

Email aliases are one way to get more bang for your buck. GSuite costs me $6.36/month. For that you can have up to 30 email aliases for a single user. So this is how you do it if you are the GSuite admin. After logging in you can use the following links.

Ensure Default Routing

Default routing is a way to catch all invalid emails to your user. If someone typos your email address, this will help you still receive the email.

Add Your Domain

Here you can add your domain which is additional to your gsuite domain. You probably don't want it to be an alias.

Add Organizational Unit

This will allow you to make shared inboxes under google groups.

Add Email Aliases to User

Click on the user of interest and then "User Information". Add whatever aliases you currently have. At this point you'll need to wait up to an hour before the alias is added in gmail.

Add Send From

Under the "send mail as" section you should be able to add the email from the previous step. Leave "Treat as an alias" checked and if you waited long enough from the last step, it should accept the email.

Bonus: Email profile picture

If you want your profile picture to show in gmail clients, this is how you would do that.

Charles Proxy

Kyle Parisi — Tue, 14 May 2019 17:38:12 +0000

Charles What?

Charles Proxy is a GUI to "man-in-the-middle" (MITM) yourself by snooping and/or modifying your own HTTP(S) requests. Usually, this is seen as a problem. However, it can be an immensely powerful tool for front-end development. I will explain what can be done with it.

Test Updates Before Go-Live

I used to maintain a JavaScript file which was deployed on hundreds of e-commerce websites. There were times I needed to know if my logic was going to work before deploying. So, in this case, I would "Map Local" the JavaScript file. This allowed me to map HTTP(S) requests for the remote JavaScript file to a local .js file instead. This is how I would know that my code was solid, before deployment.

A customer once claimed my JavaScript was breaking their website. To prove that that was not the case, I quickly mapped the production .js file to a blank file, and proved that their website was still broken even with my .js file having no content.

Test Production Level Data

Unfortunately, a production environment sometimes includes data which is missing within development or UAT environments. Perhaps an edge-case of the system is the reason. If I need to test a front-end change with this set of data, I could use the "Rewrite" feature of Charles to replace the body of a development or UAT request to be whatever data that I need to test. This often times is much faster to do, rather than mocking up the data for the interface to use.

Test Backends

In the last example, let's say you spun up a resource in Europe (you know because of privacy laws) for your backend. You want to test end-to-end that the new region is working, before pointing your library to this new region. In this case, you can "Map Remote". Just swap your US region DNS with your EU region DNS.

That's Charles

Hopefully this illustrates a valuable tool for you. Sometimes working with the front-end of the web can feel like having super-powers. You can do anything you want and most likely no one will know. The same cannot always be said when you make changes to backend technologies.

Creative Selection

Kyle Parisi — Fri, 29 Mar 2019 23:06:01 +0000

An inside look

Creative Selection by Ken Kocienda is a book about working inside Apple as a software developer. I must say Ken's creditability is pretty amazing given that he wrote the iOS keyboard software. His book takes a unique perspective on what it was like working at Apple.

Prototyping

The first thing that I think is important, he emphasized the routine of demoing software. It wasn't just one demo and the work was done, it was an iterative approach to meet the quality and taste of Apple. I empathize with this idea coming from the mechanical engineering background. Prototyping is essential to making anything physical. You'll never get it right the first time. The story behind making the iOS keyboard is amazing. I took it completely for granted how something which looks so obvious nearly killed the project entirely.

Design

A quote really resonated with me.

Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, “Make it look good!” That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.
Steve Jobs

Ken's book describes how this ethos was applied in his work.

An amazing summation

A small group of people built a work culture based on applying the seven essential elements through an ongoing process of creative selection
Ken Kocienda

To find out what the seven essential elements are you'll have to read the book 😉. The book is very easy to read and not overly technical. Happy reading!

JS Proxies

Kyle Parisi — Tue, 12 Mar 2019 13:12:22 +0000

You might be using proxies without knowing it

If you write an application in Vuejs or from what I can tell, React was using proxies before. Proxies are like giving your objects (only objects) super powers. Let me describe what you can do with an example.

Dyn

In a previous post, I talk about my take on dynamodb.

Every time I look at the Dynamodb SDK docs, I think 'man this is an over engineered hot mess'.

The API is not intuitive and requires googling every time. Every operation requires a js object to be sent to Dynamodb's API. It made me wonder if I could mask the js object with a js proxy. I think it provides for a cleaner and more memorable interface. The idea started with a single signature.

create[table] = {}

Could I create a dynamodb record with that as simple interface?

const create = new Proxy(
  {},
  {
    get: function(target, name) {
      return target[name];
    },
    set: function(obj, prop, value) {
      const params = {
        TableName: prop,
        Item: value
      };
      obj.promise = docClient.put(params).promise();
    }
  }
);

Hopefully you can see the above generates the parameters required for dynamodb's docClient (so I don't have to look them up). It also stores the promise in the object (create.promise) if you need to know when it's done creating the object.

It worked. So I made more operations into a library I called, Dyn:

kyleparisi / dyn

Experiment library to read from dynamodb

Dyn

Super crude idea for a library to talk with dynamodb. Does not handle paging at the moment. An interesting use of js proxies.

npm i @nargella/dyn

const Dyn = require("@nargella/dyn");
const AWS = require("aws-sdk");
AWS.config.region = "us-east-1";
const {
  reader,
  query,
  queryByIndex,
  queryAndFilter,
  scan,
  create,
  update,
  updateConditionally,
  del
} = new Dyn(new AWS.DynamoDB.DocumentClient());

See dyn_data for some data.

Create

// create[table] = {}

create.ProductCatalog = {
  Id: 500,
  Price: 222,
  ProductCategory: "Bicycle",
  Title: "99-Bike-212",
  BicycleType: "Hybrid",
  Brand: "Brand 212",
  Color: ["Red"],
  Description: "212 Description"
}

Read

Basic key/value:

// reader[table]({partitionkey: value, [sortkey: value]})
await reader.Movies({

…

View on GitHub

Gotchas

Proxies are very cool but there are 2 things that caught me off guard. Firstly, the root object gives you nothing. In the above example I can't proxy the create key to anything. Secondly, you can't nest properties as a single proxy definition.