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!
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!