[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"\u002Farticles\u002Fyaps-yet-another-placeholder-service":3},{"id":4,"title":5,"body":6,"createdAt":175,"description":176,"extension":177,"meta":178,"navigation":179,"path":180,"rawbody":181,"seo":182,"stem":183,"__hash__":184},"articles\u002Farticles\u002Fyaps-yet-another-placeholder-service.md","YAPS (Yet Another Placeholder Service)",{"type":7,"value":8,"toc":164},"minimark",[9,24,27,57,62,69,73,78,83,89,95,99,105,109,113,118,124,128,132,135,141,145,151,155,157],[10,11,12,16,17],"p",{},[13,14,15],"strong",{},"TLDR:"," I made a placeholder image service called YAPS that returns placeholder SVGS. ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fyaps.dev",[22],"nofollow","Check it out!",[25,26],"hr",{},[10,28,29,30,35,36,35,41,46,47,56],{},"I always find myself needing placeholder images whether it's building a page or an entire new site. Over the years, there have been ",[18,31,34],{"href":32,"rel":33},"https:\u002F\u002Fplaceholder.com",[22],"plenty"," ",[18,37,40],{"href":38,"rel":39},"https:\u002F\u002Fplacekitten.com",[22],"of",[18,42,45],{"href":43,"rel":44},"https:\u002F\u002Fsatyr.dev",[22],"options"," but they always fell short for me. They either were slow, not professional or would randomly go down. So I scratched my own itch, and built my own. It's called ",[18,48,50,51,55],{"href":20,"rel":49},[22],"YAPs (or ",[52,53,54],"em",{},"Yet Another Placeholder Service",")"," and it's really fast, very flexible and because I rely on it near daily: always up. My absolute favorite feature is defining dimensions via aspect ratio. Read on for how it works and to see example uses.",[58,59,61],"h2",{"id":60},"how-it-works","How it works",[10,63,64,65,68],{},"It's a very simple service. Through URL segments, you can define the dimensions and colors. Dimensions can be provided as just the width for squares, a width and height, or a width and aspect ratio for an unknown height. Colors can be provided as background only or background and foreground. The forgeground consists of the dimensions for easy reference. The service uses these segments to create an SVG. It's ",[52,66,67],{},"fast",".",[58,70,72],{"id":71},"examples","Examples",[10,74,75],{},[52,76,77],{},"Please note the rounded corners in the examples below are from my own site's styling and not the placeholder image itself.",[79,80,82],"h3",{"id":81},"width-only","Width only",[10,84,85],{},[18,86,87],{"href":87,"rel":88},"https:\u002F\u002Fyaps.dev\u002F300",[22],[10,90,91],{},[92,93],"img",{"alt":94,"src":87},"",[79,96,98],{"id":97},"width-and-height","Width and height",[10,100,101],{},[18,102,103],{"href":103,"rel":104},"https:\u002F\u002Fyaps.dev\u002F300x500",[22],[10,106,107],{},[92,108],{"alt":94,"src":103},[79,110,112],{"id":111},"width-and-height-via-aspect-ratio","Width and height via aspect ratio",[10,114,115],{},[52,116,117],{},"This is by far my favorite feature.",[10,119,120],{},[18,121,122],{"href":122,"rel":123},"https:\u002F\u002Fyaps.dev\u002F300x16:9",[22],[10,125,126],{},[92,127],{"alt":94,"src":122},[79,129,131],{"id":130},"colors","Colors",[10,133,134],{},"Colors are formatted as background-foreground. Only background is required.",[10,136,137],{},[18,138,139],{"href":139,"rel":140},"https:\u002F\u002Fyaps.dev\u002F300x500\u002F000",[22],[10,142,143],{},[92,144],{"alt":94,"src":139},[10,146,147],{},[18,148,149],{"href":149,"rel":150},"https:\u002F\u002Fyaps.dev\u002F300\u002F000-fff",[22],[10,152,153],{},[92,154],{"alt":94,"src":149},[25,156],{},[10,158,159,160],{},"And that's it. I still plan on making a nice landing\u002Fdocumentation page for it, but it's fine for now. Please ",[18,161,163],{"href":20,"rel":162},[22],"check it out!",{"title":94,"searchDepth":165,"depth":165,"links":166},2,[167,168],{"id":60,"depth":165,"text":61},{"id":71,"depth":165,"text":72,"children":169},[170,172,173,174],{"id":81,"depth":171,"text":82},3,{"id":97,"depth":171,"text":98},{"id":111,"depth":171,"text":112},{"id":130,"depth":171,"text":131},"2021\u002F02\u002F03","TLDR: I made a placeholder image service called YAPS that returns placeholder SVGS. Check it out!","md",{},true,"\u002Farticles\u002Fyaps-yet-another-placeholder-service","---\ntitle: YAPS (Yet Another Placeholder Service)\ncreatedAt: 2021\u002F02\u002F03\n---\n**TLDR:** I made a placeholder image service called YAPS that returns placeholder SVGS. [Check it out!](https:\u002F\u002Fyaps.dev)\n\n***\n\nI always find myself needing placeholder images whether it's building a page or an entire new site. Over the years, there have been [plenty](https:\u002F\u002Fplaceholder.com) [of](https:\u002F\u002Fplacekitten.com) [options](https:\u002F\u002Fsatyr.dev) but they always fell short for me. They either were slow, not professional or would randomly go down. So I scratched my own itch, and built my own. It's called [YAPs (or *Yet Another Placeholder Service*)](https:\u002F\u002Fyaps.dev) and it's really fast, very flexible and because I rely on it near daily: always up. My absolute favorite feature is defining dimensions via aspect ratio. Read on for how it works and to see example uses.\n\n## How it works\nIt's a very simple service. Through URL segments, you can define the dimensions and colors. Dimensions can be provided as just the width for squares, a width and height, or a width and aspect ratio for an unknown height. Colors can be provided as background only or background and foreground. The forgeground consists of the dimensions for easy reference. The service uses these segments to create an SVG. It's *fast*.\n\n## Examples\n*Please note the rounded corners in the examples below are from my own site's styling and not the placeholder image itself.*\n\n### Width only\nhttps:\u002F\u002Fyaps.dev\u002F300\n\n![](https:\u002F\u002Fyaps.dev\u002F300)\n\n### Width and height\n\nhttps:\u002F\u002Fyaps.dev\u002F300x500\n\n![](https:\u002F\u002Fyaps.dev\u002F300x500)\n\n### Width and height via aspect ratio\n*This is by far my favorite feature.*\n\nhttps:\u002F\u002Fyaps.dev\u002F300x16:9\n\n![](https:\u002F\u002Fyaps.dev\u002F300x16:9)\n\n### Colors\nColors are formatted as background-foreground. Only background is required.\n\nhttps:\u002F\u002Fyaps.dev\u002F300x500\u002F000\n\n![](https:\u002F\u002Fyaps.dev\u002F300x500\u002F000)\n\nhttps:\u002F\u002Fyaps.dev\u002F300\u002F000-fff\n\n![](https:\u002F\u002Fyaps.dev\u002F300\u002F000-fff)\n\n***\n\nAnd that's it. I still plan on making a nice landing\u002Fdocumentation page for it, but it's fine for now. Please [check it out!](https:\u002F\u002Fyaps.dev)\n",{"title":5,"description":176},"articles\u002Fyaps-yet-another-placeholder-service","b3VWB4pwUPVWSARIr9yvGojdL2HbQgVnUrRr6xsZmwg",1794024371781]