Fast abstract ↬

Embedding code examples with third-party scripts typically results in monitoring or cookies. We at all times needed to have a easy web site with a very good UX, so setting cookies for no purpose wasn’t an possibility for us. Now, with Indiepen, we’re proud to introduce a privacy-friendly different.

After we implement web sites at this time, we’re confronted by a variety of issues we have to maintain. Ideally, we wish to have a quick, safe, accessible, and truthful web site. On the identical time, we wish to have an interactive web site with feedback, polls, movies, code examples, and lots of extra.

Along with a buddy, I launched a tech weblog final 12 months and we ran precisely into that concern. We needed to have a easy answer to embedding HTML, CSS, and JavaScript code examples however present options typically embrace monitoring, cookies, a ton of options or unhealthy efficiency. After some analysis, we realized that we needed to construct an alternate.

Let’s take a look:

Indiepen is a privacy-friendly, light-weight, and accessible answer to embed code examples. In reality, we don’t set any cookies or monitoring!

Get Began

Indiepen can preview each web site that follows a quite simple conference. It is advisable to present a web site with the next file construction:

.
├── index.html
├── essential.js
└── types.css

Deploy the code instance together with your favourite internet hosting supplier (e.g. GitHub Pages, Netlify, or Vercel) and duplicate the URL. After that, go to our start page and use the code snippet generator.

The generated code appears like this:

<iframe class="indiepen"
  src="https://indiepen.tech/embed/?url=httpspercent3Apercent2Fpercent2Findiepen.techpercent2Fexamplepercent2F&tab=end result"
  fashion="width: 100%; overflow: hidden; show: block; border: 0;"
  title="Indiepen Embed"
  loading="lazy"
  width="100%"
  peak="450">
</iframe>

Now you can use the code snippet and combine it in your web site. That’s it! You must now see your code instance with an editor to find the code.

Beneath The Hood

It sounds a bit unusual these days however we haven’t used any JavaScript framework like React or Vue.js. It’s pure HTML, CSS and JavaScript with some assist from Lea Verou’s Prism.js for syntax highlighting. These libraries are very useful to implement and preserve complicated internet purposes however in our case, we simply have three information we have to fetch and go onto Prism.js.

Moreover, now we have three buttons within the higher proper nook to swap between the HTML, CSS, and JavaScript views. By introducing a UI framework, we couldn’t ship a light-weight answer with lower than 20 kb in measurement. For us, it was good studying, that UI libraries are vital in our day-to-day enterprise however we must always rigorously take into account them and don’t overlook the great previous vanilla JavaScript.

Extra after bounce! Proceed studying beneath ↓

Remaining Phrases

Indiepen is our first open-source challenge and we’re very excited to share our concepts with you. We might like to get suggestions and have discussions a few truthful internet. Get in contact with me on Twitter or take a look at the challenge on GitHub.

Final however not least, I’d like to say that Indiepen has a restricted scope and we wish to hold it easy by design. If you might want to cope with extra complicated code examples, preprocessors for CSS or JavaScript, otherwise you wish to profit from a platform to share your concepts, then please take into account extra refined options like CodePen or JSFiddle.

Comfortable coding, everybody!

Smashing Editorial(vf, yk, il)

Source link

Translate »