A new way of blogging about HTML and CSS
source link: https://blog.klipse.tech/clojure/2020/09/10/new-way-html-css.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A new way of blogging about HTML and CSS
Sep 10, 2020 • Yehonathan Sharvit
Imagine you want to write a blog post that shows something really cool about html and css.
How would you do that? You will probably embed a jsfiddle, jsbin or codepen in your page. The problem is that for each snippet you have to create a page on their server and embed an iframe in your page.
Today, we are going to show a new way of blogging about html and css in a much more lighweight way: we are going to have our html and css code in our page and use the Klipse plugin to transform the code into an interactive code snippet.
Hello World
First, let’s have an interactive html “Hello World”:
<div> Hello <b> World</b> </div>
An image:
xxxxxxxxxx
<p> I have invented HTML </p>
<img src="/assets/tim.jpg" width="300">
I have invented HTML
Go ahead, play with the code: it is re-rendered as you type…
And you can even add css using the <style> tag:
xxxxxxxxxx
<style>
#lea {display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 5px 5px black;
padding: 5px;
transition: 0.3s;
}
#lea:hover {box-shadow: 0 0 5px 5px green;
}
</style>
<div> I am a CSS Guru. </div>
<div> If you hover on my picture, the shadow will change...</div>
<img id="lea" src="/assets/lea.jpg" width="300">
It becomes really cool when you start to play with SVG.
Like this:
xxxxxxxxxx
<svg width="100%" height="400" viewBox="0 0 300 200">
<path d="M3.9,74.8c0,0,0-106.4,75.5-42.6S271.8,184,252.9,106.9s-47.4-130.9-58.2-92s59.8,111.2-32.9,126.1 S5.9,138.6,3.9,90z"
fill="none" id="theMotionPath" stroke="brown"/>
<g stroke-width="2" stroke="black" fill="white">
<circle r="20"/>
<circle r="2" cx="-7" cy="-5"/>
<circle r="2" cx="7" cy="-5"/>
<path d="M -10 5 Q 0 15 10 5"/>
<animateMotion dur="4s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</g>
</svg>
or like that:
xxxxxxxxxx
<svg width="100%" height="300">
<g stroke-width="5" stroke="lightgreen" fill="none"
transform="translate(150,100) scale(3)"
style="stroke-dasharray: 3; animation: dash-spin 5s linear infinite;">
<circle r="20"/>
<circle r="2" cx="-7" cy="-5"/>
<circle r="2" cx="7" cy="-5"/>
<path d="M -10 5 Q 0 15 10 5"/>
<text x="0" y="35" font-family="Verdana" font-size="30" text-anchor="middle"
fill="red" stroke="blue" stroke-width="2">
Klipse
</text>
</g>
</svg>
<style>@keyframes dash-spin { to { stroke-dashoffset: 100; } }</style></svg>
The Grand Finale
And now for the Grand Finale, a universal Klipse machine: an Html Klipse snippet of an iframe of a document that includes Klipse JavaScript tag and a Javascript and an HTML Klipse snippet:
xxxxxxxxxx
<iframe style="overflow: scroll;" height="450" width="500"
srcdoc="
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' type='text/css' href='https://storage.googleapis.com/app.klipse.tech/css/codemirror.css'>
</head>
<h2> A JavaScript interactive snippet:</h2>
<div class='js'>[1, 2, 3].map((x) => x + 1)</div>
<h2> An html interactive snippet (this one is completly crazy - don't look at the source):</h2>
<div class='html'><div> Hello <b> World</b> </div></div>
<script>
window.klipse_settings = { selector: '.klipse',
selector_eval_js: '.js',
selector_eval_html: '.html'
};
</script>
<script src='https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js'></script>
"></iframe>
One last thing: the Klipse plugin supports a couple of languages: javascript, jsx, es2017, python, ruby, clojure and even brainfuck.
Give us a star on github if you like this stuff and leave us a comment below to tell you what you think about this new way of blogging….
Big thanks to Timothy Pratley for the cool svg examples and the incredible Klipse inside Klipse snippet.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK