DEV Community: Seth

JavaScript Private Elements Trump Compile-Time Illusion

Seth — Wed, 23 Jul 2025 15:07:25 +0000

After spending years building systems that demand true encapsulation and security boundaries, I’ve witnessed countless debates about privacy mechanisms in JavaScript. The introduction of JavaScript private elements (MDN) marked a fundamental shift in how we think about encapsulation in the language. While TypeScript’s private modifiers have served us well as training wheels, it’s time to acknowledge that JavaScript’s native private elements represent the superior approach for building robust, secure applications at scale.

The Fundamental Difference: Runtime vs Compile-Time

TypeScript’s private modifiers operate purely at compile-time. They’re suggestions, not enforcements. Once your TypeScript compiles to JavaScript, those private modifiers vanish like morning mist. Any developer with access to your runtime code can reach into your objects and manipulate supposedly “private” members.

// TypeScript code
class BankAccount {
  private balance: number = 1000;

  withdraw(amount: number) {
    if (amount <= this.balance) {
      this.balance -= amount;
    }
  }
}

const account = new BankAccount();
// This would fail TypeScript compilation
// account.balance = 1000000; 

// But in JavaScript runtime...
(account as any).balance = 1000000; // Works perfectly fine
console.log((account as any).balance); // 1000000

JavaScript private elements, denoted by the # prefix, enforce privacy at the runtime level. They’re not just hidden—they’re genuinely inaccessible outside the class definition.

class BankAccount {
  #balance = 1000;

  withdraw(amount: number) {
    if (amount <= this.#balance) {
      this.#balance -= amount;
    }
  }
}

const account = new BankAccount();
// These all throw errors at runtime
account.#balance; // SyntaxError
account['#balance']; // undefined
Object.getOwnPropertyNames(account); // [] - doesn't show #balance

This isn’t just academic pedantry. In production systems handling sensitive data, the difference between compile-time suggestions and runtime enforcement can mean the difference between a secure system and a data breach.

True Encapsulation in Distributed Systems

When building microservices or distributed systems, you often expose objects across module boundaries. With TypeScript’s private modifiers, you’re trusting every consumer of your module to respect your privacy boundaries. This trust-based model breaks down in several scenarios:

Third-party integrations: External developers might not use TypeScript or might disable strict type checking
Dynamic property access: Reflection-based frameworks and serialization libraries often bypass TypeScript’s type system
Legacy code integration: When interfacing with existing JavaScript codebases

JavaScript private elements provide hard boundaries that survive these scenarios:

class SecureAPIClient {
  #apiKey;
  #rateLimiter;

  constructor(apiKey) {
    this.#apiKey = apiKey;
    this.#rateLimiter = new RateLimiter();
  }

  async request(endpoint) {
    if (!this.#rateLimiter.canMakeRequest()) {
      throw new Error('Rate limit exceeded');
    }

    return fetch(endpoint, {
      headers: {
        'Authorization': `Bearer ${this.#apiKey}`
      }
    });
  }
}

// No amount of runtime manipulation can extract #apiKey
const client = new SecureAPIClient('secret-key');
JSON.stringify(client); // {}
Object.keys(client); // []
Object.getOwnPropertyDescriptors(client); // {}

Performance Implications: The Surprising Truth

Conventional wisdom suggests that TypeScript’s compile-time approach would be more performant since there’s no runtime overhead. However, modern JavaScript engines have optimized private fields to be remarkably efficient. V8, SpiderMonkey, and JavaScriptCore all implement private fields using efficient internal slots that often outperform property lookups on regular objects.

Consider this performance comparison:

// Regular property access (what TypeScript compiles to)
class RegularClass {
  constructor() {
    this._private = 0;
  }

  increment() {
    return ++this._private;
  }
}

// Private field access
class PrivateClass {
  #private = 0;

  increment() {
    return ++this.#private;
  }
}

// Benchmark results on V8:
// RegularClass: ~145M ops/sec
// PrivateClass: ~148M ops/sec

The performance difference is negligible, and in some cases, private fields actually perform better due to guaranteed non-configurability and internal optimization paths.

Debugging and Development Experience

Critics often point to debugging challenges with private fields. It’s true that you can’t inspect private fields as easily in debuggers. However, this limitation has driven better debugging practices:

class DebuggableService {
  #state = { connections: 0, errors: 0 };

  // Explicit debug interface
  getDebugInfo() {
    if (process.env.NODE_ENV === 'development') {
      return {
        connections: this.#state.connections,
        errors: this.#state.errors,
        timestamp: Date.now()
      };
    }
    return null;
  }

  // Chrome DevTools protocol support
  [Symbol.for('nodejs.util.inspect.custom')]() {
    return `DebuggableService { connections: ${this.#state.connections} }`;
  }
}

This pattern encourages explicit debugging interfaces rather than relying on implementation details—a practice that leads to more maintainable code.

WeakMap Patterns: The Bridge Too Far

Before private fields, the community developed WeakMap-based patterns for true privacy:

const privateData = new WeakMap();

class OldSchoolPrivate {
  constructor() {
    privateData.set(this, { secret: 'hidden' });
  }

  getSecret() {
    return privateData.get(this).secret;
  }
}

While this achieves runtime privacy, it’s verbose, error-prone, and performs worse than native private fields. JavaScript private elements provide the same security guarantees with cleaner syntax and better performance.

Static Private Members: The Complete Package

JavaScript private elements extend beyond instance fields to include static private members, something TypeScript can only approximate:

class ConfigManager {
  static #instance;
  static #config = new Map();

  static getInstance() {
    if (!this.#instance) {
      this.#instance = new ConfigManager();
    }
    return this.#instance;
  }

  static #validateConfig(config) {
    // Private static method - truly inaccessible
    return config && typeof config === 'object';
  }

  setConfig(key, value) {
    if (ConfigManager.#validateConfig(value)) {
      ConfigManager.#config.set(key, value);
    }
  }
}

This enables sophisticated patterns like truly private singletons and shared private state across instances without exposing implementation details.

The Ecosystem Evolution

Modern frameworks and libraries are increasingly adopting JavaScript private fields. Vue 3’s reactivity system, MobX 6, and numerous other libraries use private fields for internal state management. This trend indicates the ecosystem’s recognition of their superiority:

// Modern library pattern
class ReactiveStore {
  #subscribers = new Set();
  #state = {};
  #isUpdating = false;

