iwatakeshi

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

iwatakeshi

    country_codes = [
      %{ iso_3166_1: "AF", name: "Afghanistan" },
      %{ iso_3166_1: "AX", name: "Aland Islands" },
      %{ iso_3166_1: "AL", name: "Albania" },
      %{ iso_3166_1: "DZ", name: "Algeria" },
      %{ iso_3166_1: "AS", name: "American Samoa" },
      %{ iso_3166_1: "AD", name: "Andorra" },
      %{ iso_3166_1: "AO", name: "Angola" },
      %{ iso_3166_1: "AI", name: "Anguilla" },
      %{ iso_3166_1: "AQ", name: "Antarctica" },

iwatakeshi

Elixir + Phoenix Framework + Guardian + JWT + Comeonin

Preparing environment

We need to generate secret key for development environment.

mix phoenix.gen.secret
# ednkXywWll1d2svDEpbA39R5kfkc9l96j0+u7A8MgKM+pbwbeDsuYB8MP2WUW1hf

Let's generate User model and controller.

iwatakeshi

  defmodule EmailValidator do
  
    # ensure that the email looks valid
    def validate_email(email) when is_binary(email) do
      case Regex.run(~r/^[\w.!#$%&’*+\-\/=?\^`{|}~]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/i, email) do
        nil ->
          {:error, "Invalid email"}
        [email] ->
          try do
            Regex.run(~r/(\w+)@([\w.]+)/, email) |> validate_email

iwatakeshi

Auth0 + FaunaDB ABAC integration: How to expire Fauna user secrets.

Fauna doesn't yet provide expiration/TTL for ABAC tokens, so we need to implement it ourselves.

What's in the box?

3 javascript functions, each of which can be imported into your project or run from the command-line using node path/to/script.js arg1 arg2 ... argN:

1. deploy-schema.js: a javascript function for creating supporting collections and indexes in your Fauna database.

iwatakeshi

const SCROLL_UP = 1;
const SCROLL_DOWN = -1;

const useScrollDirection = ({
  initialDirection,
  thresholdPixels,
  off
} = {}) => {
  const [scrollDir, setScrollDir] = useState(initialDirection);

iwatakeshi

#
# CORS header support
#
# One way to use this is by placing it into a file called "cors_support"
# under your Nginx configuration directory and placing the following
# statement inside your **location** block(s):
#
#   include cors_support;
#
# As of Nginx 1.7.5, add_header supports an "always" parameter which

iwatakeshi

# to generate your dhparam.pem file, run in the terminal
openssl dhparam -out /etc/nginx/ssl/dhparam.pem 2048

iwatakeshi

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">

<!-- Responsive indicators! -->
<div class="fixed top-0 right-0 z-50 bg-pink-500 text-white shadow-md px-2 rounded-bl font-mono">
  <span class="sm:hidden">default</span>
  <span class="hidden sm:inline md:hidden">sm</span>
  <span class="hidden md:inline lg:hidden">md</span>
  <span class="hidden lg:inline xl:hidden">lg</span>
  <span class="hidden xl:inline">xl</span>
</div>

iwatakeshi

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: `${process.env.API_URL}/graphql`,
        httpLinkOptions: {
          fetchOptions: {
            mode: 'cors' //Cors Needed for external Cross origins, need to allow headers from server
          },
          credentials: "omit" //must be omit to support application/json content type 
        }