yetanother-blog/indiepen

An independent and privacy-friendly solution to embed HTML, CSS and JS code examples

Indiepen 📝

   

An independent and privacy-friendly solution to present your HTML, CSS and JS code example to the people.

👉 Get started

Features 🤩

• Fun: Embed your HTML, CSS and JS code examples with ease
• Fair: No cookies, no tracking, no external requests
• Fast: Small footprint with less than 20 KB
• Inclusive: Features built for everyone
• Transparent: Open-source software

Contributing 🤓

Did you find a bug? Do you have an idea to make Indiepen better? Cool, we would love to see your contribution. Feel free to create an issue or open a pull request. We wrote a small guide, so it's easier for you to work on the project.

License 👩‍⚖️

Just a simple MIT license. 🤷

indiepen's Issues

Open in a new tab

Would be cool to have a link somewhere in the embed to open the example in a new tab.

Link indiepen logo in the embed

Would be cool to set a link to indiepen.tech. 😇

Social image

We should have a cool social image for Twitter cards, so it makes fun to share our website.

Add plausible to startpage

Just add the snippet to the startpage.

Clean up startpage

• Clean up meta tags
• Clean up the text
• Add profile image for Henrik

Option to preselect a tab

We would like to have a query parameter to preselect a tab. Right now we always select the HTML tab by default.

We want a fancy example for the startpage

• something funny ;)

I put that on hold because I need to fill up my creative mind-fuel for that one 😅

We need a domain

We want to buy a domain for the project.

• We purchase the domain at name.com
• We set the domain in Netlify

CI/CD Pipeline

• ci github action for pull requests
• cd with netlify (bootstrap netlify)
• we get rid of yarn
• integrate depfu
• use typescript for cypress
• integrate deployment slack notification in netlify run
• think about linter

Depfu Error: No dependency files found

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (yetanother-blog/indiepen) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

---

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

Register our website (Google Webmaster Tools etc.)

Just the normal dance. We should register our website so people can find it.

• Google
• Bing
• Yandex

Minify code

I enabled snowpack's bundle optimization and I could decrease the resource size a lot. Problem was, that we also minified the example project, which we don't want. So far, I couldn't find an easy solution to ignore/exclude the example folder.

In any case, would be cool to introduce some form of optimization.

Extend form to support tab preselection

We want to have a dropdown in the form to select the tab we want to preselect initially.

We need a friendly README

• screenshot (or gif) of our indiepen embed tool
• introduction (ideally we just copy the stuff from startpage)
• emojis emojis emojis
• License
• contributors / how to contribute

Close RESULT

Hi,

on pages with small content area, the code is not really visible. You have to scroll sideways on order to see something. It would be nice to have the possibility to hide the result completely.

Greets
Kristof

Get rid of Google Fonts on the website

We don't want to use Google Fonts on the website, because we don't want to expose data to Google. Sadly, Snowpack is not really good at handling fontsource fonts, so we need to see how we can import the fonts with the least amount of effort.

We want a startpage

• hero unit to demo indiepen / why indiepen?
• get started with our three (?) steps -> provide static code, paste the URL, get the snippet
• about: twitter links and link to our blog

We need a blogpost

• what's our motivation?
• we love codepen, but it's not privacy friendly
• that's why we created indiepen
• introduction indiepen
• hey codepen, why no doing it right
• because we don't want to maintain indiepen

Release plan

• Research: Which newsletter/blog could be interesting for the release?
• Email template or DM template

Not independent?

It says it's independent. When using the code generator it's like below:

<iframe class="indiepen" src="https://indiepen.tech/embed/?url=https%3A%2F%2Fexample.com%2Fasdasdsa&tab=html" style="width: 100%; overflow: hidden; display: block; border: 0;" title="Indiepen Embed" loading="lazy" width="100%" height="450"></iframe>

You use https://indiepen.tech. So if you suddenly don't want to maintain it anymore and remove the domain you will kill all the projects that depends on it in an instance.

Also you may add a purchase subscription because this way you really lock people in with a dependency that should not really be needed.

Handle 404 errors in embed

I think we should improve our error handling in the embed. I see two potential errors:

1. You didn't provide a URL: Maybe we can ignore that, because we just implement a happy path for now.
2. You didn't provide all three assets (HTML, CSS, JS): I think this is a totally valid use case and we should provide something like "No CSS here 🤷‍♀️". So far we get the error: Error 404 while fetching file: Not Found. Not very nice.

What do you think?

Embed styling

• as seen on figma ;)