Tag: Prefill

Lazy Loaded Prefill Embeds

Lemme sum this up:

  • CodePen has Embedded Pens. Build a Pen on CodePen, embed it on any other site.
  • We also offer Prefill Embeds, which remove that first step. With Prefill Embeds, the Pen doesn’t need to exist on CodePen at all. You pass in the code and settings you want to appear in the embed via code blocks sitting on the page (progressive enhancement!). Now that code can live in your Git repo or database, which might offer a more desirable level of control.
  • Stephen Shaw details how these Prefill Embeds can be created on-demand through user interaction (e.g. click a “Run this code” button) so they are only there when a user wants to see them. This is a super lightweight way to add optional interactivity to any blog post or documentation.

I’ll put an example right here in this blog post:

<h1>Hello from HTML</h1>
html {   background: black;   color: white;   text-align: center; }  h1::after {   content: " / CSS!"; }
document.querySelector("h1").innerText += " / JavaScript";

All that code lives right here in this blog post, and the Embedded Pen iframe doesn’t load until you click to load it, which you might do if you’re interested in seeing that code run.

Direct Link to ArticlePermalink


The post Lazy Loaded Prefill Embeds appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,

New CodePen Feature: Prefill Embeds

I’ve very excited to have this feature released for CodePen. It’s very progressive enhancement friendly in the sense that you can take any <pre> block of HTML, CSS, and JavaScript (or any combination of them) and enhance it into an embed, meaning you can see the rendered output. It also lets you pass in stuff like external resources, making it a great choice for, say, documentation sites or the like.

Here’s an example right here:

<div id="root"></div>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body {   margin: 0;   font-family: Montserrat, sans-serif; } header {   background: #7B1FA2;   color: white;   padding: 2rem;   font-weight: bold;   font-size: 125% }
class NavBar extends React.Component {   render() {     return(       <header>         Hello World, {this.props.name}!       </header>     );   } } ReactDOM.render(   <NavBar name="Chris" />,   document.getElementById('root') );

What you can’t see is is this block, appended to the embed snippet:

<pre data-lang="html">&lt;div id="root">&lt;/div></pre> <pre data-lang="scss" >@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body {   margin: 0;   font-family: Montserrat, sans-serif; } header {   background: #7B1FA2;   color: white;   padding: 2rem;   font-weight: bold;   font-size: 125% }</pre>   <pre data-lang="babel">class NavBar extends React.Component {   render() {     return(       &lt;header>         Hello World, {this.props.name}!       &lt;/header>     );   } } ReactDOM.render(   &lt;NavBar name="Chris" />,   document.getElementById('root') );</pre>

If I want to update that demo, I can do it by editing this blog post. No need to head back to CodePen. 🙌

Direct Link to ArticlePermalink

The post New CodePen Feature: Prefill Embeds appeared first on CSS-Tricks.

CSS-Tricks

, , ,
[Top]