  subscribe(callback) {
    this.#subscribers.add(callback);
    return () => this.#subscribers.delete(callback);
  }

  #notifySubscribers() {
    if (this.#isUpdating) return;
    this.#isUpdating = true;
    this.#subscribers.forEach(cb => cb(this.#state));
    this.#isUpdating = false;
  }
}

Addressing the Weaknesses

To maintain objectivity, let’s acknowledge the challenges with JavaScript private elements:

No dynamic access: You cannot use bracket notation or computed property names with private fields
No inheritance access: Subclasses cannot access parent private fields
Tooling lag: Some older tools and transpilers struggle with private field syntax

However, these “limitations” often guide us toward better design patterns:

// Instead of dynamic access, use explicit interfaces
class DataStore {
  #data = {};

  // Bad: Trying to use private fields dynamically
  // get(key) { return this.#[key]; } // Syntax error

  // Good: Explicit interface
  get(key) {
    return this.#data[key];
  }

  set(key, value) {
    this.#data[key] = value;
  }
}

// Instead of inheritance access, use composition
class BaseService {
  #logger;

  constructor() {
    this.#logger = this.createLogger();
  }

  // Protected method pattern
  createLogger() {
    return new Logger();
  }

  logInfo(message) {
    this.#logger.info(message);
  }
}

Migration Strategies

For teams using TypeScript, migrating to JavaScript private elements doesn’t mean abandoning TypeScript. You can use both:

class HybridApproach {
  // TypeScript for type information
  private typedField: string = "typed";

  // JavaScript for runtime privacy
  #secureField = "actually private";

  // Use TypeScript private for internal APIs
  private helperMethod(): void {
    // Implementation
  }

  // Use JavaScript private for security-critical data
  #cryptographicKey = generateKey();
}

Conclusion: Embracing True Privacy

JavaScript private elements represent a maturation of the language. They provide what TypeScript’s private modifiers promised but couldn’t deliver: actual privacy. In an era where security breaches cost millions and data privacy regulations grow stricter, the difference between “please don’t touch” and “cannot touch” becomes critical.

The cloud-native and distributed systems we build today demand real boundaries, not polite suggestions. JavaScript private elements deliver these boundaries with elegant syntax, excellent performance, and growing ecosystem support. While TypeScript’s type system remains invaluable for development-time safety and documentation, when it comes to runtime privacy, JavaScript’s native solution is unequivocally superior.

As we architect the next generation of secure, scalable systems, it’s time to move beyond compile-time theater and embrace runtime reality. JavaScript private elements aren’t just an incremental improvement—they’re a fundamental advancement in how we build secure JavaScript applications. The question isn’t whether to adopt them, but how quickly you can migrate your critical code to use them.

Setting up a Nix Development Environment with Flakes and direnv

Seth — Wed, 28 May 2025 12:01:00 +0000

When I setup my most recent primary development machine I chose NixOS. I figured, why not. If it doesn't work out I'll only be out maybe a day and I'll have learned I don't want to do that. However, it ended up working out. With my new found familiarity after a few months using it I decided to take the plunge and spread my Nix chops elsewhere. This meant my MacOS machine. One place I believe Nix can be incredibly powerful is setting up a reproducible Nix development environment. Replacing traditional tools like nvm, pyenv, and others with a single, powerful solution. I'll show you how to build a practical setup that automatically activates when you enter your project directory. With this pattern a new developer can onboard installing TWO, yes only TWO, tools and Nix takes care of the rest.

What We'll Build

By the end of this guide, you'll have a development environment that:

Automatically activates when you cd into your project.
Includes all dependencies - Python, Node.js, databases, tools.
Is fully reproducible - works identically on any machine.
Requires zero manual setup - just clone and start coding.

All defined in a single flake.nix file that lives with your code!

Why Nix? Understanding the Paradigm Shift

Before diving into the setup, let's understand why Nix represents a fundamental improvement over traditional development environment management tools.

The Problems with Traditional Tools

Most developers are familiar with version managers like nvm (Node Version Manager), pyenv (Python), rbenv or rvm (Ruby), or rustup (Rust). While these tools work, they suffer from several fundamental limitations:

Language Silos: Each language requires its own version manager, leading to a proliferation of tools (nvm, pyenv, rbenv, jenv, etc.).
Global State Pollution: These tools modify global shell state, often conflicting with each other.
Incomplete Isolation: They only manage language runtimes, not system dependencies, libraries, or tools.
Reproducibility Issues: "Works on my machine" remains a problem because system-level dependencies aren't captured.
Manual Synchronization: Team members must manually ensure they're using the same versions.

The Nix Advantage

A Nix development environment solves these problems through a fundamentally different approach:

Declarative Configuration: Describe what you want, not how to get it.
Complete Isolation: Each project gets its own isolated environment with all dependencies.
Reproducibility: The same configuration produces identical environments across machines.
Unified Tool: Manage any language, tool, or system dependency with one system.
Atomic Operations: Changes either succeed completely or fail without side effects.
Rollback Capability: Easily revert to previous configurations.

Installing Nix with the Determinate Systems Installer

The Determinate Systems installer is the recommended way to install Nix. It provides a more reliable and user-friendly installation experience compared to the official installer.

Installation Steps

Download and run the installer:

curl --proto '=https' --tlsv1.2 -sSf -L https://install.determinate.systems/nix | \
  sh -s -- install

Restart your shell or source the Nix profile:

. /nix/var/nix/profiles/default/etc/profile.d/nix-daemon.sh

Verify the installation:

nix --version

The Determinate Systems installer automatically:

Enables flakes (experimental feature).
Sets up the nix-command experimental feature.
Configures better defaults for a smoother experience.
Provides uninstall capability.

Note: All instructions in this guide have been verified to work with Nix 25.05, the latest release.

Understanding Nix Flakes

Flakes are the modern way to manage Nix projects. They provide:

Lock files for reproducible dependencies.
Standard structure for Nix projects.
Composability between projects.
Better evaluation caching.

Basic Flake Structure

A flake consists of:

flake.nix: The main configuration file.

flake.lock: Automatically generated lock file (like package-lock.json).

Setting Up direnv for Automatic Environment Loading

direnv automatically loads and unloads environment variables and development shells when you enter or leave a directory.

Installing direnv

Install direnv using your system package manager:

# macOS (with Homebrew)
brew install direnv

# Ubuntu/Debian
sudo apt install direnv

