Forem: Martin Patino

I Built a Doom Clone in One HTML File

Martin Patino — Fri, 20 Mar 2026 23:22:00 +0000

The first version of Cthulhu just walked into a wall and stayed there. Six tentacles flailing, third eye glowing, zero threat. I'd spent two days on the rendering — bezier curves, phase transitions, attack patterns — and the thing couldn't navigate around a pillar.

That's how most of Hell Crawler went. Build something that looks right, realize it doesn't work right, tear it apart, rebuild. The game you can play here is the version where things finally came together.

What the game actually is

Clear every room. Kill every demon. Save your family.

Yeah, the story is ridiculous. It's a top-down dungeon shooter — 7 procedurally-linked rooms, 9 enemy types, weapons ranging from a pistol to a chainsaw, a vehicle combat level, a bomb defusal level, and a Cthulhu boss fight at the end. The whole thing lives inside a single <script is:inline> tag in an Astro page. About 3,500 lines of vanilla JavaScript hitting the Canvas API directly.

No build step, no game engine, no npm packages. I wanted to see how far raw fillRect and arc calls could take me.

┌─────────────────────────────────────────────┐
│  take-a-break.astro                         │
│                                             │
│  1. CONFIG          Tunable constants       │
│  2. AUDIO           Synthesized SFX         │
│  3. MAP GENERATION  Procedural rooms        │
│  4. GAME STATE      Player, enemies, etc.   │
│  5. INITIALIZATION  New game / room setup   │
│  6. INPUT           Keyboard handling       │
│  7. UPDATE          AI, collisions, physics │
│  8. RENDERING       Tiles, sprites, HUD     │
└─────────────────────────────────────────────┘

How rooms are built

Each room is a 21x15 tile grid. Tiles are integers — 0 for floor, 1-5 for wall variants. The generator starts by walling off the border, then punches holes wherever the room graph says an exit should be:

function generateRoom(roomIndex) {
  var map = [];
  for (r = 0; r < ROWS; r++) {
    map[r] = [];
    for (c = 0; c < COLS; c++) {
      // Border walls, everything else is floor
      map[r][c] = (r === 0 || r === ROWS - 1
                || c === 0 || c === COLS - 1) ? 1 : 0;
    }
  }

  // Punch holes for exits based on the room graph
  var exits = game.roomGraph[roomIndex].exits;
  if (exits.left !== undefined) {
    map[6][0] = 0; map[7][0] = 0; map[8][0] = 0;
    map[6][1] = 0; map[7][1] = 0; map[8][1] = 0;
  }
  // ... right, up, down exits follow the same pattern
}

The 5 wall types each get a base color, top edge highlight, and shadow line. Three values per tile type, drawn as stacked rectangles — that's all it takes to fake depth without sprites:

var WALL_COLORS = {
  1: { base: '#5a2020', top: '#6b2828', line: '#3a1010' }, // Red stone
  2: { base: '#3a3a44', top: '#4a4a55', line: '#2a2a33' }, // Grey stone
  3: { base: '#4a3018', top: '#5a3820', line: '#2a1808' }, // Brown wood
  4: { base: '#8a1010', top: '#aa2020', line: '#550808' }, // Blood red
  5: { base: '#282838', top: '#383848', line: '#181828' }, // Dark metal
};

Four room layouts get shuffled per run and assigned to rooms 0-3, so you might get a pillar maze first or a wall-block grid. Small thing, but it keeps the early game from feeling stale on repeat plays.

Movement and collision

I went through three collision systems before landing on the 8-point check. The first attempt only tested corners — the player could walk halfway through narrow walls. The second added edge midpoints but broke diagonal movement. The final version checks corners plus the center of each edge:

function isBlocked(x, y, w, h) {
  var map = game.maps[game.currentRoom];
  return isTileBlocked(x, y, map)             // top-left
      || isTileBlocked(x + w, y, map)         // top-right
      || isTileBlocked(x, y + h, map)         // bottom-left
      || isTileBlocked(x + w, y + h, map)     // bottom-right
      || isTileBlocked(x + w / 2, y, map)     // top-center
      || isTileBlocked(x + w / 2, y + h, map) // bottom-center
      || isTileBlocked(x, y + h / 2, map)     // left-center
      || isTileBlocked(x + w, y + h / 2, map);// right-center
}

Diagonal movement gets the 0.707 normalization so you don't zip around at 1.41x speed on diagonals:

if (dx !== 0 && dy !== 0) { dx *= 0.707; dy *= 0.707; }

On top of that there's dashing (Shift), melee attacks (E/F), and invincibility frames after taking a hit. The i-frames were a late addition — without them, walking into a group of enemies would drain your health to zero in a couple frames.

The weapon table

Six weapons, defined as a flat config so I could tweak balance without hunting through game logic:

var WEAPONS = {
  pistol:     { name: 'PISTOL',   cooldown: 18, ammoCost: 1, damage: 2, color: '#ffcc00' },
  shotgun:    { name: 'SHOTGUN',  cooldown: 28, ammoCost: 2, damage: 2, color: '#ff8844' },
  machinegun: { name: 'M-GUN',    cooldown: 5,  ammoCost: 1, damage: 1, color: '#ffaa44' },
  rocket:     { name: 'ROCKET',   cooldown: 40, ammoCost: 3, damage: 6, color: '#ff2200' },
  laser:      { name: 'LASER',    cooldown: 4,  ammoCost: 1, damage: 2, color: '#00ffff' },
  chainsaw:   { name: 'CHAINSAW', cooldown: 6,  ammoCost: 0, damage: 3, color: '#cccccc' },
};

The chainsaw does 3 damage at zero ammo cost, which sounds broken until you realize you have to be touching the enemy to use it. Against a brute that shoots fireballs, that's a real trade-off.

Enemy AI

Nine enemy types, each with its own update function. I tried a shared behavior tree early on, but every enemy ended up needing so many special cases that individual functions were simpler to reason about:

function updateNormalEnemy(e, pcx, pcy) {
  if (e.type === 'zombie')   { updateZombieAI(e, pcx, pcy);   return; }
  if (e.type === 'spectre')  { updateSpectreAI(e, pcx, pcy);  return; }
  if (e.type === 'brute')    { updateBruteAI(e, pcx, pcy);    return; }
  if (e.type === 'revenant') { updateRevenantAI(e, pcx, pcy); return; }
  if (e.type === 'spawner')  { updateSpawnerAI(e, pcx, pcy);  return; }
  if (e.type === 'tentacle') { updateTentacleAI(e, pcx, pcy); return; }

  // Default: basic chase/wander
  // ...
}

The standouts:

Zombie — Grabs the player and cuts movement speed to 20%. Getting grabbed by one while two imps close in is where most of my deaths happened during testing.
Spectre — Phases through walls with fluctuating visibility. If it gets stuck, it teleports. These are annoying in exactly the right way.
Revenant — Fires homing missiles. The missile turns toward you each frame, but with a limited turn rate. Sharp direction changes shake them off. I spent a while getting homingStrength right — too high and they're unavoidable, too low and they're trivial.

The homing math:

if (b.homing) {
  var targetAngle = Math.atan2(pcy - b.y, pcx - b.x);
  var currentAngle = Math.atan2(b.vy, b.vx);
  var diff = targetAngle - currentAngle;
  // Normalize angle difference
  if (diff > Math.PI) diff -= Math.PI * 2;
  if (diff < -Math.PI) diff += Math.PI * 2;
  // Apply limited turn
  currentAngle += diff * b.homingStrength;
  b.vx = Math.cos(currentAngle) * b.speed;
  b.vy = Math.sin(currentAngle) * b.speed;
}

Enemies also scale with room index — more HP, faster movement. It's blunt, but it works as a difficulty curve without needing a separate difficulty system:

var enemy = {
  health: 1 + roomIndex,         // More HP in later rooms
  speed: ENEMY_BASE_SPEED + roomIndex * 0.18,  // Faster too
  // ...
};

The Cthulhu fight

Back to that wall-hugging Cthulhu. The fix was embarrassingly simple: the boss pathfinding was using the player's collision box size instead of its own, so it thought it could fit through gaps it couldn't. One variable swap and suddenly Cthulhu was terrifying.

The boss is a generated config — HP varies between 55 and 70 per run:

function generateRandomBoss() {
  var hp = 55 + Math.floor(Math.random() * 16);
  return {
    name: 'CTHULHU',
    bodyColor: '#0a2a2a',
    accentColor: '#1a5a4a',
    size: 62,
    isCthulhu: true,
    tentacleCount: 6,
    attacks: ['fireball', 'tentacle_slam', 'ink_cloud',
              'summon', 'tentacle_sweep'],
    health: hp,
    maxHealth: hp,
  };
}

Five attack patterns: radial fireball bursts (8 projectiles, 12 in phase 2), tentacle slams that spawn projectile lines, ink clouds that scatter slow projectiles everywhere, summoning adds, and a spiraling tentacle sweep. At half health it enters phase 2 — speed jumps, two tentacle monsters and a skull spawn in, and the color palette shifts:

var wasPhase1 = e.phase === 1;
e.phase = e.health <= bc.maxHealth / 2 ? 2 : 1;
if (wasPhase1 && e.phase === 2) {
  e.speed = 1.8;  // Faster
  // Spawn reinforcements
  game.enemies.push(createEnemy(map, BOSS_ROOM, 'tentacle'));
  game.enemies.push(createEnemy(map, BOSS_ROOM, 'tentacle'));
  game.enemies.push(createEnemy(map, BOSS_ROOM, 'skull'));
}

The rendering draws 6 tentacles as quadratic bezier curves, each on independent wave patterns. Getting them to look organic took a lot of fiddling with sin offsets:

for (var ti = 0; ti < tentCount; ti++) {
  var tBaseAngle = (ti / tentCount) * Math.PI * 2;
  var tWave = Math.sin(game.frameCount * 0.04 + ti * 1.2) * 8;
  var tLen = e.w / 2 + 14 + Math.sin(game.frameCount * 0.03 + ti) * 4;

  ctx.strokeStyle = phase2 ? '#2a8a6a' : '#1a5a4a';
  ctx.lineWidth = phase2 ? 5 : 4;
  ctx.beginPath();
  ctx.moveTo(tx1, ty1);
  ctx.quadraticCurveTo(tx2, ty2, tx3, ty3);
  ctx.stroke();
}

The mech suit

Power armor that absorbs hits before your regular armor and health do. Drops randomly from room 2 onward (40% room spawn chance), and always spawns in the boss room — I didn't want anyone reaching Cthulhu without it.

When equipped, the player sprite grows by 3px on each side and gets mechanical details drawn on: hydraulic legs, shoulder rivets, a pulsing power core, helmet antenna. The glow pulses with a sin wave so it reads as "powered" even when standing still:

if (hasRobo) {
  var roboGlow = 0.15 + Math.sin(game.frameCount * 0.08) * 0.08;
  ctx.fillStyle = 'rgba(255, 170, 0, ' + roboGlow + ')';
  ctx.beginPath();
  ctx.arc(rpx + rpw / 2, rpy + rph / 2, rpw / 2 + 6, 0, Math.PI * 2);
  ctx.fill();
}

Damage flows through three layers — mech armor first, then regular armor absorbs 60% of what's left, then health:

function applyDamage(dmg) {
  if (game.activePower === 'INVULNERABLE') return;
  // Robot armor absorbs first
  if (game.robotArmor > 0) {
    var roboAbsorb = Math.min(game.robotArmor, dmg);
    game.robotArmor -= roboAbsorb;
    dmg -= roboAbsorb;
  }
  if (dmg <= 0) return;
  // Regular armor absorbs 60% of remaining
  if (game.armor > 0) {
    var absorbed = Math.min(game.armor, Math.ceil(dmg * 0.6));
    game.armor -= absorbed;
    dmg -= absorbed;
  }
  game.health -= dmg;
}

The levels that aren't dungeon crawls

I added two special rooms because seven rooms of "clear enemies, find exit" got monotonous during playtesting.

The vehicle level (Room 5) puts you in a mech with 200 HP, a cannon, and infinite ammo. Twelve armored enemies — brutes, demons, imps, zombies — swarm from every direction. The mech moves at 4.5 speed (player walks at 3.0), so the pace completely changes. It's the power fantasy break before the final push. I originally had the vehicle as a boss fight reward, but it worked better as a late-game palate cleanser.

The bomb room (Room 6) gives you 60 seconds to collect 5 bomb parts scattered through a maze while 8 enemies hunt you. Below 10 seconds, an alarm kicks in. This one went through the most iteration — the first version had 90 seconds and 3 parts, and nobody ever failed it. Cutting the time and doubling the parts made it genuinely tense. The maze layout matters here more than anywhere else because you need to plan a route, not just shoot your way through.

Particles

Three functions, the whole system. Spawn them on kills, shots, pickups, explosions. The 0.94 friction multiplier on velocity gives them a quick deceleration that looks physical:

function spawnParticles(x, y, count, color) {
  for (var i = 0; i < count; i++) {
    game.particles.push({
      x: x, y: y,
      vx: (Math.random() - 0.5) * 4,
      vy: (Math.random() - 0.5) * 4,
      life: 15 + Math.floor(Math.random() * 15),
      maxLife: 30,
      color: color,
      size: 2 + Math.random() * 3,
    });
  }
}

function updateParticles() {
  for (var i = game.particles.length - 1; i >= 0; i--) {
    var p = game.particles[i];
    p.x += p.vx; p.y += p.vy;
    p.vx *= 0.94; p.vy *= 0.94;
    p.life--;
    if (p.life <= 0) game.particles.splice(i, 1);
  }
}

These are the cheapest source of "game feel" I've found. A kill without a blood splat particle burst feels like nothing happened. A kill with one feels like you did something.

Render order and lighting

The renderer draws in strict layer order — floor, blood pools, exit indicators, pickups, enemies, player, bullets, particles, lighting, HUD. Getting this wrong produces visible z-fighting, and I did get it wrong for a while. Pickups were rendering on top of the player, which looked absurd.

function render() {
  drawTileMap(map);        // 1. Floor and walls
  drawBloodPools();        // 2. Persistent blood stains
  drawExitIndicators();    // 3. Door arrows when room is cleared
  drawPickups();           // 4. Health, ammo, weapons, mech suits
  drawEnemies();           // 5. All enemy sprites
  drawPlayer();            // 6. Doom guy / mech suit
  drawBullets();           // 7. Projectiles
  drawParticles();         // 8. Particle effects
  drawLighting();          // 9. Darkness gradient
  drawCanvasHUD();         // 10. Health/armor/ammo bars
}

The lighting is a single radial gradient centered on the player. Three stops: transparent at the center, 30% dark at 60% radius, 70% dark at the edges. It creates a flashlight cone that adds tension without any per-pixel calculation:

function drawLighting() {
  var cx = game.px + game.pw / 2, cy = game.py + game.ph / 2;
  var radius = game.vehicleMode ? 220 : 180;
  var gradient = ctx.createRadialGradient(cx, cy, radius * 0.3, cx, cy, radius);
  gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
  gradient.addColorStop(0.6, 'rgba(0, 0, 0, 0.3)');
  gradient.addColorStop(1, 'rgba(0, 0, 0, 0.7)');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, W, H);
}

Synthesized audio

No audio files in the entire game. Every sound effect is built at runtime with the Web Audio API — oscillators, a pre-generated white noise buffer, biquad filters, and gain envelopes.

