DEV Community: Lam

Wang-16 vs blob-47: how auto-tile sets actually work (and which one to draw)

Lam — Sun, 01 Nov 2026 16:09:00 +0000

Auto-tiling is what lets you paint "grass" or "water" on a map and have the borders sort themselves out. Under the hood every auto-tile system does the same thing: look at the neighbours of a cell, turn them into a number, and use that number to pick a tile.

The two layouts you will meet most are Wang-16 and blob-47. They are not interchangeable. Picking the wrong one means either drawing tiles you never use or getting seams you cannot fix.

Wang-16: a tile per corner combination

A Wang corner set asks one question per tile corner: is this corner terrain A or terrain B? Four corners, two options each, gives 2⁴ = 16 tiles.

Each tile is identified by its corners, read clockwise or as a 4-bit number (NW, NE, SW, SE). The full grass tile is 0000, the full dirt tile is 1111, and everything in between is a transition.

Wang-16 works well for top-down terrain: grass meeting dirt, sand meeting water, snow meeting rock. Transitions are soft and diagonal-friendly, and you only draw 16 tiles per pair of terrains.

Its limit: because it only knows about corners, it cannot tell a one-tile-wide path from a thicker one. Thin features come out blobby.

Blob-47: edges and corners

A blob set looks at all 8 neighbours of a cell: the four edges (N, E, S, W) and the four corners (NE, SE, SW, NW). Eight bits would mean 256 combinations, so why only 47?

Because most corners don't matter. A corner neighbour only changes the tile if both edges next to it are also set. If the north or east neighbour is empty, the NE neighbour is hidden behind a border anyway. Fold away the corners that can't be seen and 256 masks collapse to 47 distinct tiles:

The folding rule in code is three lines:

// bits: N=1, NE=2, E=4, SE=8, S=16, SW=32, W=64, NW=128
function canonical(mask) {
  const N = mask & 1, E = mask & 4, S = mask & 16, W = mask & 64
  if (!(N && E)) mask &= ~2    // NE only counts with N and E
  if (!(S && E)) mask &= ~8    // SE only counts with S and E
  if (!(S && W)) mask &= ~32   // SW only counts with S and W
  if (!(N && W)) mask &= ~128  // NW only counts with N and W
  return mask
}

Run every value from 0 to 255 through it and you get exactly 47 unique results.

Blob-47 is the right choice for walls, platforms, cliffs, rivers and 1-tile-wide paths: anything where inner corners and thin strips have to look deliberate. The price is drawing 47 tiles instead of 16.

Which one should you draw?

	Wang-16 (corners)	Blob-47 (edges + corners)
Tiles per terrain pair	16	47
Looks at	4 corners	8 neighbours
1-tile-wide strips	Blobby	Clean
Inner corners	Soft	Sharp, explicit
Good for	Top-down ground, water, sand	Platformer terrain, walls, cliffs, roads
Godot 4 terrain mode	Match Corners	Match Corners and Sides
Tiled Wang set type	Corner	Mixed

A common setup is both: Wang-16 for the ground layer, blob-47 for walls and anything the player collides with.

You don't have to draw 47 tiles by hand

Most blob tiles are combinations of the same few pieces: an outer corner, an inner corner, a straight edge and the fill. Split each tile into four quarters and every quarter is one of those pieces. This is the RPG Maker "A2 autotile" trick, and it means a handful of hand-drawn pieces can generate the full 47.

That's the approach the tileset editor in SimplePixelArt uses: draw a base tile, pick Wang-16 or blob-47, and it composes every border variant for you.

Getting the set into an engine

Godot 4: create a TileSet, add a terrain set with the mode from the table above, add your terrain, then paint the peering bits on each tile so they match its mask. With the bits set, the Terrains tab in the TileMap editor auto-tiles as you paint.

Tiled: open the tileset, add a Wang set of type Corner (Wang-16) or Mixed (blob-47), add your colours, and mark each tile's corners or edges. The Terrain brush then picks tiles automatically.

Marking 47 tiles by hand is the tedious part, so it's worth using a tool that writes the file for you. The tileset editor above exports a Godot .tres with the terrain peering bits already set and a Tiled .tsx with the Wang set filled in.

Summary

Wang-16: 4 corners → 16 tiles. Soft ground transitions, cheap to draw.
Blob-47: 8 neighbours, with hidden corners folded away → 47 tiles. Clean walls, paths and inner corners.
Choose by what the terrain has to do, not by tile count.

