Codesplay | Showcase your codes banner

Codesplay | Showcase your codes

Created by: Ahnaf
6 devlogs
7h 21m 25s

Codesplay is a simple site that lets developers instantly turn raw code into clean, shareable snippets. Paste your code, pick a language, and get an image or embed code in your site.
Why use Codesplay?

  • Works on pure HTML, CSS, JS.
  • No APIs …

Codesplay is a simple site that lets developers instantly turn raw code into clean, shareable snippets. Paste your code, pick a language, and get an image or embed code in your site.
Why use Codesplay?

  • Works on pure HTML, CSS, JS.
  • No APIs is required.
  • Completely free to use, no sign ups like other sites.
  • Generates beautiful image snippets of your code at any dimension.

How was it optimized?

  1. Loading=“lazy” in the embed code of the snippet.
  • Basically telling the browser to wait until the users have scrolled to a data.
  1. Uses base64 encoding for self contained data URI.
  • So there won’t be any need for extra backend and site’s domain dependency.
  1. Uses SVG is mutiple places.
  • SVG has much smaller file size and faster loading.
This project uses AI

Claude used for JS library integrations and debugging.
Kilo Code used coding a base64 encoding for the embed.

Demo Repository

README

Loading README...
Ahnaf
Ahnaf shipped Codesplay | Showcase your codes
3 days ago

Shipped this project!

Hours: 7.36
Cookies: 🍪 193
Multiplier: 21.88 cookies/hr

PLEASE READ: Many people might question the usability of this, and why it is efficient if the whole code is present as base64 encoded format in the embed itself?

  • Well, many tech sites use these embeds for showcasing command lines and short lines of codes for various languages and purposes, and most snippet makers require api and sign up but Codesplay does not require these.
  • And if you think having all the raw codes (in base64) in the embeds kill its main purpose of being compact, people mostly use snippet for about 4-15 lines of code on average. And the plus point is its all local and less chance to be messed up if API is on downtime.
Ahnaf
Ahnaf worked on Codesplay | Showcase your codes
3 days ago
0h 48m logged

Last and final devlog, everything was checked properly for proper functioning and the project comes to an end. I hope it help others in the way it is intended to use. For this final update, after quite lots of prompt I used Kilo to encode the embed codes in base64 since it was way too complex and I added image downloads using html2canvas lib . (btw the horizontal slider/scroller wont appear in embed or images of the snippet.)

Attachment
0
Ahnaf
Ahnaf worked on Codesplay | Showcase your codes
4 days ago
0h 17m logged

Easy peasy work, just had to take the vscode snippet, remove some parts, redesign into a simpler header for it, forgot to add the copy code button lol, gonna wake up tmrw and do that.
And not only that, snippet image download buttons and embed copy must be added too, So I have reserved some space below each snippet.

Attachment
0
Ahnaf
Ahnaf worked on Codesplay | Showcase your codes
4 days ago
0h 54m logged

Perfected the vscode snippet, after lots of experimenting, and here it is. The next snippet will be based on Mac window, basically the default look of most snippets. I’m still trying to brainstorm other snippet ideas. So please let me know in the comments if you have your idea.
What was added in this update:

  • A copy button
  • A vscode replica footer
Attachment
0
Ahnaf
Ahnaf worked on Codesplay | Showcase your codes
6 days ago
2h 5m logged

Just added the vscode snippet, I tried to make it as good as possible but well we cant just copy the whole ide design lol. So, I added a way to resize the snippet in both x and y axis, so that you can get an appropriate image if you are downloading the snippet. I have also added vscode lookalike syntax highlighting based on the new vscode theme.
On the next update ill be adding a Mac window snippet, if you guys have more idea for snippet themes, please let me know in the comments…

Attachment
0
Ahnaf
Ahnaf worked on Codesplay | Showcase your codes
7 days ago
1h 21m logged

I almost gave up trying to hackatime, cuz on my ancient win 7 32 bit pc (my parents locked up my laptop), basically no modern apps work 😭, finally I found some site that gives a cloud VS Code IDE and then I was able to get wakatime to work. I have added some small updates after minutes and minutes of experimenting with best css styles that I can make. The key things done are:

  • Added a font adjustment slider.
  • Added snippet title textbox.
  • Added language slider.
  • Shifted the input window to the left.
Attachment
0
Ahnaf
Ahnaf worked on Codesplay | Showcase your codes
8 days ago
1h 55m logged

After thinking and changing lots of styles, I concluded to go with Apple’s glassmorphism style for the UI, At first I added a Mac inspired window title bar. And then for the area to enter the code, I have added glassy feel to the background. For now I just made the input area, and will make the output area similar to it on the left with buttons for copy and download. In the update, I will be adding the option to scale the font and choose a language so that the parts of the codes make sense.

Attachment
0