function playGunshot(type) {
  var ctx = getAudioCtx();
  var now = ctx.currentTime;
  var noise = ctx.createBufferSource();
  noise.buffer = getNoiseBuffer();  // Pre-generated white noise
  var filter = ctx.createBiquadFilter();
  var gain = ctx.createGain();

  if (type === 'shotgun') {
    filter.type = 'bandpass';
    filter.frequency.value = 600;
    gain.gain.setValueAtTime(0.6, now);
    gain.gain.exponentialRampToValueAtTime(0.001, now + 0.08);
  } else if (type === 'rocket') {
    filter.frequency.value = 300;
    // Add a low oscillator for the bass thump
    var osc = ctx.createOscillator();
    osc.frequency.setValueAtTime(200, now);
    osc.frequency.exponentialRampToValueAtTime(80, now + 0.15);
    // ...
  }
}

The noise buffer is one second of random samples, generated once:

function getNoiseBuffer() {
  if (noiseBuffer) return noiseBuffer;
  var ctx = getAudioCtx();
  var size = ctx.sampleRate;
  noiseBuffer = ctx.createBuffer(1, size, ctx.sampleRate);
  var data = noiseBuffer.getChannelData(0);
  for (var i = 0; i < size; i++) data[i] = Math.random() * 2 - 1;
  return noiseBuffer;
}

The shotgun is bandpass-filtered noise. The rocket layers a descending oscillator for bass. The chainsaw is a low-frequency sawtooth. Each weapon sounds distinct, and there's a hard cap at 10 concurrent sounds to prevent the audio context from choking during heavy combat.

Procedural room graph

Rooms connect through a graph that's generated fresh each run. The algorithm places rooms one at a time on a virtual coordinate grid, branching off existing rooms in random directions:

function generateRoomGraph() {
  var DIRS = ['right', 'left', 'up', 'down'];
  var OPPOSITE = { right: 'left', left: 'right', up: 'down', down: 'up' };

  var occupied = {};
  occupied['0,0'] = 0;
  positions.push([0, 0]);

  for (var ri = 1; ri < TOTAL_ROOMS; ri++) {
    var placed = false;
    while (!placed && attempts < 50) {
      // Try to branch from the previous room, but after 10 failures
      // pick any random existing room to branch from
      var fromIdx = ri - 1;
      if (attempts > 10) fromIdx = Math.floor(Math.random() * ri);

      var dirs = shuffleArray(DIRS);
      for (var d = 0; d < dirs.length; d++) {
        var nx = fromPos[0] + OFFSETS[dir][0];
        var ny = fromPos[1] + OFFSETS[dir][1];
        if (!occupied[nx + ',' + ny]) {
          // Place room and create bidirectional exits
          game.roomGraph[fromIdx].exits[dir] = ri;
          game.roomGraph[ri].exits[OPPOSITE[dir]] = fromIdx;
          placed = true;
          break;
        }
      }
    }
  }
}

The fallback after 10 failed attempts — picking any random room instead of always the previous one — was a fix for an early bug where the graph would dead-end itself against map borders.

Power-ups and loot

Five power-ups, spawning at 20% chance every 300 frames:

Power-Up	Duration	What it does
BERSERK	8 sec	Double damage, red tint
SPEED DEMON	8 sec	2x move speed and fire rate
INVULNERABLE	5 sec	Ignore all damage
QUAD AMMO	10 sec	Shots cost no ammo
HELLSTORM	Instant	3 damage to every enemy

Enemy drops scale with progression. Weapon drop chance goes from 8% in room 0 to 32% in room 6, so you're well-armed by the time you hit the boss:

function dropLoot(e) {
  var weaponChance = 0.08 + game.currentRoom * 0.04;  // 8% room 0 → 32% room 6
  if (Math.random() < weaponChance) {
    // Drop a random weapon the player doesn't have yet
  }
  // Robot armor: 3% rare drop
  if (Math.random() < 0.03 && game.robotArmor < ROBOT_ARMOR_MAX) {
    // Drop mech suit repair
  }
  // Otherwise: 50% chance of health, ammo, or armor
}

The game loop

Standard requestAnimationFrame:

function gameLoop() {
  update();
  render();
  requestAnimationFrame(gameLoop);
}

update() handles everything in order: power-up timers, health regen, bomb countdown, power-up spawning, player movement, bullet physics, enemy AI, pickup collection, room transitions, win conditions. render() draws it all. Keeping those two apart made debugging significantly easier — when something looked wrong, I knew whether to look at game state or drawing code, not both.

What I'd do differently

If I built this again, I'd split the file. The single-file constraint was fun and it kept me honest about architecture — every system is a clearly-labeled section with flat functions. But at 3,500 lines, finding things gets tedious even with good comments. An ES module per system with a shared game state would've been worth the tooling overhead.

I'd also add a proper pathfinding algorithm. The enemies chase by moving toward the player's coordinates, which means they get stuck on walls constantly. A* on a 21x15 grid would be negligible cost and would make every enemy type feel smarter.

The Web Audio API turned out to be way more capable than I expected. Every sound in the game is synthesized — no audio file downloads at all. That was a gamble that paid off. On the other hand, the particle system could use object pooling instead of creating and splicing array elements every frame. It's fine at the current scale, but it's the first thing that would need fixing if I added more enemies.

Play it

https://martinpatino.com/take-a-break/ — WASD to move, Space to shoot, Shift to dash. Seven rooms, then Cthulhu. Good luck.

Adapting to Change: Navigating the Evolving Landscape of Software Development

Martin Patino — Wed, 19 Feb 2025 06:02:17 +0000

In recent times, the tech industry, particularly the realm of software development, has experienced significant shifts. Developers are navigating a rapidly evolving landscape filled with both challenges and opportunities.

The Impact of Layoffs and Economic Shifts

The recent wave of layoffs in the tech sector has been unsettling, marking one of the most significant job losses since the dot-com era. Even experienced developers, who once easily attracted recruiters, are now struggling to get callbacks. Many companies are tightening their budgets due to economic pressures, overhiring during past booms, and shifts in business priorities.

Adding to this uncertainty is the rapid advancement of AI technologies, exemplified by tools like Devin and other AI-assisted coding platforms. This has fueled concerns about job security, as automation threatens to reshape traditional roles in software development.

A Broader Perspective on the Tech Industry

Despite recent job cuts, the tech industry remains large, wealthy, and influential. Over the past decade, developers have seen substantial wage gains. Even with inflation, their current status is significantly better than it was ten or twenty years ago.

However, human nature often emphasizes relative changes rather than absolute conditions. As a result, many developers feel anxious about the downward trend, overlooking past successes in light of present uncertainties.

The Ironic Role Reversal

This situation presents an ironic twist—programmers have historically played a role in automating other professions, improving productivity at the expense of certain jobs. Yet, when automation impacts their own industry, the perspective shifts. The broad benefits of AI and automation are easier to appreciate when they don't directly affect one's livelihood.

The Uncertain Future of AI in Software Development

While layoffs and a challenging hiring environment are tangible, the long-term effects of AI on the software industry remain uncertain. Predictions about technology's impact often don't unfold as expected. For instance, self-driving cars were projected to revolutionize transportation years ago, yet full autonomy remains elusive. Similarly, AI in programming may not replace human developers as quickly or completely as some fear.

The programming profession could evolve similarly to agriculture during industrialization. The number of traditional coding roles may have peaked, but this does not diminish the overall significance of the tech industry. Instead, AI might make software development even more integral to society, even if the demand for human programmers shifts towards more complex and strategic roles.

AI as a Tool, Not a Replacement

Some argue that the recent downturn in developer jobs is not solely due to AI advancements but is also influenced by broader economic factors. AI in coding is still in its early stages, and we have yet to see a fully AI-developed application. The reality may be more nuanced—AI might automate simpler tasks, while skilled developers will still be required for complex problem-solving and software architecture.