If you want to try both without drawing anything first, open a free online pixel art editor, sketch one base tile and let the tileset editor build the set. There's more pixel art made with it on the site.

I Built SimplePixelArt — A Pixel Art Editor That Stays Smooth With Multiple Boards

Lam — Fri, 23 Oct 2026 09:02:30 +0000

Hey devs! 👋

I've been building SimplePixelArt, a free browser-based pixel art editor and toolkit for artists, indie game developers, and anyone who loves pixel art.

My goal is to make creating pixel art and preparing game assets easier, without requiring complicated software installations.

🎨 What Can You Do With SimplePixelArt?

SimplePixelArt is more than just a drawing tool. It brings pixel art creation, image conversion, sprite extraction, tileset building, and tilemap editing together in one place.

🎨 Create & Generate Pixel Art

Pixel Art Editor — Draw pixel by pixel with layers, palettes, mirror mode, and multiple boards in a smooth workspace.
AI Pixel Art Generator — Generate pixel art from text prompts or reference images.
Image to Pixel Art Converter — Convert photos and images into pixel art. Adjust resolution, color count, brightness, contrast, saturation, transparency, and dithering.
Upload Existing Pixel Art — Import PNG, GIF, and WebP artwork while preserving its original pixel grid.

🧩 Convert & Prepare Game Assets

Tileset & Spritesheet Slicer — Split spritesheets and tilesets into individual sprites using a grid, automatic detection, or manual selection. Export sprites as a ZIP of PNG files.
Tileset Editor — Organize tiles, generate auto-tile terrain variations, and export game-ready assets for Godot, Tiled, Unity, and other workflows.
Tilemap Editor — Build top-down or isometric maps with multiple layers and terrain-aware brushes. Export maps in Tiled's TMJ format.

🌍 Publish & Discover Pixel Art

SimplePixelArt Community — Discover pixel art, publish your creations, and explore work from other artists.
Creator Program — Learn about creator features, artwork attribution, licensing, and sharing your work with the community.

🛠️ Why I Built It

I wanted to make pixel art creation accessible while also solving practical problems in game development.

Drawing a sprite is only one part of the workflow. You might also need to convert a reference image, extract sprites from a sheet, create reusable terrain tiles, and assemble those tiles into a game world.

Having separate tools for every step can make the workflow unnecessarily fragmented.

With SimplePixelArt, you can move from creating pixel art to preparing game assets and building maps, all in your browser.

🚀 What's Next?

I'm continuing to improve the editor, expand the creative workflow, and make the platform more useful for both pixel artists and indie game developers.

Feedback is always welcome, especially from developers working with spritesheets, autotiling, tilesets, and tilemaps.

If you're interested in pixel art or browser-based creative tools, give it a try:

👉 https://simplepixelart.com

I'd love to hear what you think and what features you'd like to see next!

How I Built Factcovery in 2 Days with Claude — 0 Lines of Code Written by Me

Lam — Sat, 28 Mar 2026 14:21:56 +0000

Here's what Factcovery actually looks like.

Website

Mobile App

App coming soon, pending store review

Lighthouse Report

Honestly, hitting a good Lighthouse score isn't rocket science — but I'm pretty confident AI will nail it more consistently than most of us would on our own.

Factcovery is live at factcovery.com.

First things first — this is NOT vibe coding

There's a way most people use AI that looks something like this: open Claude or ChatGPT, type "build me a todo app", get code back, paste it in, pray it works. When it breaks, paste the error back in. Repeat forever.

That's vibe coding. It works fine for small throwaway tasks. But for a real product — with a web app, a REST API, a mobile app, and CI/CD — it falls apart fast.

What I did was a little different. I used Claude as an AI Agent, which means before Claude writes a single line of code, we plan together first.

The core rule: Plan in plain English → Review → Then build.

Nothing fancy. But that one extra step changed everything about how the project turned out.

What is Factcovery?

Factcovery is an app that aggregates and generates interesting "facts" by topic — bite-sized, accurate, shareable pieces of information you'd want to send to a friend.

The final stack:

Web: NuxtJS
API: Django REST Framework
Mobile: Flutter
Infrastructure: GitHub Actions + VPS

Total time: ~2 days.

Part 1 — Web with NuxtJS: Plan first, code second

