Idyll-lang: Make your app stand out with interactive data-driven stories
Do you know what’s hot right now?
Explorable explanations are data-driven documents which have interactivity. You have seen many EE’s on the web, everyone loves them!
Take this carefully crafted graph for instance.
It’s a well designed graph with animations and it’s very informative.
Explorable explanations make things fun — The way we receive the information is compelling.
We crave new information, especially with great delivery and aesthetics.
Here’s a great article going in more depth on being an active reader, reactive documents and contextual information.
What is idyll?
At its core, Idyll is a markup language. Not just any markup language, Idyll let’s you leverage a modular/component approach like any modern language. Idyll also lets you reuse third party packages (npm) and can be combined optionally with React.
The traditional end-to-end procedure for Idyll;
- You initialize a standalone project per document.
- You write code for the formula, graph, chart, etc.
- Once finished, you publish/deploy the document and embed it to your website/SPA.
Idyll is great at creating charts with 5 lines of code.
Look how smooth that rendering is. Let’s give Idyll a go, here’s the browser editor.
Write some basic markup as usual. At it’s surface it looks like regular markup.
Here’s where it gets cool. We can use components, variables and math equations inside our markup.
Let’s spin up a pie chart.
Notice the logic and the components are inside the bracket syntax
Sweet! Idyll has built-in components which we can reuse. In case you’re curious, the properties you can pass to the chart component are the following.
Idyll uses KaTeX to typeset mathematical equations.
Content inside of a
fixed component will be locked in place, even when the rest of the document scrolls. The scroll example uses the
fixed component to keep the dynamic chart in place:
List of all built-in components.
Getting started with Idyll
Using d3 with Idyll
Using Idyll with NPM
Idyll is one way to make your app stand out. Now go out there and build something awesome!
You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…medium.freecodecamp.org
Separating your frontend and backend has many advantages:medium.freecodecamp.org
What is a rich text editor anyway?codeburst.io
The latest Tweets from Indrek Lasn (@lasnindrek). Author, software engineer, founder. Spread the love ❤. Zurich…twitter.com
Thanks for reading! ❤