Additionally, having access to AI tools does not automatically grant someone the mindset or expertise of a seasoned developer. Writing quality code requires critical thinking, problem-solving skills, and an understanding of software design principles—traits that AI has yet to master.

The Risk of AI Over-Reliance and Model Collapse

There is also concern about AI systems becoming less effective over time if they continuously train on their own generated output. This phenomenon, known as "model collapse," could lead to a decline in the quality, creativity, and uniqueness of AI-generated code. A recent study highlighted how AI models can become nonsensical when repeatedly trained on their own data, emphasizing the ongoing need for human oversight in software development.

Example of Model Collapse in AI Training

An example of Model Collapse can be seen in a study where AI models degrade over generations when trained on their own generated content. The image below illustrates how an OPT-125m model experiences generational degradation:

Gen 0 (First Output): Coherent discussion on Revival architecture with historical references.
Gen 1: Introduces errors, such as misplacing St. Peter’s Basilica in Buenos Aires.
Gen 7: Becomes less coherent, featuring an irrelevant quote from The New York Times.
Gen 9: Fully collapses into nonsense, discussing jackrabbits with different colored tails.

This showcases how repeated AI self-training can lead to irrelevance and loss of meaningful content, reinforcing the need for careful oversight in AI-driven programming.

Adapting to the New Reality

Fretting over these changes is understandable, but resisting technological evolution is rarely productive. No profession has been able to resist automation or redundancy in the long run. Instead of fearing these shifts, developers should focus on adapting and embracing new opportunities. This could mean refining skills, specializing in areas AI struggles with, or leveraging AI as a powerful assistant rather than seeing it as a threat.

Embracing Change and Innovation

The tech industry, especially software development, is at a crossroads. While AI introduces new challenges, it also presents opportunities for growth and innovation. The key for developers—and the industry as a whole—is to adapt, evolve, and find new ways to thrive in this changing landscape. The future may not look exactly like the past, but it still holds immense potential for those willing to embrace it.

How to Build a Simple API Service with SST v3: A Step-by-Step Guide

Martin Patino — Wed, 19 Feb 2025 03:55:58 +0000

Six months ago, I was deep in the trenches of SST v2, wrestling with its CloudFormation-based architecture and dealing with long deployment times. I wish I had known what I know now about SST v3 (codename SST Ion)—it would have saved me hours of frustration.

So, if my past self (or anyone else in the same boat) is reading this, here’s everything you need to know about why SST v3 is a game-changer and how it can make your life easier.

SST v2 vs. SST v3: What Changed?

SST v2 was built on AWS CDK and CloudFormation, meaning your entire infrastructure was defined within the SST ecosystem and compiled into CloudFormation templates. This came with limitations:

✅ Slower deployments due to CloudFormation stacks

✅ Vendor lock-in with AWS services

✅ Complex stack management

Then came SST v3, which introduced Pulumi and Terraform, eliminating CloudFormation stacks. The result?

🚀 Faster deployments—no more waiting on CloudFormation!

🌎 Multi-cloud support—Cloudflare, AWS, and more

🛠️ Custom components—Use Pulumi to extend SST however you like

This shift removes vendor lock-in and gives you more flexibility than ever.

Why SST v3 Makes Microservices Easier

Imagine you have several microservices for your application, each requiring its own resources like S3 buckets, DynamoDB tables, or Lambda functions. With SST v3, you define all those resources in code, making it easy to add new services, remove outdated ones, and scale dynamically.

Key Benefits for Microservices Architecture

✔️ Infrastructure as Code (IaC) – Define all cloud resources programmatically
✔️ No more YAML – No need to manually configure CloudFormation templates
✔️ Faster scaling – Add/remove services with confidence
✔️ Less time spent debugging deployments

Now, instead of fighting YAML files, you’ll spend more time actually building features.

Let’s Start Building: Serverless API with SST

In this tutorial, we’ll build a serverless API that does the following:

✅ Stores JSON data in DynamoDB when triggered

✅ Uses a DynamoDB stream to process new entries

✅ Sends an email notification based on the stored data

This demo will show how easy it is to integrate multiple AWS services using SST v3 and get your serverless application running efficiently.

Step 1: Set Up Your Project

First, create a new project directory and initialize it:

mkdir email-buddy-tracker && cd email-buddy-tracker 
bun init -y

Now, initialize SST in your directory by running:

npx sst@latest init

SST Initialization Prompts

You’ll be prompted with a few options:

• Use SST templates? → Select default

• Choose a provider? → Pick AWS for this demo (feel free to experiment with others later)

After the setup, you’ll see a new file created sst.config.ts

This file acts as the root configuration for your SST project.