The first step is never code — it's a conversation

Instead of saying "build me a web app about facts", I started with an actual conversation:

My prompt:
"I want to build a web app called Factcovery — where users can discover interesting facts by topic. Target users are 20–35 year olds who like quick reads and mostly browse on mobile. Before writing any code, help me list all the screens we need, the main user flows, and suggest a folder structure for NuxtJS. No code yet — just the plan."

Claude came back with a clear plan: a list of screens, a user journey from app open to sharing a fact, and a sensible folder structure. I read it, adjusted what didn't feel right, and only then gave Claude the green light to start coding.

This is the key point: you make the decisions, Claude does the execution.

UI — Describe the feeling, not the pixels

I didn't say "blue button, border-radius 8px". I said:

My prompt:
"The UI of Factcovery should feel like a modern science magazine — clean, has depth, not too serious. Dark background with amber yellow as the accent color. Typography needs to be readable on mobile. Please propose a simple design system: color palette, font pairing, spacing scale. Then apply it to the homepage."

The result? A consistent design system from day one — not something patched together screen by screen.

Multiple Languages — Plan it from the start

Retrofitting i18n into an existing codebase is painful. This time I asked Claude to plan the i18n strategy before the project structure was even finalized:

My prompt:
"This project needs to support English and Vietnamese from day one. Propose how to organize translation files in NuxtJS, a naming convention for keys, and a workflow for adding new languages later without having to refactor. No code yet — just the approach."

Lighthouse — Build for performance, don't fix it later

Instead of waiting until the app was done to find out the Lighthouse score was bad, I asked Claude upfront:

My prompt:
"For a NuxtJS app that displays a lot of text and images, what are the most common Lighthouse issues? Create a checklist of things to implement from the start to hit 90+ on both mobile and desktop."

Claude returned a concrete checklist. I implemented it while building — not after.

Part 2 — Django Backend: Read the frontend, then write the API

A reverse workflow — that actually makes sense

Instead of designing the API first and making the frontend conform to it, I did the opposite: I used the frontend code itself as input for Claude to infer the data model.

My prompt:
"Here are my Nuxt components and pages [paste code]. From these, infer the Django models needed, the relationships between them, and the minimum API endpoints required for the frontend to work correctly. Output in this order: Models → Serializers → URLs."

The result was a backend that was in sync with the frontend from the very beginning — no discovering missing fields after the fact.

Crawl & Generate Fact Pipeline

This was the most logic-heavy part. I spent the most time on the planning step before letting Claude write anything:

My prompt:
"I need a pipeline: crawl news sources → extract content → use AI to summarize into a short 'fact' → save to DB → expose via API. Design the architecture for this pipeline: what Django models are needed, what task queue to use, error handling strategy, and how to schedule it to run periodically. No code yet — just the architecture in text form."

After reviewing and tweaking the architecture, I had Claude implement it piece by piece.

Part 3 — Mobile with Flutter: Know when to pivot

Tried React Native — and recognized it wasn't the right fit

I started with React Native because I was comfortable in the JavaScript ecosystem. Claude scaffolded the project, I ran it, and the performance wasn't where I wanted it — animations felt sluggish, and the structure was more complex than a relatively simple app needed.

Instead of trying to fix it, I made the call to pivot. This is where human judgment matters more than any prompt.

Switching to Flutter

With Flutter, I started fresh — the right way:

My prompt:
"I'm building the Factcovery mobile app with Flutter. The app has these screens: [list]. Please propose: project structure, a state management solution that fits this app, naming conventions, and how to organize the theme and styles. Explain the reasoning behind each choice."

Claude didn't just give me a structure — it explained why. I read it, understood the reasoning, and agreed before moving forward.

Push Notification System

My prompt:
"I need push notifications for the Flutter app: notify users when there are new facts on topics they follow. Plan the entire flow: from user subscribing to a topic → backend triggering the notification → Flutter receiving and displaying it. Include background handling. Plan first, code after."

Part 4 — CI/CD: GitHub Actions deploying to VPS

This is the part that intimidates a lot of people — but with the "plan first" approach, it's straightforward:

My prompt:
"I have a VPS running Ubuntu and my code is on GitHub. When I push to main, I want to automatically: SSH into the VPS, git pull, run docker-compose up to restart services, then run a health check. Plan this workflow step by step, then write the complete .github/workflows/deploy.yml file. Also suggest how to set up SSH keys securely for GitHub Actions."

