All Projects → oliyh → Re Learn

oliyh / Re Learn

A library for integrating tutorials into your re-frame/reagent application

Programming Languages

clojure
4091 projects
clojurescript
191 projects

Projects that are alternatives of or similar to Re Learn

Re Frame
A ClojureScript framework for building user interfaces, leveraging React
Stars: ✭ 4,980 (+3701.53%)
Mutual labels:  reagent, spa
Roastandbrew
Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book
Stars: ✭ 300 (+129.01%)
Mutual labels:  tutorial, spa
Waveforms
An interactive, explorable explanation about the peculiar magic of sound waves.
Stars: ✭ 1,218 (+829.77%)
Mutual labels:  tutorial, lesson
React From Zero
A simple (99% ES2015 less) tutorial for React
Stars: ✭ 4,638 (+3440.46%)
Mutual labels:  tutorial, lesson
Godot tutorials
Code and examples for KidsCanCode Godot Tutorials.
Stars: ✭ 119 (-9.16%)
Mutual labels:  tutorial, lesson
R Novice Gapminder
R for Reproducible Scientific Analysis
Stars: ✭ 127 (-3.05%)
Mutual labels:  lesson
Llvm Sanitizer Tutorial
An LLVM sanitizer tutorial
Stars: ✭ 130 (-0.76%)
Mutual labels:  tutorial
Short Gitlab Tutorial
Get started with Gitlab in practicable time
Stars: ✭ 127 (-3.05%)
Mutual labels:  tutorial
Node In Action
📕 一本小书 -《Node.js实战》
Stars: ✭ 126 (-3.82%)
Mutual labels:  tutorial
Vulkantutorial
Tutorial for the Vulkan graphics and compute API
Stars: ✭ 1,962 (+1397.71%)
Mutual labels:  tutorial
Slides
Slides + What can I do after taking Lesson 1? Lesson 2? ... etc
Stars: ✭ 129 (-1.53%)
Mutual labels:  lesson
Docker Jenkins Django Tutorial
實戰 Docker + Jenkins + Django + Postgres 📝
Stars: ✭ 129 (-1.53%)
Mutual labels:  tutorial
Simple Signup
Code samples used in the blog post "How to Create User Sign Up View"
Stars: ✭ 128 (-2.29%)
Mutual labels:  tutorial
Sunengine
SunEngine – site engine with blog, forum and articles sections features support.
Stars: ✭ 130 (-0.76%)
Mutual labels:  spa
Tensorflow Ctc Speech Recognition
Application of Connectionist Temporal Classification (CTC) for Speech Recognition (Tensorflow 1.0 but compatible with 2.0).
Stars: ✭ 127 (-3.05%)
Mutual labels:  tutorial
Spasm
Write single page applications in D that compile to webassembly
Stars: ✭ 129 (-1.53%)
Mutual labels:  spa
Svelte Navigator
Simple, accessible routing for Svelte
Stars: ✭ 125 (-4.58%)
Mutual labels:  spa
Cosin
Android loading view library 📊🍭
Stars: ✭ 129 (-1.53%)
Mutual labels:  tutorial
Miniswarm
Docker Swarm cluster in one command
Stars: ✭ 130 (-0.76%)
Mutual labels:  tutorial
Vue Tutorial
A walkthrough of basic Vue concepts.
Stars: ✭ 130 (-0.76%)
Mutual labels:  tutorial

re-learn

Learn them good

Data-driven tutorials for reagent components with no changes required to your dom.

Live demo at https://oliyh.github.io/re-learn/.

Why?

Well-designed UIs are intuitive but even the best may need to introduce new features or train new users. Descriptions should be close to the element they are describing, both on screen and in your code.

Existing tutorial solutions rely on hooks into and mutation of your dom which does not work with React. Defining lessons separately from your code makes them subject to rot as behaviour changes and documentation is not updated.

re-learn allows you to describe lessons for your UI elements with data and generates walk-throughs for your users. It does not mutate your dom, making it React-friendly, and by writing the lesson write next to the code it describes you stand a better chance of keeping it up-to-date.

Versioning allows you to update descriptions when behaviour changes or is enhanced, ensuring that all your users are kept up-to-date with all the awesome features you're adding to your application.

Usage

Add re-learn to your project's dependencies: Clojars Project

Annotate reagent components with lessons describing the component and how to use it:

(require [re-learn.core :as re-learn]
         [re-learn.views :as re-learn-views])

(def purchase-button
  (re-learn/with-lesson
    {:id          :purchase-button-lesson
     :description "When you're ready, click here to purchase"
     :position    :bottom                  ;; optional, defaults to :right. values are :left, :right, :bottom, :top, :unattached, :bottom-left etc
     :version     2                        ;; optional, defaults to 1
     :attach      [:button#some-id]        ;; optional, position lesson relative to a dommy selector, see https://github.com/plumatic/dommy for use
     :continue    {:event :click           ;; optional, continue when this event occurs
                   :selector [:table :.tr]
                   :event-filter (fn [e] ...)}}

    (fn [] [:button.mdl-button.mdl-button--raised "Purchase"])))

Combine lessons into tutorials and attach them to views:

(def checkout
  (re-learn/with-tutorial
    {:id           :checkout-tutorial
     :name         "The checkout"
     :description  "Review your basket, check the price and confirm your purchase"
     :precedence   1 ;; optional, allows some tutorials to take precedence over others
     :auto-accept? false ;; optional, defaults to false
                         ;; when true will start the tutorial immediately when this component is rendered
                         ;; when false will display a snackbar indicating that a tutorial is available
     :lessons [{:id          :welcome-lesson ;; this is an inline lesson, not attached to anything
                :description "Welcome to the re-learn example"}
               basket
               totals
               purchase-button]}

    (fn [app-state]
      [:div
       [basket app-state]
       [purchase-button]])))

Let re-learn take care of everything else!

(defn- init []
  (let [app-root (js/document.getElementById "app")
        tutorial-root (js/document.getElementById "tutorial")
        app-state (fn [] ...)
    (reagent/render [checkout app-state] app-root)
    (reagent/render [re-learn-views/tutorial-view {:context? true}] tutorial-root)))

Look at the working examples for more details.

Style

re-learn has simple and structured markup making it easy for you to apply your own styles. To get started it's easiest to copy the reference version into your own project and adapt it as you wish.

Development

user> (dev)
dev> (start)
;; visit http://localhost:3449
dev> (cljs)
cljs.user>

CircleCI

License

Copyright © 2016 oliyh

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].