export default $config({
  app(input) {
    return {
      name: "email-buddy-tracker",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
      // Define your infrastructure and logic here
  },
});

Step 2: Add AWS Resources

To support our API, we’ll need to create a DynamoDB table, an email component, and an HTTP API using SST.

First, install the required dependencies:

bun add electrodb hono @aws-sdk/client-sesv2

ElectroDB: Simplifies single-table design patterns for DynamoDB.
Hono: A lightweight, high-performance web framework for building your Lambda-based API.
AWS SDK: Interact with AWS services (SES, DynamoDB, etc.).

Update `sst.config.ts` to Define Resources

Modify your sst.config.ts to create necessary AWS components:

export default $config({
  app(input) {
    return {
      name: "email-buddy-tracker",
      removal: input?.stage === "production" ? "retain" : "remove",
      protect: ["production"].includes(input?.stage),
      home: "aws",
    };
  },
  async run() {
    // Define AWS resources
    const userRecordsTable = new sst.aws.Dynamo("UserRecords", {
      fields: {
        pk: "string",
        sk: "string"
      },
      primaryIndex: { hashKey: "pk", rangeKey: "sk" }
    });

    const email = new sst.aws.Email("MyEmail", {
      sender: "martin@gizmodlabs.com",
    });

    new sst.aws.Function("HonoApi", {
      url: true, // Enables public URL for API access
      handler: "src/index.handler",
      link: [userRecordsTable, email],
    });
  },
});

Step 3: Create the API Handler

Now, let’s create the root API handler using Hono.js, a lightweight and high-performance web framework.

Create a src directory and add an index.ts file:

import { Hono } from 'hono'
import { handle } from 'hono/aws-lambda'

const app = new Hono()

app.get('/', (c) => c.text('Hello Hono!'))

export const handler = handle(app)

With this setup, your API is ready to go!

With that setup you should be able to run sst dev or add bun run dev .

You should see something like this below

Step 4: Define a User Entity & a Dynamic Email Sender

Building scalable and efficient serverless applications requires a robust data model and a reliable email system. In this step, we'll leverage ElectroDB to define a User entity and use AWS SES for sending emails dynamically. This setup will ensure flexibility, maintainability, and scalability incase you want to take this further.

Defining the User Entity with ElectroDB

Instead of directly using the AWS SDK for DynamoDB, ElectroDB simplifies working with a single-table design. We’ll use SST resources to reference the table dynamically, eliminating hardcoded resource names and ensuring seamless deployment across different environments.

User Entity Code Implementation

import DynamoDB from "aws-sdk/clients/dynamodb";
import { Entity } from "electrodb";
import { Resource } from "sst"; // Dynamically reference the SST resource

const client = new DynamoDB.DocumentClient();

export const UserRecord = new Entity(
  {
    model: {
      entity: "UserRecords",
      version: "1",
      service: "user",
    },
    attributes: {
      email: { type: "string" },
      firstName: { type: "string" },
      lastName: { type: "string", required: true },
      createdAt: { type: "string", default: () => new Date().toISOString() },
    },
    indexes: {},
  },
  { client, table: Resource.UserRecords.name }
);

Configuring a Dynamic Email Sender

To avoid a static "from" email address, we'll use SST resources to reference it dynamically. Before sending emails, ensure that your domain or email is verified in AWS SES, or you’ll get stuck in the dreaded SES sandbox.

Email Sending Function

import { Resource } from "sst";
import { SESv2Client, SendEmailCommand, type SendEmailCommandOutput } from "@aws-sdk/client-sesv2";

const client = new SESv2Client();

export const sendEmail = (email: string, body: string): Promise<SendEmailCommandOutput> => {
    return client.send(
        new SendEmailCommand({
            FromEmailAddress: Resource.MyEmail.sender, // Dynamically get sender email
            Destination: { ToAddresses: [email] },
            Content: {
                Simple: {
                    Subject: { Data: "Hello from SST" },
                    Body: { Text: { Data: body } }
                }
            }
        })
    );
}

Step 5: Making Our API Functional

Now, let's wire everything together! Our API will handle POST requests, create a UserRecord in DynamoDB, and send a welcome email.

API Handler for User Creation & Email Sending

import { Hono } from 'hono'
import { handle } from 'hono/aws-lambda'
import { UserRecord } from './core/entity/user'
import { sendEmail } from './core/sendEmail'

const app = new Hono()

app.post('/', async (ctx) => {
    const body = await ctx.req.json();

    // Create a new user record in DynamoDB
    const record = await UserRecord.create({
        email: body.email,
        firstName: body.firstName,
        lastName: body.lastName,
        createdAt: new Date().toISOString()
    });

    // Send a welcome email
    const sentEmail = await sendEmail(body.email, "Welcome to SST and following my blog around SST!");

    return ctx.json({
        emailMessageId: sentEmail.MessageId || null,
        dbRecord: record
    });
});

export const handler = handle(app);

Testing the API

Run the service with:

bun run dev
# or
sst dev

Now, use Postman, Insomnia, or cURL to send a POST request to http://localhost:3000 with a sample payload:

{
  "email": "martin@gizmodlabs.com",
  "firstName": "John",
  "lastName": "Doe"
}

If everything works correctly, you should receive:
✅ HTTP 200 Response

✅ SES MessageId confirming the email was sent

✅ New DynamoDB User Record

You can verify by checking your inbox and the DynamoDB console in AWS.

Final Thoughts: Is It Worth It?

Yes! By using SST, ElectroDB, and AWS SES, you gain:

Scalability: Effortlessly handle more users without reworking the architecture.
Maintainability: Dynamic references prevent hardcoded resource names, reducing errors with SST resources.
Developer Experience: Faster iteration cycles with SST v3—no more CloudFormation headaches.

So, go ahead—build microservices, serverless apps, and AI-driven tools without the frustration of traditional cloud setups. And remember: if slow deployments make you cry, switch to SST v3—your sanity will thank you.

Example Repo: https://github.com/thisguymartin/email-buddy-tracker

Keep a eye out for more serverless content.

Architect a easy way to jump into the serverless world

Martin Patino — Wed, 19 Jan 2022 02:48:50 +0000

Introduction

If you are looking at the state of software development you can see that serverless is starting to go mainstream. As complexity grows in software and more integration are introduced to produce a more dynamic and effective application you are bound to need more tooling.

In this article, I want to introduce Architect a serverless framework that might make you think again when looking at going serverless. Architect is opinionated serverless framework that focuses on reducing complexity of working with multiple aws cloud services. It prioritizes speed with fast local dev, smart configurable defaults and flexible infrastructure as code. When you see the config file you should be able to tell what is going on and what resources are available. Architect supports multiple runtimes, but for the sake of simplicity and because in Sibi we primarily use node.js.

In this introduction to Architect, we will be building creating a REST endpoint that takes user data converts it into QR code and sends email out using SES with my url.

💡 Please be sure that the email you use for this is example is authorized with SES

Prerequisites

AWS account
Node.js
Some cloud knowledge

Step 1

First you we will have to create a new architect app the following command, which should create your boilerplate project with an app.arc file.

npm init @architect architect-qr-email-service

cd architect-qr-email-service

Your app.arc file is your configuration files, which will be used to create your resources such as lambdas, database, queues as you can see in the code below. There is not much going on but with time this file will grow with time.

Architect takes the complexity of cloud formation, aws's schema language and refines it down into a declarative specification. When you look at the app.arc file, you are able to determine exactly what is going on and what resources were created.

@app
architect-qr-email-service

@http ## http endpoint get
get /

# @aws
# profile default
# region us-west-1

Step 2

Now that we have a starting point let’s start creating some services. First we will need a POST endpoint that will take some user data so we can store for record keeping. This record-creation will not only be your route, but also the name in your directory as that is used by architect to determine what to build for what resource.

Configuration File

@app
architect-qr-email-service

@http
post /record-creation

**Folder Structure **

Let’s install some architect helper functions so you can see a bit more tooling from arc, which will help us parse body json and more.

npm i @architect/functions -S

Now let’s add starter code that will take user data and return a helping message that it is running.

let arc = require('@architect/functions')


exports.handler = async function http(req) {

  const body = arc.http.helpers.bodyParser(req)

  if (!body || !body.email, !body.name) {
    return {
      statusCode: 400,
      body: 'Missing user email and or name'
    }
  }


  console.info({ ...body })


  return {
    statusCode: 200,
    headers: {
      'content-type': 'application/json;'
    },
    body: JSON.stringify({
      message: `User Data Received`
    })
  }
}

One of the benefits of using architect is the simplicity of running serverless locally as it manages its own sandbox. Just run npm run start and if you files and app.arc file is correct should start service running on http://localhost:3333 . Now that that is done just hit the post

Response should look something like this:

So let’s take a step back and realize what we just did. We created api gateway locally that pointed to a directory that holds a lambda function called record-creation.

Step 3

Now let’s do a bit more with this. We should take advantage of AWS lambda and utilize one of the best tools serverless echo system has to offer queues, which in the AWS world that resource is called Amazon Simple Queue Service (SQS) .

This we will be doing

Creating two queues functions
creating a dynamodb table that takes a index combination of (email and name)

You app.arc configuration file will have to be updated to add 2 new queues called notification-handler and record-handler.

Now that we have update the configuration file we will create similar file structure, but instead of adding http directory we will be creating under queues directory. You can do this manually or run npx arc init this command will read app.arc file and create all new corresponding files.

If you look at the app.arc file you will notice that each queue has it’s own corresponding directory. So record-handler directory will handle all record-handler queue events that are publish to it.

Let’s modify the record-creation so it publishes to a queue record-handler .

let arc = require('@architect/functions')

exports.handler = async function http(req) {
  const body = arc.http.helpers.bodyParser(req)

  if (!body || !body.email || !body.name || !body.twitter) {
    console.error(body, 'Missing user email, name, twitter handle')
    return {
      statusCode: 400,
      body: 'Missing user email and or name'
    }
  }


// publish to the record-handler queue based on our config
  await arc.queues.publish({
    name: 'record-handler',
    payload: { ...body },
  })

  console.info('message published to record-handler')

  return {
    statusCode: 200,
    headers: {
      'content-type': 'application/json;'
    },
    body: JSON.stringify({
      message: `User Data Received`
    })
  }
}

Now let’s have modify the record handler that will save it to dynamo db and push it to a new queue as this function is only responsible for saving the record. You can see we use @architect/functions , which allows us to connect to dynamo db instance and save events for more on this see arc.codes docs.

let arc = require('@architect/functions')

exports.handler = async function queue(event) {
  console.info('incoming message to queue record-handler', event)

  let client = await arc.tables()
  // handle incoming event, which could come in as a array
  await Promise.all(event.Records.map(async record => {
    //save a record for each one and publish new event

    const parsedBody = JSON.parse(record.body)
    const body = { ...parsedBody, id: Math.random() }

    await client.records.put(body)

    await arc.queues.publish({
      name: 'notification-handler',
      payload: body,
    })
  }))

}

Now that we are publishing to notification-handler queue let’s do a little more let’s handle the event and push out a email using aws-sdk , with a qr of your twitter handle.

let QRCode = require('qrcode')
let AWS = require('aws-sdk');

exports.handler = async function queue(event) {
  try {
    console.info('incoming message to queue notification-handler', event)
    const AwsSes = new AWS.SES({ apiVersion: '2010-12-01' })

    // handle incoming event, which could come in as a array
    await Promise.all(event.Records.map(async record => {

      //save a record for each one and publish new event
      const parsedBody = JSON.parse(record.body)
      const qrcodeString = `https://twitter.com/${parsedBody.twitter}`

      const base64qr = await new Promise((resolve, _reject) => {
        QRCode.toString(qrcodeString, { type: 'terminal' },
          function (err, QRcode) {
            if (err) return console.error("error occurred")
            // Printing the generated code for your debugging purposes
            console.info(QRcode)
          })

        QRCode.toDataURL(qrcodeString, function (err, code) {
          if (err) return console.error("error occurred")
          resolve(code)
        })
      })


      const sendPromise = await AwsSes.sendEmail({
        Destination: {
          ToAddresses: [
            parsedBody.email,
          ]
        },
        Message: {
          Body: {
            Html: {
              Charset: "UTF-8",
              Data: `<img src="${base64qr}" alt=${parsedBody.twitter} />`
            },
            Text: {
              Charset: "UTF-8",
              Data: qrcodeString
            }
          },
          Subject: {
            Data: 'Architect QR Email Service ' + parsedBody.twitter
          }
        },
        Source: parsedBody.email,
      }).promise();

      console.info("Email Sent", sendPromise)
    }))


  } catch (error) {
    console.error('Failed to handle notification message', error)
    throw new Error('Failed to handle notification message')
  }
}

Step 4

Let’s test what we have now locally by running num run start and triggering the same rest endpoint as before your result should be QR code in your terminal and email.

I would like to note that email you use should be authorized in AWS SES for this to work. So any issues go here here to get this done.

The result in your email should be something like the following

Step 5

One additional thing you will need to do is create custom AWS policy to give you access to SES service. Simply go to IAM in your AWS console and create a policy under SES service so you can manually add the JSON policy. Please name the policy ArcSESPolicy as you will need it to match your custom macro later.


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "ses:*",
            "Resource": "*"
        }
    ]
}