Claude wrote the full YAML config, the deploy script, and a guide for setting up secrets. I just read it, understood the flow, and followed the instructions.

What I learned

✅ What worked really well

1. Always ask for a plan before any code
This is rule number one. Any task more complex than "fix this specific bug" should start with a planning conversation. Spending 5 extra minutes on a plan saves 2 hours of debugging.

2. Use the output of one step as input for the next
Frontend code → input for backend design. Backend API spec → input for mobile app. Everything connects in a logical chain.

3. Ask Claude to explain its reasoning
Add "explain why" to your prompts. You don't need to read every line of code, but understanding the reasoning lets you review properly and make real decisions.

4. Break tasks into small pieces — don't prompt everything at once
One giant prompt = mediocre output across the board. One focused prompt per step = higher quality output that's actually reviewable.

⚠️ Where human judgment is still essential

Deciding to pivot (like switching from React Native to Flutter): AI can't sense that something "feels off" in the context of your specific project.
Reviewing architecture before implementation: Claude will suggest something reasonable, but you understand the business requirements better than it does.
Choosing trade-offs: When Claude presents multiple options, you're the one who decides — not Claude.

The real cost of building with AI

Let's talk about something people rarely mention in posts like this — how much it actually costs.

I'm on Claude Pro ($20/month). For a normal day of work, that's more than enough. But building an entire product in 2 days — web, API, mobile, and CI/CD all at once — is not a normal day. I hit the usage limit. Multiple times.

When that happened, I switched over to minimax 2.5 to keep the momentum going - It's free. It handled most tasks just fine, but there were moments where I could feel the difference — especially on the heavier architecture planning prompts where Sonnet tends to reason a bit deeper and stay more consistent across a long context.

So if you're planning something like this: either budget for API usage on top of your Pro subscription, or be strategic about when you use the big prompts. Save the architecture sessions for when you have the strongest model available. Don't waste it on boilerplate.

Total cost was still a fraction of what any freelancer would charge for the same scope. But it wasn't free — just worth being upfront about.

The takeaway

Factcovery wasn't built by a developer who's great at writing code. It was built by someone who knows how to work with AI intentionally.

The difference isn't in the prompts or the tools. The difference is in the mindset: you are the product manager of your own project, and Claude is the best engineer you've ever worked with — as long as you brief them clearly enough.

If you're curious about anything — the project structure, the exact prompts, the mistakes I didn't write about — just leave a comment. I'll answer everything. Building in public means sharing the messy parts too.

Javascript Functions Quick References

Lam — Thu, 21 Dec 2023 09:59:01 +0000

JavaScript Functions Cheat Sheet

Function Declaration

Syntax

function functionName(parameters) {
  // Function body
  return result;
}

Example

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Function Expression

Syntax

const functionName = function(parameters) {
  // Function body
  return result;
};

Example

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('World'));

Arrow Function

Syntax

const functionName = (parameters) => {
  // Function body
  return result;
};

Example

const greet = (name) => `Hello, ${name}!`;

console.log(greet('World'));

Immediately Invoked Function Expression (IIFE)

Syntax

(function() {
  // Function body
})();

Example

(function() {
  console.log('IIFE executed');
})();

Function Parameters and Arguments

Example

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(5, 10)); // Output: 15

More: Javascript Cheat Sheet

JavaScript Requests quick reference

Lam — Thu, 21 Dec 2023 09:56:04 +0000

JavaScript Requests Cheat Sheet

XMLHttpRequest

Example

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Request failed!');
  }
};
xhr.send();

Fetch API

Example

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios

Example

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Async/Await

Example

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

More Javascript Cheat Sheet

PyTorch Quick Ref

Lam — Sun, 17 Dec 2023 02:32:02 +0000

Imports

import torch                                        # root package
from torch.utils.data import Dataset, DataLoader    # dataset representation and loading

Neural Network API

import torch.autograd as autograd         # computation graph
from torch import Tensor                  # tensor node in the computation graph
import torch.nn as nn                     # neural networks
import torch.nn.functional as F           # layers, activations and more
import torch.optim as optim               # optimizers e.g. gradient descent, ADAM, etc.
from torch.jit import script, trace       # hybrid frontend decorator and tracing jit

TorchScript and JIT

