Giter Club home page Giter Club logo

coconut-tutorial's Introduction

Coconut Tutorial

Coconut is a functional programming language written to expand and improve the styling of modern functional programming techniques in Python. This project is the development site for the new tutorial for the Coconut language.

Coconut Language: http://coconut-lang.org/

Contributors: Thomas Dickstein, Nma Mbeledogu, Maya Minier, Anthony Seto, and Parnika Sharma

Live Tutorial Links

The official Coconut tutorial can be found here.

The most recent version of the new Coconut tutorial can be found here.

Architecture

The Coconut tutorial uses simple HTML pages for the written tutorial, formatted through CSS and Javascript. Individual HTML pages were chosen over a styling tool such Sphinx for the ability to fine-tune pages inherent in custom HTML. The embedded interpreter and Gitter chatroom are implemented through Javascript:

Architecture

Prerequisites

  • Git
  • Node, a server environment allowing the website to run the interpreter
  • live-server, an http server to host the website in a local website that automatically updates based on changes made to the code

Installation

Once you've installed the above prerequisites, type the following commands in the command line:

  1. git clone https://github.com/hmcfabfive/coconut-tutorial.git
  2. cd coconut-tutorial
  3. live-server

The command live-server should automatically open the website in your web browser.

Functionality

Rewritten tutorial steps

The Coconut tutorial content was rewritten so first-time users would find it easy to understand. It is split up into different sections and pages that introduce the basics of Coconut to a user before jumping into more complex case studies. The tutorial content is also interactive.

Pagination

Show Solution Dropdowns

The Coconut tutorial contains show solution dropdowns. These are buttons that, when clicked, will reveal either the solution to a problem or a hint pertaining to the solution.

Show Solution Dropdowns

Menu

The menu page contains links to the main sections of the tutorial and other Coconut resources such as the Coconut Github page and the Coconut documentation.

Menu Page

Sidebar Navigation

The sidebar navigation can be revealed by clicking the tribar symbol in the upper left corner of the tutorial pages. It allows a user to see an overview of the Coconut tutorial on any page and easily move through the tutorial’s sections and pages as desired.

SideNav

Embedded Interpreter

The Coconut interpreter created by CS121 Team Panda is embedded into many of the tutorial pages.

Interpreter

Copying Code into the Interpreter

The tutorial contains automatic code loading functionality. Simply double-click on a code snippet, and it will be copied into the interpreter.

Gitter

Gitter is a chatroom service for Github users. Coconut has a Gitter chatroom that gives Coconut users a way to talk to Evan Hubinger, Coconut's creator, directly. The chatroom can be accessed by clicking the tab at the bottom right of the page.

Gitter

Branch Guide

master

The master branch contains the most recently updated files pertaining to the tutorial's web interface. These are the HTML files for the tutorial pages, the CSS styling files for the website and for functional elements of the tutorial, and the Javascript files that help run additional functionality in the tutorial website.

gh-pages

This branch is where the files for the live version of the new Coconut tutorial reside. It is similar to the master branch, however it is updated less often and only when major changes to the interface have been polished and finalized.

tutorials

This branch is devoted to the content of the tutorial. It contains Markdown files with final written versions of the tutorial content.

firstdrafts

This branch contains Markdown files with drafts of the written tutorial content. The tutorials in this branch are incomplete or in need of peer-review. Once these steps have been taken, the content is moved to the tutorials branch.

Issues

See Issues for more information.

Known Problems

  • Code snippets require double click to load instead of a single click

References and Acknowledgements

The embedded Coconut Interpreter is one of the most significant contributions to this project. It was created by CS 121 Team Panda. The link to the interpreter's project pages can be found here.

For more Coconut resources, see the following:
Coconut Github
Coconut Documentation
Coconut Gitter

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

coconut-tutorial's People

Contributors

etsoh avatar minierm97 avatar nma-m avatar psharma16 avatar tdicksteinpomona avatar thomasyoungson avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.