What is a macro ?

A macro extends the functionality of your architect app with standard CloudFormation. It allows developers to add any resources or modify existing ones extending Architect into the entire AWS ecosystem supported by CloudFormation

So for us we will add a new field in app.arc and add new directory called macro. In the macro directory add add-policies.js .

Configuration File

@app
architect-qr-email-service

@http
post /record-creation ## http endpoint that will listen for our rest call

@queues
record-handler ## handle message that is publish by record-creation endpoint and saves it
notification-handler ## triggers email notification

## configuration to create a dynamo db 
@tables 
records
  email *String
  name **String


@macros 
add-policies ## modify your cloudformation during build timeto add SES policy permission

File structure

add-policies.js code to be added

/**
 * Add Managed Policies
 *
 * @param {object} arc - Parsed `app.arc` value
 * @param {object} sam - Generated CloudFormation template
 * @param {string} stage - Deployment target runtime environment 'staging' or 'production'
 * @returns {object} Modified CloudFormation template
 */

module.exports = async function macro(arc, cfn) {
  if (cfn.Resources.Role) {
    const newPolicies = [
      {
        PolicyName: 'ArcSESPolicy', // remember this should match your ses policy
        PolicyDocument: {
          Statement: [
            {
              Effect: 'Allow',
              Action: ['ses:*'],
              Resource: '*',
            },
          ],
        },
      },
    ]
    cfn.Resources.Role.Properties.Policies = [...cfn.Resources.Role.Properties.Policies, ...newPolicies]
  }
  return cfn
}

Step 6

Let’s deploy this baby to AWS for that all you have to do is run npx arc deploy , which will deploy a QA stack for you. This deploy commands reads your app.arc configuration files and creates your cloudformation file that will be used to create all resources.

Once that is completed you can verify all the resources we're created.

SQS queues:

Lambdas:

Dynamo table:

API Gateway:

Now that we verified all the resources let’s test the url that your deploy script should have produced. Mine looked something like this https://ka3ube9vj6.execute-api.us-west-2.amazonaws.com .

With that I will just trigger gateway with the same route as before of record-creation

curl --request POST \
  --url https://ka3ube9vj6.execute-api.us-west-2.amazonaws.com/record-creation \
  --header 'Content-Type: application/json' \
  --data '{
    "email": "martin@gizmodlabs.com",
    "name": "Martin Patino",
    "twitter": "thisguymartin"
}'

If everything works correctly you should be getting qrcode email from your aws service same as before.

🛑 If for some reason you do not get a email. This could be do to a error possibly permission reason. I would recommend that you purge your queue with dangling message and debug the issues if not your message will be dangling their until the issue is resolved. See cloudwatch for logging information .

Step 7

One you are done and no longer want the project in your aws account simply run npx arc destroy --app architect-qr-email-service --force and should delete all resources and dynamodb tables.

Thank you for joining me on this serverless journey of yours and I hope this gave you a small taste of the power of Architect.

Here is the GitHub repo if you require further info: https://github.com/thisguymartin/architect-qr-email-service or assistance.

SFTP Setup with AWS Transfer Family

Martin Patino — Sun, 09 Jan 2022 05:14:35 +0000

This is a pretty straight forward blog and personal documentation on how to setup a SFTS3 bucket as the backend of the SFTP server. I hope you find this helpful as I did.

Step 1.

Create S3 Bucket from the AWS console. The S3 Bucket will be the place where the files will stay. No custom changes will need to be made to the s3 bucket itself.

Step 2.

Navigate to AWS Transfer Family service and select create Server. Where you will be prompted to select FTP, FTPS, SFTP. Select SFTP, which stands for SSH File Transfer Protocol. SFTP is a network protocol that provides file access, file transfer, and file management over any reliable data stream.

Step 3.

Next we need to select identity provider, which in short is an access layer that will allow certain users to access SFTP server. You can do this programmatically via lambda and add your own custom identity provider, or in this case just create a single user at a time use the aws managed service

Step 4.

Next, we select and setup our own custom DNS hostname. In this case we are just going to use AWS generated host that is provided. If you would like this could be modified in the future.

Options:

None: AWS will create a DNS record such as {some-random-generated-string}.server.transfer.{region}.amazonaws.com.
Route 53 Alias: the service will create an alias on Route 53 so you can use a more - friendly name and a subdomain such as ftps.martinpatino.com .
Other DNS: 3rd party DNS server option.

Step. 5

Just select a domain, which will provide 2 options, which here we will just go with Amazon S3 as we will providing a user access to a s3 bucket with limited permissions to a specific bucket.

Once this step is completed, you will prompted to review your server summary and confirm, in which your SFTP server will be generated.

Step. 6

Configuration of IAM Roles with S3

So after we have created the SFTP server and created S3 bucket that you would like user to have access. The next part is to handle user role permissions and policy creation. In our case we want to restrict users to only be able to view a specific bucket. So just head to IAM create a custom SFTP role for your user in AWS under the service use case of Transfer.

You can copy and paste this and modify the custom-bucket-name field.

This rule will give the user access to delete, fetch, update and add files to your s3 bucket via FTP.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": [
                "arn:aws:s3:::{custom-bucket-name}"
            ],
            "Effect": "Allow",
            "Sid": "ReadWriteS3"
        },
        {
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:DeleteObjectVersion",
                "s3:GetObjectVersion",
                "s3:GetObjectACL",
                "s3:PutObjectACL"
            ],
            "Resource": [
                "arn:aws:s3:::{custom-bucket-name}/*"
            ],
            "Effect": "Allow",
            "Sid": ""
        }
    ]