torch.jit.trace()         # takes your module or function and an example
                          # data input, and traces the computational steps
                          # that the data encounters as it progresses through the model

@script                   # decorator used to indicate data-dependent
                          # control flow within the code being traced

ONNX

torch.onnx.export(model, dummy data, xxxx.proto)       # exports an ONNX formatted
                                                       # model using a trained model, dummy
                                                       # data and the desired file name

model = onnx.load("alexnet.proto")                     # load an ONNX model
onnx.checker.check_model(model)                        # check that the model
                                                       # IR is well formed

onnx.helper.printable_graph(model.graph)               # print a human readable
                                                       # representation of the graph

References:

How To Install and Use Docker Compose on Ubuntu 20.04

Lam — Fri, 15 Dec 2023 07:31:07 +0000

Step 1 — Installing Docker Compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

Next, set the correct permissions so that the docker-compose command is executable:

sudo chmod +x /usr/local/bin/docker-compose

To verify that the installation was successful, you can run:

docker-compose --version

You’ll see output similar to this:

Output
docker-compose version 1.29.2, build 5becea4c

Step 2 — Setting Up a docker-compose.yml File

Start off by creating a new directory in your home folder, and then moving into it:

mkdir ~/compose-demo
cd ~/compose-demo

In this directory, set up an application folder to serve as the document root for your Nginx environment:

mkdir app

Next, create the docker-compose.yml file:

nano docker-compose.yml

Insert the following content in your docker-compose.yml file:

Step 3 — Running Docker Compose

docker-compose up -d

References:

ChatGPT Coding CheatSheets

Lam — Fri, 15 Dec 2023 03:25:33 +0000

Explain why a piece of code isn't working

Why this code is not working?
var x = 5;
var y = 0;
console.log(x/y);

Explain what a piece of code means

What does this code do?
function addNumbers(a, b) {
    return a + b;
}

*Rewrite the code using the specified language

Translate this code into Python:
function addNumbers(a, b) {
    return a + b;
}

Code an entire software program

Write a program that calculates the factorial of a given number in python.
How do I make an HTTP request in Javascript?

Generate regular expressions (regex)

Create a regex that matches all email addresses?
Generate 8-digit password regex

Add comments to your codebase

Add comments to this code: 
function addNumbers(a, b) {
    return a + b;\n}

Change the CSS of a line of code

Update the CSS for this line to change the font color to blue?
<p class=\"example\">Hello, QuickRef.ME!</p>

Change the HTML of a line of code

Add a class of \"header\" to this header tag?
<h1>Hello, QuickRef.ME!</h1>

References:

DB2 Cheat Sheet

Lam — Thu, 14 Dec 2023 10:37:14 +0000

Db2 is a family of data management products, including database servers, developed by IBM. It initially supported the relational model but was extended to support object–relational features and non-relational structures like JSON and XML.

Create a database (default drive)	`DB2 CREATE DB <dbName>`
Create a database on a specific drive	`DB2 CREATE DB <dbName> ON <Drive>`
Drop a database (with caution)	`DB2 DROP DB <dbName>`
Connect to a database	`DB2 CONNECT TO <dbName>`
Disconnect from a database	`DB2 DISCONNECT FROM <dbName>`

References:

LaTeX: Environments 11

Lam — Fri, 08 Dec 2023 05:50:22 +0000

\begin{smallmatrix}
   a & b \\
   c & d
\end{smallmatrix}

\begin{smallmatrix}
   a & b \\
   c & d
\end{smallmatrix}

Useful links

Create cheatsheet app

LaTeX Cheatsheet

Awk: if-else statement

Lam — Fri, 08 Dec 2023 05:50:14 +0000

awk -v count=2 'BEGIN {
    if (count == 1)
        print "Yes";
    else
        print "Huh?";
}'

#Ternary operator

awk -v count=2 'BEGIN {
    print (count==1) ? "Yes" : "Huh?";
}'

Useful links

Create Online cheatsheet

Awk Cheatsheet

Adobe Lightroom CC: Using help

Lam — Fri, 08 Dec 2023 05:50:03 +0000

Shortcut	Action
`Ctrl` `/`	Display current module shortcuts
`(click)`	Hide current module shortcuts
`Ctrl` `Alt` `/`	Go to current module Help
`F1`	Open Community Help

Useful links

Create Online cheatsheet

Adobe Lightroom CC Cheatsheet