Cookieless Different To Embed HTML, CSS And JS Code Snippets

No Comments

Once we implement web sites in the present day, 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 similar time, we wish to have an interactive web site with feedback, polls, movies, code examples, and plenty of extra.

Along with a pal, I launched a tech weblog final yr and we ran precisely into that challenge. We wished to have a easy answer to embedding HTML, CSS, and JavaScript code examples however current options typically embody monitoring, cookies, a ton of options or unhealthy efficiency. After some analysis, we realized that we needed to construct another.

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’s essential present a web site with the next file construction:

.
├── index.html
├── most important.js
└── kinds.css

Deploy the code instance along with your favourite internet hosting supplier (e.g. GitHub Pages, Netlify, or Vercel) and duplicate the URL. After that, go to our begin web 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”
model=”width: 100%; overflow: hidden; show: block; border: 0;”
title=”Indiepen Embed”
loading=”lazy”
width=”100%”
top=”450″>
</iframe>

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

Below 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 keep complicated internet functions however in our case, we simply have three recordsdata we have to fetch and go onto Prism.js.

Moreover, we’ve three buttons within the higher proper nook to change 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 dimension. For us, it was good studying, that UI libraries are necessary in our day-to-day enterprise however we should always fastidiously contemplate them and don’t neglect the great previous vanilla JavaScript.

Remaining Phrases

Indiepen is our first open-source challenge and we’re very excited to share our concepts with you. We’d like to get suggestions and have discussions a couple of 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 preserve it easy by design. If it’s good to take care of extra complicated code examples, preprocessors for CSS or JavaScript, otherwise you wish to profit from a platform to share your concepts, then please contemplate extra refined options like CodePen or JSFiddle.

Completely satisfied coding, everybody!

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment