Site Slap Devlog #2 (it looks like a real app now)

TL;DR

• wrapped the whole thing in a mac-style browser window with traffic lights and a skin switcher
• screenshot buffer so microlink waits for the site to actually finish loading
• skeleton loaders so the ui doesn’t just sit there looking dead

---

the window

the app had no personality before. it was just a black page with a text input. it worked but it felt like a prototype.

now the whole thing lives inside a browser-window shell. dark title bar, red yellow green traffic lights top-left, three tabs across the top, basic, decent, fire. those tabs are the skin switcher. click one and the content inside the window changes completely.

only basic is wired up right now. decent and fire both say “coming soon.” but the chrome is done, it’s consistent, and it holds everything together.

---

the screenshot buffer

microlink was taking the screenshot too early. some sites load fast enough, but anything with javascript rendering would come out half-built. spinners, blank sections, layouts that hadn’t collapsed yet.

added waitFor=2500 to the microlink request. it waits 2.5 seconds after the page loads before grabbing the screenshot. costs a bit of latency but the results are actually what the site looks like.

---

skeleton loaders

while the slap is processing there’s nothing to show. before this it was just a blank area and a button that said “slapping…” you had no idea if it was working.

now there are ghost blocks that pulse while it loads. one tall block for where the screenshot will be, then smaller ones for the score, verdict, roast, and fixes. the layout mirrors the real result so when it drops in it doesn’t feel like a jump cut.

it works.

---

what i learned

the shimmer animation is simpler than it looks. it’s one div with a gradient that’s twice the width of the element. background-size: 200% 100% stretches the gradient out. then an animation shifts background-position from 200% 0 to -200% 0, which sweeps the lighter middle band across the div left to right.

no javascript. no opacity toggle. just a moving gradient. the whole thing is one css keyframe and four lines of inline style.

---

what’s next

decent skin and fire skin. the chrome is ready.

decent is a clean modern redesign of the same tool, same data, different presentation. fire is the stardance premium version with motion. that one needs real thought before any code gets written.

---

Tip of the Day

screenshot your site at 375px width before you ship anything. most people will see it on a phone first. if it breaks there, nothing else matters.