DataCamp Light
Roadmap |
Docs
Table of Contents
- [Features](#features)
- [How to run the app](#how-to-run-the-app)
- [Writing the HTML block](#writing-the-html-block)
* [Pre-Exercise Code](#pre-exercise-code)
* [Sample Code](#sample-code)
* [Solution](#solution)
* [Submission Correctness Test (SCT)](#submission-correctness-test-sct)
* [Hint](#hint)
* [Other Options](#other-options)
- [How does it work?](#how-does-it-work)
- [Contributing](#contributing)
* [Dependencies](#dependencies)
* [Testing](#testing)
+ [Run tests](#run-tests)
+ [Reducers](#reducers)
+ [Components](#components)
+ [Middleware](#middleware)
* [DevOps](#devops)
+ [Formatting with Prettier](#formatting-with-prettier)
+ [Code Quality: ESLint, TSLint, Stylelint](#code-quality-eslint-tslint-stylelint)
+ [Commit Messages](#commit-messages)
+ [Continuous Integration](#continuous-integration)
+ [Packages used that you might want to know about](#packages-used-that-you-might-want-to-know-about)
--------------------------------------------------------------------------------
## Features
* Convert any website or blog to an interactive learning platform.
* Works for both R and Python. Sessions are maintained on DataCamp's servers.
* Convert existing markdown documents to an interactive course using [the
tutorial package](https://github.com/datacamp/tutorial).
* Check out a [demo R and Python
example](https://cdn.datacamp.com/dcl-react/standalone-example.html).
* Leverage the same Submission Correctness Tests (SCT) DataCamp uses for all
their courses. For R, there's the
[testwhat](https://github.com/datacamp/testwhat) ([GitHub
wiki](https://github.com/datacamp/testwhat/wiki)); for Python, there's
[pythonwhat](https://github.com/datacamp/pythonwhat) ([GitHub
wiki](https://github.com/datacamp/pythonwhat/wiki)).
## How to run the app
Add the script to your HTML page (there is an example in
`examples/standalone-example.html`):
```html
```
That's it! If your app adds DataCamp Light exercises after the initial page load
(for example, in React apps), call the following function to initialize those
new exercises:
```js
initAddedDCLightExercises();
```
**You can also use the JavaScript library in a stackoverflow.com answer by
including the exercise and script tag as a snippet.**
## Writing the HTML block
After including the JavaScript library, you can start writing HTML blocks in the
format below. These will be dynamically converted to exercises.
```html
```
As we can see in the example, the whole exercise is contained in a single
`
```
…
```
css
[data-datacamp-exercise] {
visibility: hidden;
}
```
…
```
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
```
### Dependencies
The `vendor/` folder includes minified code of some internal DataCamp packages
that are not hosted publicly right now.
### Testing
Please read these two documents before starting to implement any tests:
- [Writing tests in redux](http://redux.js.org/docs/recipes/WritingTests.html)
- [Writing tests for side effects](https://redux-observable.js.org/docs/recipes/WritingTests.html)
Test files are named as `{moduleName}.spec.js`.
#### Run tests
```bash
npm test
```
…
```
https://cdn.datacamp.com/dcl-react-dev.js.gz
```
Next, commits to the [`beta` branch](https://github.com/datacamp/datacamp-light/tree/beta)
push a release to the staging environment:
```
https://cdn.datacamp.com/dcl-react-staging.js.gz
```
Finally, when we create a release, an update is pushed to the production
environment. This should be a stable version of DataCamp Light:
```
https://cdn.datacamp.com/dcl-react.js.gz
```
Commits to this
branch trigger a build that is deployed on the DataCamp Dev environment. Commits
to the main branch, `beta`, are built and deployed to staging. When a release is
created, that build is deployed to production.
#### Packages used that you might want to know about
- [TypeScript](https://www.typescriptlang.org/), of course. Make sure you
install an appropriate plugin for your editor, if it doesn't ship with one.
- [redux-observable](https://github.com/redux-observable/redux-observable/) for observable middleware
- [typescript-fsa](https://github.com/aikoven/typescript-fsa) for easy, type-safe action creators
- [typescript-fsa-reducers](https://github.com/dphilipson/typescript-fsa-reducers) for super-clean reducers