# NixOS (add to configuration.nix)
environment.systemPackages = with pkgs; [ direnv ];

# Or using Nix on any system
nix-env -iA nixpkgs.direnv

Shell Integration

Add the following to your shell configuration:

Bash (~/.bashrc):

eval "$(direnv hook bash)"

Zsh (~/.zshrc):

eval "$(direnv hook zsh)"

Fish (~/.config/fish/config.fish):

direnv hook fish | source

Enhanced Nix Integration

For better Nix flake support, add to ~/.config/direnv/direnvrc:

# Better support for Nix flakes
use_flake() {
  watch_file flake.nix
  watch_file flake.lock
  eval "$(nix print-dev-env)"
}

That's it! direnv is now ready to use with Nix flakes.

Creating Your First Flake-Based Nix Development Environment

Let's create a comprehensive example that demonstrates common use cases.

Project Structure

my-project/
├── flake.nix
├── flake.lock
├── .envrc
├── .gitignore
└── src/

The Complete Nix Development Environment Flake Example

Create flake.nix:

# flake.nix - Nix Flake configuration file
# This file defines a reproducible development environment using Nix flakes
# Documentation: https://nixos.wiki/wiki/Flakes
{
  description = "Development environment with Python and Node.js";

  # Inputs are external dependencies for our flake
  inputs = {
    # nixpkgs is the main package repository for Nix
    # Using "nixos-unstable" gives us the latest packages
    # See available packages at: https://search.nixos.org/packages
    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";

    # flake-utils helps us write flakes that work on multiple systems (Linux, macOS)
    # Documentation: https://github.com/numtide/flake-utils
    flake-utils.url = "github:numtide/flake-utils";
  };

  # Outputs define what our flake produces
  outputs = { self, nixpkgs, flake-utils }:
    # This function creates outputs for each system (x86_64-linux, aarch64-darwin, etc.)
    flake-utils.lib.eachDefaultSystem (system:
      let
        # Import nixpkgs for our specific system
        pkgs = nixpkgs.legacyPackages.${system};

        # Define Python packages we want
        # The 'ps' parameter is the Python package set
        pythonPackages = ps: with ps; [
          requests    # HTTP library
          pytest      # Testing framework
          black       # Code formatter
        ];

        # Create a Python environment with our packages
        pythonEnv = pkgs.python311.withPackages pythonPackages;

      in
      {
        # devShells.default is the development environment
        # It's activated with 'nix develop' or automatically via direnv
        # Documentation: https://nixos.wiki/wiki/Development_environment_with_nix-shell
        devShells.default = pkgs.mkShell {
          # Packages to include in the shell environment
          buildInputs = with pkgs; [
            # Python with our selected packages
            pythonEnv

            # Node.js (version 24)
            nodejs_24

            # Basic development tools
            git         # Version control
            ripgrep     # Fast file search
            jq          # JSON processor
          ];

          # Shell hook runs when entering the shell
          # Use this for environment setup, variables, and welcome messages
          shellHook = ''
            echo "🚀 Development environment loaded!"
            echo "📦 Python $(python --version)"
            echo "📦 Node.js $(node --version)"
            echo ""
            echo "Run 'python' or 'node' to start coding!"
          '';

          # Environment variables
          # These are set when the shell is active
          PROJECT_NAME = "my-awesome-project";
          NODE_ENV = "development";
        };
      });
}

Setting Up direnv

Create .envrc:

# This file tells direnv to load our Nix flake environment
# Documentation: https://direnv.net/

# 'use flake' is a direnv command that activates the Nix flake in this directory
# It's equivalent to running 'nix develop' but automatic
use flake

# Optional: Add project-specific environment variables
# These are only set when you're in this directory
export API_KEY="development-key"

# Optional: Load secrets from a .env file (don't commit this file!)
# Create a .env file with KEY=value pairs for sensitive data
if [ -f .env ]; then
  dotenv .env
fi

Git Configuration

Create .gitignore:

# Nix build outputs
result
result-*

# direnv cache
.direnv/

# Environment secrets (never commit these!)
.env
.env.local

# Python
__pycache__/
*.pyc
.pytest_cache/

# Node.js
node_modules/
npm-debug.log*

Using Your Nix Development Environment

Create a new project directory:

mkdir my-project && cd my-project