Step. 7

To create a user you will need username, s3 bucket you want the user have access to and the role they are associated with, which would be the one that was created above.
Once you and bind your new SFTP_COMPANY_ROLE or whatever you called it to the user. In my example below, I am just calling user usercompany_a, but you can call it whatever you want. You will then have the option to setup a policy, which is not required. However, it will help locking down your user to only be able to have access to specific directory under a certain bucket.

AWS Transfer does have auto-generate policy if you would like to use it, which would look like the example below.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowListingOfUserFolder",
      "Action": [
        "s3:ListBucket"
      ],
      "Effect": "Allow",
      "Resource": [
        "arn:aws:s3:::${transfer:HomeBucket}"
      ],
      "Condition": {
        "StringLike": {
          "s3:prefix": [
            "${transfer:HomeFolder}/*",
            "${transfer:HomeFolder}"
          ]
        }
      }
    },
    {
      "Sid": "HomeDirObjectAccess",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject",
        "s3:GetObjectVersion"
      ],
      "Resource": "arn:aws:s3:::${transfer:HomeDirectory}*"
    }
  ]
}

The final step is add SSH Public Key, which the user should provide to you. The user will the use their own private key to connect to the SFTP via some SFTP client. This is a required field as without it. Your users will not be able to connect.

The last step is to add the user’s Public Key. They will need their Private Key to connect to the SFTP Server. If you don’t add the Public Key, the users can connect without any credentials.

Test time

It’s time to test the SFTP connection. I use CyberDuck, which is available on both Mac/Windows. Try to connect and if everything is setup correctly, you should be able to see the content in you S3 bucket. You should even be able to upload files from your SFTP client.

Success!!!

Hope you enjoy learning a bit!

Dev Tools To Get started On MacOs

Martin Patino — Mon, 20 Sep 2021 22:10:51 +0000

Must have Homebrew tools for MacOS

I am one of those folks that always rebooting my machine and always forget my must have tools. So this is my list to get my dev tools quick using homebrew to avoid downloading every app from a website. Homebrew makes it easy to get project installed and running in a matter of seconds.

Install Homebrew using the following script:

*Paste that in a macOS Terminal or Linux shell prompt.
*

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

What is Homebrew?

It decleraes itself The Missing Package Manager for macOS (or Linux) and I do agree as it allows me to bulk install programs and all it takes is copy and paaste links and run them once to install and also update in bulk if need to.

Here is a list of commands:

brew install arp-scan
brew install asciidoc
brew install brew-cask-completion
brew install cmake
brew install composer
brew install docbook-xsl
brew install ghostscript
brew install git
brew install highlight
brew install imagemagick
brew install lastpass-cli --with-pinentry --with-doc
brew install nmap
brew install node
brew install openssl
brew install php72
brew install php-cs-fixer
brew install phplint
brew install pkg-config
brew install python3
brew postinstall python3
brew install thefuck
brew install vassh
brew install vim
brew install wget
brew install wrk
brew install zsh-syntax-highlighting

Homebrew Cask

Some programs don’t exist in Homebrew, usually the apps that you use with a GUI, as opposed to command line tools. For these there is
Homebrew Cask, an extension of Homebrew for the software that doesn’t exist in core.

brew cask install alfred
brew cask install arduino
brew cask install boostnote
brew cask install calibre
brew cask install cleanmymac
brew cask install dropbox
brew cask install etcher
brew cask install evernote
brew cask install firefox
brew cask install google-chrome
brew cask install imageoptim
brew cask install iterm2
brew cask install nordvpn
brew cask install owasp-zap
brew cask install qlcolorcode
brew cask install qlmarkdown
brew cask install qlprettypatch
brew cask install qlstephen
brew cask install quicklook-csv
brew cask install quicklook-json
brew cask install sequel-pro
brew cask install signal
brew cask install skype
brew cask install slack
brew cask install spectacle
brew cask install sublime-text
brew cask install suspicious-package
brew cask install telegram
brew cask install transmit
brew cask install vagrant
brew cask install virtualbox
brew cask install vlc
brew cask install webpquicklook
brew cask install caskroom/fonts/font-source-code-pro

Hope this helps folks 🍺

How to Setup a Hashnode Blog Sub Domain on Netlify

Martin Patino — Mon, 20 Sep 2021 22:09:08 +0000

So you have a your own personal website hosted on Netlify, but want to start writing like I am and create a blog using Hashnode ? How does one do that and is it possible to setup a custom sub domain with Hashnode? The answer is yes.

Login into your Netlify account and click on the domain app you want to setup a subdomain. I am choosing martinpatino.com.

Click on Domain Settings button

3.Under Domains and click on ** Go to DNS Panel** on the domain you want to target.

Next just click on "Add a New Record" and enter the following DNS Settings and in the fields available just fill out the following

Record Type: CNAME

Name: blog or any subdomain of your choice

Value: hashnode.network

Result:

That is pretty much it for Netlify so congrats on this part. Now all that is left is complete the setup on Hashnode side.

Under Domains in the dashboard settings you will just add custom domain such as blog.martinpatino.com. The DNS propagation can take up 24 hours to complete.

You can see blog.martinpatino.com now hosting Hashnode custom subdomain blog ☕

Full-stack for Frontender Folks Part 1

Martin Patino — Sat, 13 Apr 2019 16:51:00 +0000

In this artilce I will first state explaning what is a IP address, DNS,Server and so much more in order for you to get your first server deployed.

How does the internet work?

These are the layers of how the internet is created in a nutshell for those who have taken a computer science degree.

The seven layers of function are provided by a combination of applications, operating systems, network card device drivers and networking hardware that enable a system to transmit a signal over a network Ethernet or fiber optic cable or through Wi-Fi or other wireless protocols in your machine or device.

If you would like to learn more about different layers of the internet here is a good article The Sevent Layers of Networking

What is a domain?

Let's start with what actually is a domain. A domain is just a wrapper ontop of a IP address. The most common one you as a engineer is 127.0.0.1, which stands for localhost. Localhost in essense is just a wrapper ontop of 127.0.0.1, which is always your local machine IP address.

You might have heard of domain and subdomain. Domain names are mainly used as name of websites. Subdomains are dependant on standard domains.


example: domain

martinpatino.com

example: subdomain

blog.martinpatino.com

What is a IP address?

A IP address stands for Internet Protocol it is a type of protocol to communicate via network. A IP address is a numerical label assigned to each device connected to a computer network that uses IP for communicaiton. n IP address serves two principal functions: host or network interface identification and location addressing.

Example: 

 172.16.254.1

There are a many of protocols, however IP address is the most common among developers. The internet uses TCP protocol, which is a whole networking course which I will not get into. However, if you are interested to learn more about TCP here is a article to help you learn more TCP.

What is DNS?

In simple terms DNS stands for Domain Name System, which is responsible to map IP address to domains. So to bring it together something like this

martinpatino.com == 23.12.185.66

DNS has layers of cashing, which helps you with speed and your machine does not have to resolve the IP address everytime. If your first layer does not have the mapping to DNS IP address than it will resolve to second layer and if not there than third layer until it is resolved, which could be updated by some server.

First layer : Local cache
Second layer: LAN DNS server (Modem has a local caching as well)
ISP DNS server: Has it's own local caching

Troubleshoot Scenerio: Let's say your webportal is down. It may not be that your server is down it could mean that your DNS is down. A simple test would be to ping your website/portal. If you get a response than your server is up and running otherwise you will get timed out.

ping google.com 

response:

PING google.com(lax28s01-in-x0e.1e100.net (2607:f8b0:4007:801::200e)) 56 data bytes
64 bytes from lax28s01-in-x0e.1e100.net (2607:f8b0:4007:801::200e): icmp_seq=1 ttl=55 time=23.8 ms
64 bytes from lax28s01-in-x0e.1e100.net (2607:f8b0:4007:801::200e): icmp_seq=2 ttl=55 time=22.2 ms

Security Issues(DNS)

A security issue with DNS is called DNS Spoofing. DNS spoofing occurs when a particular DNS server’s records of “spoofed” or altered maliciously to redirect traffic to the attacker.

The way that is currently resolve this is utiling https, which creates a handshake and confirms that you are who you say you are. DNS spoofing will generally not work on HTTPS websites unless the client chooses to ignore the warning signs or if you manage to obtain the private key for the site.

What is SSH?

SSH stands for Secure Shell, which is a cryptographic network protocol for operating network services securely over an unsecured network. Typical applications include remote command-line login and remote command execution, but any network service can be secured with SSH.

Example of a ssh being executed

ssh student@45.55.12.123

In order to use ssh you will either need username/password or ssh key to login into a server. It is best pracitce to use ssh key rather than username and password as humans we are likely to keep password easy to remeber, which can be broken into in a matter of minutes.

Most commong people use for passwords:

123456
password
123456789
12345678
12345
111111
1234567

In order to start using ssh key you must generate your machines ssh keys. Generating a ssh key it consist of 2 keys a public key and private key. The public key is stored in the server and private key stays on your machine. Think of it as a two way lock in order to decrypted message being sent between machines it requires both priavete key and public key.

The way to generate a generate ssh key:


some user (11:39) ~>  ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/home/ylo/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/ylo/.ssh/id_rsa.
Your public key has been saved in /home/ylo/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:Up6KjbnEV4Hgfo75YM393QdQsK3Z0aTNBz0DoirrW+c ylo@klar
The key's randomart image is:
+---[RSA 2048]----+
|    .      ..oo..|
|   . . .  . .o.X.|
|    . . o.  ..+ B|
|   .   o.o  .+ ..|
|    ..o.S   o..  |
|   . %o=      .  |
|    @.B...     . |
|   o.=. o. . .  .|
|    .oo  E. . .. |
+----[SHA256]-----+
klar (11:40) ~>

You should be able to find your ssh keys in your ~/.ssh directory. You can use this ssh public key to authenticate with servers, twitter, github ect.

NOTE DO NOT LOOSE OR SHARE YOUR PRIVATE KEY!

For more details on generating ssh-key info here is a link https://www.ssh.com/ssh/keygen/

In the next post we will be going over servers and we will be going over how to run your own AWS LightSail Ubuntu Server.

A Millennial's Journey

Martin Patino — Mon, 08 Apr 2019 03:14:07 +0000

This article is not a lesson, but more of an experience for anyone who can relate.

My name is Martin Patino a Criminology and Criminal Justice graduate from Arizona.I am now a Software Engineer working on multiple exciting projects, however prior to that I worked for DCS(Department of Child Safety) and was very confuse when leaving college. When I graduated I was ashamed and was not proud of my accomplishment and was not happy where I was at. My mind started to linger 6 months after graduation to more of an entrepreneurship perspective and no I do not mean pushing Herbal Life on people, but doing my own thing. Throughout life I had very little mentorship as oldest child and I had seen friends and family members who have struggled with the degree that they have obtained. I hope this article gives you some hope and encouragement that your time spent isn't a waste everyone has a lot to offer even if you don't believe it. Your degree should not define who you are and should not limit you. You are unique in your own way.

I graduated in May 25, 2014 from Arizona State University with my Bachelors degree in Criminology and Criminal Justice. I will be honest that a few months back if you would have congratulated me. I would have answered you "Thank You" with a shameful face. I was not proud of my accomplishment, nor did I have hope that by the end of my senior year that I would find a job. I'll admit I considered many times during my college years to switch to a different major. The only reason I didn't was because I was so far ahead and I was trying to avoid additional student loans at all cost.

An issue that I have perceived is that there is an expectancy and mindset for high school students to attend a university. However, there is not much communication and dialog about what they want to do with their life or their passion. This is a shared issue that seems to arise in all college campuses that many students do not seem to understand why they are learning impractical material that they do not care about and since it is not part of their major or even true passion.
Perhaps you can relate, you have the biology major student who plans on going to medical school, but wishes to be a dancer. You have the communication major that doubts about passing her class, but would really want to start up a business. You have the teaching major who waits to one day be a teacher, however his real passion is in graphic design art and video games.

My question to you I guess would be are you taking advantage of the borrowed time you have on this world? Are you doing what you love most importantly? Life is to short to be miserable.
It is understandable that many individuals will stick out to their own plan they might not like, there are many that will change early on or afterwards to purse something they are passionate about or at least in search for their passion. I for example would consider myself more of an explorer of my passion and entrepreneurship and a tech nerd now. I say explore because I have many projects in my mind that I would like to start up of my own, however I am still searching for one that truly ignites my fires.

Early on in my career right after college, I had many encounters be it family, friends, acquaintances, strangers ask me the same question from "What did I major?" and "Do I plan on going to grad school?" My answer is always "I majored in Criminal Justice and currently work for the state. However, someday I would like to start new projects and start my own independent business something that gives me a sense of purpose".

If there is one thing that I will be honest about is that after graduation from time to time I would always tell myself "Why did a major in such a useless and unmarketable field." I still believe that my degree is not unmarketable to this point and perhaps I am wrong. But I have accepted that my degree does not define my future or me as a person and in the end of it all it did not. You have to believe in yourself and not be limited to your major. I have met journalist majors, who are software developers, CEO with bachelors in psychology, and marketing consultants with Spanish degrees. So don't limit yourself to that piece of paper that you have hanging on your wall. Mine is actually in a drawer somewhere.

I am an individual that is ashamed of the U.S education system not merely because of our curriculum, but because I believe that schools and colleges in that matter limit growth, entrepreneurship, imagination exploration.

I have a feeling that many graduates' individuals that may read this and may understand where I am coming from. Understand that you are not alone there are plenty people that feel like you do. I come from a blue-collar hard working immigrant family. I understand that depending on your culture, university is expected as soon as you graduate high school. It is embedded in us from a young age that college and a degree is your pathway to happiness. I am here to tell those times have changed. College does not guarantee a good income if you are doing it for the money, nor does it guarantee a career in your field like many of the unemployed nursing graduates I have met.

I understand that it may be a frightening thought that you wasted five years in college to obtain a degree that wont be use, but these things happen and you just have to adapt to the best of your abilities and make the best of it and try to find your passion.

This is how I have chosen to approach it, slow but steady.
If there are people out there who believe their degree is useless or isn't for them. Then I would recommend keep your family, friends close because they would be your support during this hard times of confusion and stress. I recommend networking be it Facebook, meet up, gym, grocery store, church. Who knows whom you might meet. You got nothing to lose by networking.

If you graduated and feel that you wasted 5 years for nothing it is understandable. Except, you didn't waste 5 years if you really think about it. You might think you wasted your time in a university, but actually you developed valuable skills through your education. You learned problem solving skills, critical analysis, attention to details, public speaking, researching, networking and others that you might not have gotten if it wouldn't have been because of your degree or going to college. So be POSITIVE your time was not a waste.

Your degree does not define who you are.

Some might call you crazy that you maybe changing your degree from accounting to teaching or computer science for social work. Imagine and do what makes you happy, life is short. You maybe called crazy, but aren't all great visionaries and entrepreneurs a little crazy at some point.

I end with a quote that always gives me hope and a smile
Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes… the ones who see things differently - they're not fond of rules… You can quote them, disagree with them, glorify or vilify them, but the only thing you can't do is ignore them because they change things… they push the human race forward, and while some may see them as the crazy ones, we see genius, because the ones who are crazy enough to think that they can change the world, are the ones who do. - Steve Jobs