Create the files shown above:
- flake.nix - Your environment definition
- .envrc - direnv configuration
- .gitignore - Git ignore rules
Allow direnv to load (you'll be prompted automatically):

direnv allow

That's it! The environment will automatically:

✅ Activate when you enter the directory
✅ Install all specified packages
✅ Set environment variables
✅ Deactivate when you leave the directory

Try it out:

python --version  # Python 3.11.x
node --version    # v20.x.x

Common Patterns and Next Steps

Adding More Languages

To add more programming languages to your environment, simply include them in buildInputs:

buildInputs = with pkgs; [
  pythonEnv
  nodejs_24
  rustc           # Rust compiler
  go              # Go language
  ruby_3_2        # Ruby
  openjdk17       # Java
];

Adding Databases

Need a database for local development?

buildInputs = with pkgs; [
  # ... other packages ...
  postgresql_15  # PostgreSQL database
  redis          # Redis key-value store
  sqlite         # SQLite database
];

shellHook = ''
  # ... existing shell hook ...

  # Initialize PostgreSQL if needed
  if [ ! -d ".postgres" ]; then
    initdb -D .postgres
    echo "PostgreSQL initialized. Start with: pg_ctl -D .postgres start"
  fi
'';

Finding Packages

To find available packages:

Search online: https://search.nixos.org/packages
Use command line: nix search nixpkgs package-name

Learning More

Nix Pills (beginner tutorial series): https://nixos.org/guides/nix-pills/
Official Nix Manual: https://nixos.org/manual/nix/stable/
Flakes Documentation: https://wiki.nixos.org/wiki/Flakes
Nixpkgs Manual: https://nixos.org/manual/nixpkgs/stable/
Community Forum: https://discourse.nixos.org/

Troubleshooting

"direnv: error .envrc is blocked"

This is a security feature. Run:

direnv allow

Flake Changes Not Taking Effect

After modifying flake.nix, reload the environment:

direnv reload
# or exit and re-enter the directory

Package Not Found

When a package isn't found, try:

Search for the exact name: https://search.nixos.org/packages
Update your flake: nix flake update
Some packages have different names in Nix (e.g., nodejs_24 instead of nodejs).

Key Takeaways

One Tool to Rule Them All: Instead of nvm, pyenv, etc., use Nix for everything.
Reproducible: Your teammates get the exact same environment.
Automatic: With direnv, environments activate automatically.
Declarative: Describe what you want, not how to install it.
Versioned: Your environment configuration lives in Git with your code.

Without a doubt the combination of Nix, Flakes, and direnv creates a development experience that's both powerful and ergonomic, solving the "works on my machine" problem once and for all. I hope this simple guide spurns you to take the plunge and start creating Nix development environments.

Rails Direct Upload to AWS S3 from React Native

Seth — Tue, 24 Sep 2019 02:19:42 +0000

I recently took on the task of allowing a user of a React Native app I’m helping build upload a custom profile picture. It sounded like a relatively simple task when I was estimating it in our sprint planning. However, I still allowed myself some grace since I’d never done such a thing before and put 8 hours on it. Little did I know what was to come.

See, I knew our backend was running Ruby on Rails (RoR) and I knew that Active Storage is now the thing but I didn’t realize the issues I would run into when I threw Amazon Web Services (AWS) S3 into the mix. I had heard good things bout Active Storage though I hadn’t worked with it any, I know RoR well enough to know that the things they add are intentional and typically well thought out, and I also knew my experience with S3 was while the configuration could be somewhat complex when it comes to IAM roles and things once it was running the way you wanted it should be pretty easy to use. Especially for something that was going to be public.

Early on in my work on this task I was informed by the back end engineer that Active Storage had this pretty neat way of allowing the client application to send files directly to S3 and just sending a reference string to the Rails server. This is preferred because instead of sending the data from the client to the Rails server to Amazon it goes directly from the client to Amazon. Bypassing one step speeds everything up and also saves some load on the server. I thought to myself this was pretty cool. We at Airship had done this before with a web app with solid results. I had that code to reference and base my work off of.

Where things start to go wrong…

This is where things start to splinter. I start to digest the code from the web app we created:

import axios from "axios";
import SparkMD5 from "spark-md5";

const getUploadInfo = async (file) => {
  const checksum = await createFileChecksum(file);

  return axios.post(
    `${process.env.BASE_URL}/rails/active_storage/direct_uploads`,
    {
      blob: {
        filename: file.name,
        content_type: file.type,
        byte_size: file.size,
        checksum: checksum
      }
    }
  );
};

export const createFileChecksum = async (file) => {
  return new Promise((resolve, reject) => {
    const chunkSize = 2097152; // 2MB
    const chunkCount = Math.ceil(file.size / chunkSize);
    var chunkIndex = 0;

    const md5Buffer = new SparkMD5.ArrayBuffer();
    const fileReader = new FileReader();

    const readNextChunk = () => {
      if (chunkIndex < chunkCount || (chunkIndex === 0 && chunkCount === 0)) {
        const start = chunkIndex * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const fileSlice =
          File.prototype.slice ||
          File.prototype.mozSlice ||
          File.prototype.webkitSlice;
        const bytes = fileSlice.call(file, start, end);
        fileReader.readAsArrayBuffer(bytes);
        chunkIndex++;
        return true;
      } else {
        return false;
      }
    };

    fileReader.addEventListener("load", event => {
      md5Buffer.append(event.target.result);

      if (!readNextChunk()) {
        const binaryDigest = md5Buffer.end(true);
        const base64digest = btoa(binaryDigest);
        resolve(base64digest);
      }
    });

    fileReader.addEventListener("error", () =>
      reject(`Error reading ${file.name}`)
    );

    readNextChunk();
  });
};

export const uploadFile = async (file) => {
  const uploadInfo = await getUploadInfo(file);

  await axios.put(uploadInfo.data.direct_upload.url, file, {
    headers: uploadInfo.data.direct_upload.headers
  });

  return uploadInfo.data.signed_id;
};

Real quick, getUploadInfo() sends the relevant info about the file the the Rails back end and returns what’s needed to direct upload to S3. createFileChecksum() is used by getUploadInfo() to calculate the base64 encoded md5 checksum of the file being sent. While Amazon does not require this Rails does. Lastly, uploadFile() uploads the file to AWS and then returns the signed_id that is then sent to Rails so it can associate that file with whatever it is in the back end.

I later realized most of this code came from somewhere else, maybe even the @rails/activestorage package. I found similar code living in a file_checksum.js file in the Rails repository on GitHub. No matter the source of the code, there was an issue. I don’t have access to the FileReader api on mobile. I’m working in React Native and not a browser. So now the search commences to doing this exact same thing in React Native.

All the things that didn’t work

Actually, I’m not going to bore you with everything that didn’t work. I honestly don’t think you care. You probably Googled how to do this and it’s NOWHERE TO BE FOUND on the internet. Yet, this direct upload has been a feature in Rails for a while. You might have even landed on the Rails issue Make ActiveStorage work for API only apps and a comment there:

For those on react native, I was able to get direct uploads working using rn-fetch-blob for md5 hashing (which is output in hex), then converting its hex output into base64 using buffer for calculating the checksum. To lookup the content_type, I used react-native-mime-types, and last but not least, used rn-fetch-blob again for calculating the size. Then, just follow the communication guidelines pointed out by @cbothner , and if the files are big, use rn-fetch-blob for efficiently uploading the file.

– Samsinite

So, I tried to follow the above thread and I couldn’t get it to work. Granted, that comment is almost 6 months old and in JavaScript time that’s a lifetime ago. The main issue I ran into is I could not for the life of me get the checksum to match up with what Amazon calculated on their side. I kept getting responses of “The Content-MD5 you specified was invalid”. I tried MANY ways of generating the md5 checksum and they all ended up with the same Content-MD5 message being returned from AWS.

So here’s how I ended up getting it to work (why you’re really here):

import axios from "axios";
import Config from "react-native-config";
import RNFetchBlob from "rn-fetch-blob";
import AWS from "aws-sdk/dist/aws-sdk-react-native";
import { Platform } from "react-native";
import { Buffer } from "buffer";
const { fs } = RNFetchBlob;

AWS.config.update({
  accessKeyId: Config.AWS_ACCESS_KEY_ID,
  region: Config.AWS_REGION,
  secretAccessKey: Config.AWS_SECRET_ACCESS_KEY
});
const s3 = new AWS.S3({ apiVersion: "2006-03-01" });

const getUploadInfo = async (fileInfo, file) => {
  const params = {
    Bucket: Config.AWS_BUCKET,
    ContentType: fileInfo.type,
    Key: fileInfo.fileName,
    Body: file
  };
  const psUrl = s3.getSignedUrl("putObject", params);
  const checksum = unescape(psUrl.split("&")[1].split("=")[1]);

  return axios.post(
    `${Config.API_UPLOAD_HOST}/rails/active_storage/direct_uploads`,
    {
      blob: {
        filename: fileInfo.fileName,
        content_type: fileInfo.type,
        byte_size: fileInfo.fileSize,
        checksum: checksum
      }
    }
  );
};

export const uploadFile = async (fileInfo) => {
  const uri =
    Platform.OS === "ios" ? fileInfo.uri.replace("file://", "") : fileInfo.uri;
  const file = await fs
    .readFile(uri, "base64")
    .then(data => new Buffer(data, "base64"));

  const uploadInfo = await getUploadInfo(fileInfo, file);
  const { headers, url } = uploadInfo.data.direct_upload;

  try {
    await axios.put(url, file, { headers: { ...headers } });
  } catch (e) {
    throw e;
  }

  return uploadInfo.data.signed_id;
};

This is definitely not the most elegant solution. I haven’t refactored it at all yet either. However, it works. In the world of code that means something. So what in the world is going on here? I’ll walk through it, although, I’ll jump around the file some. First, I setup the aws-sdk and a new s3 instance. I’m using react-native-config to manage environment variables here. I initially did this to see if I could get the signed_id I needed by just bypassing Rails and uploading directly to AWS, that didn’t work. However, what I noticed when I generated a pre-signed URL for uploading via the aws-sdk was that the URL contained and md5 checksum!

Back to the code

Okay, the code, walk through it, here we go. I call uploadFile() in the response from react-native-image-picker on my screen component. That’s where the fileInfo argument comes from. I then get the proper URI based on the OS, and read the file with rn-fetch-blob. I turn that data into a Buffer because the aws-sdk on accepts certain types of files when creating a pre-signed URL. I then pass the fileInfo and the file along the getUploadInfo(). getUploadInfo() then creates a pre-signed URL using the s3 instance we setup earlier and does some hacky string manipulation (needs a refactor) to acquire the checksum. Now, I can use that checksum (which Amazon code created) to get the direct upload URL and headers from Rails. Lastly, I upload the file to AWS and return the signed_id which I send along to Rails elsewhere in my code.

Ultimately, this was a pretty frustrating problem to fight against. However, it felt so good when I uploaded a file and saw the user profile image change. I actually got up and ran around my home office with my hands in the air rejoicing. I’m also stoked that I can share this solution and see how others might improve on what I did or figure out better ways to go about this. I’m not convinced this is the best solution to this problem, however, it’s a solution that works.

From my yarn.lock:
– react-native v0.60.5
– react-native-image-picker v1.1.0
– rn-fetch-blob v0.10.16
– aws-sdk v2.532.0

The post Rails Direct Upload to AWS S3 from React Native appeared first on Seth Alexander.

Supercluster with @react-native-mapbox-gl/maps

Seth — Tue, 03 Sep 2019 19:31:59 +0000

During a recent project in my work at Airship I had to stop using the built in cluster functionality that @react-native-mapbox-gl/maps provides and utilize Supercluster instead. The reason is we need access to the points that make up the clusters. We had some items that never broke out of their clusters because they had the same exact longitude & latitude combination. As well as wanting to show a slide up view of those locations in a list view. What started me down this path was an issue on the deprecated react-native-mapbox-gl library which shares a lot of functionality with the new library. You can view that issue here. I’m honestly surprised that this functionality isn’t available in the library since it is supported in the Mapbox JS SDK as documented here with the getClusterLeaves() function. I noticed people asking how to do this so when I nailed it down I knew a how-to was coming.

Without Supercluster

I setup a code example here to show a contrived starting state utilizing the built in clustering functionality. This is essentially where I started with the core Mapbox functionality. Let’s walk through this code some.

render() {
  return (
    <View style={{ flex: 1 }}>
      <MapboxGL.MapView
        ref={c => (this._map = c)}
        zoomEnabled
        style={[{ flex: 1 }]}
      >
        {this.renderPoints()}
      </MapboxGL.MapView>
    </View>
  );
}

Here’s our MapboxGL container to setup our map. We then need to render all our points on the map and we handle that in a helper function renderPoints().

renderPoints = () => {
  const { points } = this.state;

  return (
    <MapboxGL.ShapeSource
      id="symbolLocationSource"
      hitbox={{ width: 18, height: 18 }}
      onPress={this.onMarkerSelected}
      shape={points}
      cluster
    >
      <MapboxGL.SymbolLayer
        minZoomLevel={6}
        id="pointCount"
        style={mapStyles.clusterCount}
      />

      <MapboxGL.CircleLayer
        id="clusteredPoints"
        minZoomLevel={6}
        belowLayerID="pointCount"
        filter={["has", "point_count"]}
        style={mapStyles.clusteredPoints}
      />

      <MapboxGL.SymbolLayer
        id="symbolLocationSymbols"
        minZoomLevel={6}
        filter={["!has", "point_count"]}
        style={mapStyles.icon}
      />
    </MapboxGL.ShapeSource>
  );
};

So here we’re getting the list of groups from state and passing them into MapboxGL.ShapeSource and toggling the cluster functionality on. We have three layers inside there which I’ll refer to by ID values.

– pointCount is the actual numerical value of the number of items that make up the cluster.

– clusteredPoints is the cluster circle which we see is set to be below the pointCount layer.

– symbolLocationSymbols is the map marker for a single location on the map that isn’t being clustered.

When we click a marker, whether it’s a cluster or single point on the map we call onMarkerSelected which currently only has functionality implemented for non-clusters like so:

onMarkerSelected = event => {
  const point = event.nativeEvent.payload;
  const { name, cluster } = point.properties;
  const coordinates = point.geometry.coordinates;

  if (cluster) {
    console.log(cluster);
  } else {
    this.setState(
      {
        selectedPointName: name,
        selectedPointLat: coordinates[1],
        selectedPointLng: coordinates[0],
      },
      () => {
        this.map.flyTo(point.geometry.coordinates, 500);
      }
    );
  }
};

The if/else statement is just logging the cluster if there is one otherwise it’s setting the state to the selected point and centering the map on that point. The idea of adding the point info to state is to do something with that info.

We decide if we’re going to render the circle or marker based on the filter criteria being passed into the CircleLayer and SymbolLayer.

const mapStyles = MapboxGL.StyleSheet.create({
  icon: {
    iconAllowOverlap: true,
    iconSize: 0.35
  },
  clusteredPoints: {
    circleColor: "#004466",
    circleRadius: [
      "interpolate",
      ["exponential", 1.5],
      ["get", "point_count"],
      15,
      15,
      20,
      30
    ],
    circleOpacity: 0.84
  },
  clusterCount: {
    textField: "{point_count}",
    textSize: 12,
    textColor: "#ffffff"
  }
});

This last piece provides some of the styling and actually won’t change when we swap out the clustering functionality.

Implementing Supercluster

So the idea of switching to Supercluster to to replace the built in clustering of the raw FeatureCollection data. Supercluster is not going to do anything with the actual rendering of that data. We need to initialize a cluster using Supercluster then update that cluster based on the bounds of the map and zoom level. I’m going to walk through the guts of this conversion.

Firstly, you’ll need the cluster which I decided to store in state. I think this makes the most sense and works well for me.

const collection = MapboxGL.geoUtils.makeFeatureCollection(groupFeatures);
const cluster = new Supercluster({ radius: 40, maxZoom: 16 });
cluster.load(collection.features);

this.setState({
  point: collection,
  loading: false,
  selectedPoints: [],
  superCluster: cluster,
  userFound: false
});

So now I have the FeatureCollection as state.groups and the Supercluster cluster as state.superCluster. However, we will not be able to pass this superCluster into our MapboxGL.ShapeSource just yet. This cluster is immutable and essentially what we will now use to create the shape object we will pass into ShapeSource. Next let’s update our MapView like so:

<MapboxGL.MapView
  ref={c => (this._map = c)}
  onRegionDidChange={this.updateClusters}
  zoomEnabled
  style={[{ flex: 1 }]}
>
  {this.renderPoints()}
</MapboxGL.MapView>

Notice the added onRegionDidChange which takes a callback function. This prop I found works the best for me, however, as the react-native-mapbox-gl/maps library continues to evolve there may be a better solution. This calls updateClusters after the map has been moved. Now lets take a look at the updateClusters function:

updateClusters = async () => {
  const sc = this.state.superCluster;
  if (sc) {
    const bounds = await this._map.getVisibleBounds();
    const westLng = bounds[1][0];
    const southLat = bounds[1][1];
    const eastLng = bounds[0][0];
    const northLat = bounds[0][1];
    const zoom = Math.round(await this._map.getZoom());
    this.setState({
      superClusterClusters: sc.getClusters(
        [westLng, southLat, eastLng, northLat],
        zoom
      )
    });
  }
};

So, I take the cluster that was created in my componentDidMount() and set that to a local variable. Just in case I check to ensure it exists before doing anything else. Next, I get the visible bounds from the _map ref that is setup on the MapView. I extract the four bounds into their own variables mostly for ease of knowing what they are. I then get the zoom and round it to a whole number (I found decimal zooms gave Supercluster issues). Finally, I take all that information and create the appropriate clusters for those bounds and zoom level and save them in state to superClusterClusters.

This superClusterClusters is what gets fed into the ShapeSource in renderPoints like so:

renderPoints = () => {
  const { superClusterClusters } = this.state;

  return (
    <MapboxGL.ShapeSource
      id="symbolLocationSource"
      hitbox={{ width: 18, height: 18 }}
      onPress={this.onMarkerSelected}
      shape={{ type: "FeatureCollection", features: superClusterClusters }}
    >
      <MapboxGL.SymbolLayer
        id="pointCount"
        minZoomLevel={6}
        style={mapStyles.clusterCount}
      />

      <MapboxGL.CircleLayer
        id="clusteredPoints"
        minZoomLevel={6}
        belowLayerID="pointCount"
        filter={[">", "point_count", 1]}
        style={mapStyles.clusteredPoints}
      />

      <MapboxGL.SymbolLayer
        id="symbolLocationSymbols"
        minZoomLevel={6}
        filter={["!", ["has", "point_count"]]}
        style={mapStyles.icon}
      />
    </MapboxGL.ShapeSource>
  );
};

Notice that the shape prop requires the creation of an object and I’m not passing in the superClusterClusters directly from the state. Also notice that the cluster prop is no longer included on ShapeSource. This is something I forgot about and caused me a lot of grief. The built in clustering was conflicting with my clustering.

Lastly we add in functionality for getting the info about each point out of the cluster when we touch it on the phone in our onMarkerSelected() like so:

onMarkerSelected = event => {
  const point = event.nativeEvent.payload;
  const { name, cluster } = point.properties;
  const coordinates = point.geometry.coordinates;

  if (cluster) {
    const sc = this.state.superCluster;
    if (sc) {
      const points = sc
        .getLeaves(point.properties.cluster_id, Infinity)
        .map(leaf => ({
          selectedPointName: leaf.properties.name,
          selectedPointLat: leaf.geometry.coordinates[1],
          selectedPointLng: leaf.geometry.coordinates[0],
        }));
      this.setState({ selectedPoints: points });
      console.log(points);
    } else {
      this.setState(
        {
          selectedPoints: [
            {
              selectedPointName: name,
              selectedPointLat: coordinates[1],
              selectedPointLng: coordinates[0],
            },
          ],
        },
        () => {
          this.camera.flyTo(point.geometry.coordinates, 500);
        }
      );
    }
  }
};

By using Superclusters getLeaves() we map those to a new array and set our selectedPoints state to it. We can now use this new data in state to render something in the UI.

Final Thoughts

While there might seem like there are many steps involved in adding Supercluster to a react-native-mapbox-gl/maps map to access the underlying points of a cluster most of the code that I have shared can be reused as is to ease the transition.

For reference, the exact versions I’m using in this example are:

react-native-mapbox-gl/maps: 7.0.1

supercluster: 6.0.2

A final code sample is available here.

NOTE: The code samples WILL NOT WORK. Although, if you’re reading this article I’m making the assumption you already have Mapbox implemented. With that I also assume you have the library initialized with your access token.

I hope this saves people some headaches along the way and you build amazing things having access to the underlying data points that make up your clusters.

The post Supercluster with @react-native-mapbox-gl/maps appeared first on Seth Alexander.

How-to Build Your Own React Boilerplate with webpack 4 & Babel 7

Seth — Mon, 22 Oct 2018 03:46:03 +0000

So you’ve learned some React and built a few things. You’ve probably used create-react-app or react-slingshot to get off the ground quickly with minimal configuration. However, now you’re ready to venture out on your own with your very own React boilerplate.

WHERE. TO. START???

I recently faced this same dilemma. It was a struggle but at the end of it, I had a solid repo that I could use as a basis for future React projects. I realized I wanted to use webpack because it’s the new hotness (well not so new) but I would have a lot of resources to pull from to figure it out. I have ZERO working knowledge of Grunt or Gulp although with the minimal amount I’ve looked at them they do some cools things in their own right. Also, I know the people I interact with who know more than me use webpack. I also had a reference React boilerplate webpack config I was going to use as a base (I quickly realized I was going to rewrite most of this config).

Back to the Beginning

Let’s take it back though. What really is a boilerplate? Dictionary.com failed in getting me a definition that would work. Oxford Dictionaries on the other hand landed the W with:

3.1 Standardized pieces of text for use as clauses in contracts or as part of a computer program.

This works. So something that’s standard across computer programs. As in some code that’s always the same at least in theory. So instead of having to run things like npm i react react-dom webpack etc… every time we start a project we can copy our boilerplate and be off to the races knowing all the essential pieces we want are ready to go. We’ll also know that everything is being maintained the way we want it to because it’s ours. We also will learn a lot during the process and possibly even decide to make decisions that differ from what others have instructed us to do.

Get Git

First let’s create a local folder and make this a Git repository.

First things First

Now, what type of project would this be without a README.md? Every repository should have a readme file. Even if it’s just to remind YOU about how things work. Trust me, it may seem like you’ll remember exactly what each script does and why right now. However, a year from now these readme’s come in handy! Trust me. So, create a README.md in the root of the project. Put something like this in there:

Make sure to commit your files to Git after any changes you make:

Folder Structure

This one is pretty straightforward. Make the following folder structure to house everything:

You can accomplish this easily with this command:

.gitignore

An essential part of any Git project is the .gitignore file. This tells git to not put certain files under version control. This is important for things like packages and other things that we will retrieve from repositories. Not only do we not need these in version control but it’s actually detrimental if we do include them in version control. At least I’m pretty sure it’s detrimental. Create a .gitignore file in the root of your project and add the following to it:

There are generators for this file, like this one, but this should be enough for what we’re doing today.

npm

All node projects must be initialized so we can use the package manager. This will create a package.json file for us which must be in version control.

It contains many things but the most important are:

A list of all the installed packages and their semantic version allowed
Scripts

To start this process enter the following in your terminal in the root of your project:

You’ll be asked more than a few questions, feel free to just press Enter and leave it all blank, and in the end you’ll now have a shiny new package.json that looks something like this:

HTML

Yes! Time to write some code! Well, this is going to be the most boring HTML you probably ever write. Create an index.html in the root of your project and set it up like so:

React

Now, let’s add React to our project.

Create this file /src/components/App.js and in it put the following:

Then we will render the App via an index which we will create here at /src/index.js and put the following in:

Babel

Babel is awesome. It lets us write the latest and greatest JavaScript while ensuring we have maximum compatibility with the code we ship. First thing is we have to install Babel and a few additional Babel packages to make this all work together. Don’t worry it’ll be explained soon.

Then we need to create a .babelrc in the root of our project and add the following to it:

Now, what does this do exactly? The env preset implicitly includes babel-preset-es2015, babel-preset-es2016, babel-preset-es2017, and babel-preset-latest together, which means you can run ES6, ES7, and ES8 code.

The react preset I think is pretty self-explanatory, but, you might be wondering why we need it if React is JavaScript. That’s because Babel doesn’t know what to do with React & JSX.

NOTE: I removed the stage-2 preset from this update. If you’re wondering why, read this great post by the Babel team: Removing Babel’s Stage Presets.

Tests

So we’re making progress. Now that we have a React component with our App.js let’s make sure to create a simple associated test for that component. This way we’re starting to ensure some good practices of having tests for the things we build. We will be using Jest with Enzyme for this project. First things first, let’s install it with:

Now create /test/enzyme.setup.js and put in it:

We’ll need to add Jest functionality into our package.json so add the following to it:

Next, we should add our first component test! So, create a file at /test/App.test.js to test that our App component renders as expected. We are also going to implement a snapshot test to ensure our components structure doesn’t change from test to test. To do that we’ll need the following:

You might be wondering how to run this new test. To do so we need to change the test script in the package.json to this:

You can now run the test from your terminal with npm test and should see something like this:

Break Time

If you’ve made it this far with your React boilerplate, CONGRATS! Mostly because you’ve realized that I’m using images for my code and you have to type it all out. That’s a pain in the ass, I know. Trust me though, you’re learning more than you know by being forced to type it all and the muscle memory is going to serve you well long after this tutorial.

webpack

webpack will allow us to modularize our code and easily bundle it into a single file for production. Something I think a lot of people really like about webpack though is the development server! We’ll start by just installing webpack with:

webpack looks for a webpack.config.js file by default in the root of the project so let’s create that and add to it a couple things:

The entry is telling webpack where to find the base JavaScript file. In our application that’s index.js. Then it tells it where to output the built file when it’s done with it.

webpack loaders

Loaders are helpful pieces we can add to webpack to make it more powerful and do things to other file types. Before webpack will work properly we need to set it up to work with ES6 and JSX. We’ll do this through the babel-loader. Add the babel-loader to your project with:

Then add the loader to your webpack.config.js like so:

To utilize Sass and SCSS we’ll need another loader. Now to get the best “bang for our buck” we’re going to chain three loaders together so our styles are applied immediately to the DOM. Let’s install the loaders:

And configure it like so in our webpack.config.js:

Since we just enabled some style support let’s add some. Create /src/styles/style.sass and put in it:

Then add it to your index.js like so:

Up next are webpack plugins. So, we need a way to include the built JavaScript in our index.html and of course, there’s a way to do this automatically. This is also going to take the index.html file and drop it into our build folder (more on the build later). Let’s add the HtmlWebPackPlugin and include it in our webpack.config.js like so:

Then:

Our next plugin is going to ensure that the directory we put our build in is cleaned out of any former files every time we run a build. We do that with these two steps:

Then:

The moment we’ve all been waiting for! Let’s get the development server setup. So we’re going to add two packages in this step. webpack-cli is going to be used to run our commands from our package.json file. First:

Then update our webpack.config.js:

Finally add to the scripts section of the package.json:

Now fire up your development server and your default browser will open. It’ll take a second while webpack does it’s thing but you’ll soon see you React live in the browser.

So right now we could say success! However, our code isn’t optimized for production use. However, we don’t want to optimize our code while we’re in development either because it takes a lot longer to build. So let’s create separate build files for our production and development environments and tell webpack how to handle that. I promise we’re almost done. Really we are… Up next is:

This is going to allow us to have three webpack config files. So let’s get that setup. Rename your webpack.config.js to webpack.common.js. Then create webpack.dev.js and webpack.prod.js. The idea is one will have configuration used in both development and production, one will be development only, and one will be production only. So first thing, let’s remove the development server code from common we just added in the last step and add it to webpack.dev.js. We’ll utilize webpack-merge to include everything from webpack.common.js and add on webpack.dev.js. So now your webpack.common.js looks like this:

Your webpack.dev.js should look like this:

Your webpack.prod.js should look like this:

The last step here is to update the scripts in our package.json file to utilize these different files at different times. Your new scripts sections should look like:

What now?

Now you can go ahead and start your development server with:

You can build your application and have all the advantages of everything we’ve put together. When you’re ready to deploy your production application just run:

This will output an optimized version of your code into the /dist folder. Take those files and upload them to your favorite host and you’re good to go!

What’s Next With Your React Boilerplate?

Well, nothing from me! Ha, I think you’ve had enough by now. Hopefully, this empowers you to dive into creating your own boilerplate. You’ll start your personal projects steps ahead and really get an understanding of what each piece does. I HIGHLY recommend the webpack docs for further reading if you want to continue to add configuration to your webpack setup. There is A LOT more you can do with it. Another thing you might want to do is set up something like ESLint in your project as well. You can also dive deep into Babel and all that it allows you to do.

Thanks and I’d love to hear what you think about this setup. Anything you’d add, remove or change leave in the comments below.

I ALMOST FORGOT! Actually I did, I’m adding this after I clicked “Publish”. If you want to find all this code I have it in a repo here.

I was originally inspired to write my own up to date boilerplate article by this boilerplate article that uses webpack 3 and Babel 6.

Portfolio Site How-To For New Developers

Seth — Sat, 10 Mar 2018 16:22:11 +0000

I recently shared my portfolio site with the Free Code Camp Nashville group and got some inquiries into some of the technologies and features I used to build it. So I figured I’d share all aspects of the site and some steps to utilizing the same tools I did.

Should I build my site from scratch?

When I asked this question to the ever helpful NashDev community I received a resounding “No” from Senior devs. This might seem counter intuitive, however, the overall thought process was if you’re just starting out, unless you’re looking to be considered a designer, then using something someone else has already done very well as the base of your portfolio is better than building it yourself. Concentrate on highlighting the things that you are going to be doing in a potential job, not on the overall layout and design of your portfolio site. I decided to go with a template from HTML5 UP for a few reasons. First, they’re FREE as long as you keep the attribution. Second, AJ who creates these amazing templates is based out of Nashville just like me and had in the past connected me with some solid people to have beer/coffee with and discuss my career. Third, it’s a static site. That is, it’s 100% HTML, CSS & JavaScript so I would have many simple options for hosting when I got to that point. Lastly, all of the templates are responsive so if a potential hiring manager clicks through from their phone they’re going to get a great experience.

I’ve got my template, now what?

Fill er up with content! So this I don’t think I can help with too much. What you decide to include on your site is going to be up to you. However, as this is going to be something professional shy away from anything controversial. Keep it scoped around the skills you have and things you have built. A couple resources that I used for my site. The high-res background images I used all came from Unsplash. Unsplash describes itself as:

Beautiful, free photos.

Gifted by the world’s most generous community of photographers. 🎁

There aren’t that many coding images so once you’ve seen them you’ll start noticing them all over the web. Check them out and see if you can find interesting images that represent YOU and use them. Or don’t. Like I said, it’s up to you. Another cool place I found but didn’t get to integrate is Coverr which provides “beautiful, free videos for your homepage”. I still want to replace the top image on my site with one of their videos on a loop. I just haven’t spent the time to figure out how to implement it within the template I am using. All of my technology icons come from DEVICON which has sweet full color SVG’s. Note, if you don’t see it on the linked site check there GitHub repo here as I found not all the icons are on their site. Just look in the icons folder of the repo. I like these icons because since they’re SVG’s they they will look great no matter their scale.

I implemented my contact for by using Formspree which is a sweet way to add a form to a site super simply. I wouldn’t suggest using them for a production app but for something like this they’re perfect. They also include reCAPTCHA by default so you won’t have to worry about spam.

It’s done! How should I host it?

Before moving on to picking a web host, I think you should get yourself a domain name. I’ve been an avid user of Namecheap (Full Disclosure: This is an affiliate link. I recommend them because I use them not because I can get 20% of your domain purchase.) for years and purchase all my domains through them. Try for a first name, last name domain. Stay away from domains that are truly vanity and try to stick to .com, .io, .me if you can. They’re just easier to remember in general. Once again, do what you want. This is just what I would do.

Now because you’ve built a static site there are MANY free options that you can use in conjunction with your domain name for hosting. I currently use Surge however, Now, GitHub Pages and Netlify are also very common, free and easy to use. If you’re looking for a more fully featured web host I currently use GeekGhost (Another affiliate link) and enjoy them. I haven’t had any issues, they allow Let’s Encrypt SSL Certificates (an easy and free way to get your site using HTTPS) and their base plan is only $3.50/mo! I won’t go through deploying your site and setting up your domain name as this will be different for each host you may use. Feel free to ask host specific questions in the comments.

I’m online, what now?

Honestly, not much. Just make sure to link to your site from your resume, on LinkedIn, etc… In addition, remember to keep your site updated as you gain new work experience, publish new projects, and acquire new skills. You never know who might be looking at your portfolio and decide they want to reach out to you!

If you found this helpful and interesting, please share this article on Facebook and Twitter.

Originally published at sethaalexander.com on March 10, 2018.