esfiddle / esfiddle

The Home of ESFiddle.net - now Back in Active Development! Open source, first timer contributions welcome - please see the issues tab

ESFiddle

Try out the latest ES6+ features right in your browser.

See it online here.

Getting Started

This guide assumes you already have MongoDB and NodeJS installed. Click here for instructions on how to install MongoDB and NodeJS

Clone the repository

# Get the latest version
git clone [email protected]:esfiddle/esfiddle.git

# Change directory
cd esfiddle

# Update the PRIVATE section in sample.env file. 
# Replace the text 'keyboard-cat' set for SESSION_SECRET to a value generated from the following site:

RANDOM.ORG

# rename the sample.env file to '.env'
cp sample.env ./.env

# Open a new terminal window and start MongoDB
mongod --dbpath path/to/your/db/folder

# Install the dependencies
npm i

# Start the application
npm start

Found a bug?

Read the Help I've Found a Bug article and follow its instructions.

Want to know what we are working on?

Check out our vision.

Contributing

We welcome pull requests from first-timers and seasoned veteran programmers alike. Follow the steps above to get setup.

In addition to this we are looking for maintainers. Please come and chat with us in our gitter if you are interested.

Please first review the Code of Conduct and the Contributing guide to help you get setup. Our Style Guide is based on the Airbnb style guide.

You can help to triage issues. This can include reproducing bug reports, or asking for vital information such as version numbers or reproduction instructions. If you would like to start triaging issues, one easy way to get started is to subscribe to esfiddle/esfiddle on CodeTriage.

Then have a look at some of the projects issues Checkout the labels first-timers-only, bite-size (for small issues) and up-for-grabs.

esfiddle's Issues

Add browser-sync + watch task for grunt

When developing ESFiddle we want to be able to change one of the files that gets compiled (like the stylus styles and JS) and see that immediately.
Let's add some browser-sync magic and have it watch the CSS and JS files and automatically rebuild them if they change.

Export as Gist

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

Add a new button in the share menu to export the fiddle to a gist.

The exported gist will include a comment before it that links to the fiddle on esfiddle.
like this:

/**
   Exported from ESFiddle.net
   Check it out here https://esfiddle.net/abcdefg
**/

function a(){
console.log("hello world")
}
a();

This issue will require a new route to handle api requests to share to github gists.

Clicking the button will call the github api and export the fiddle to the users github account. This option will only be displayed for users that are logged in.

Output browser errors to the console on the page

If you write some code in ESfiddle that has a JS error in it, the error will not be printed to the on screen console. This is functionality we definitely want to have.

Ideally this should also have tests against it but these can be added later.

Check this case here https://esfiddle.net/ixwfnfo5/

Add CODE_OF_CONDUCT.md

As we are getting more contributors we need a code of conduct to ensure we have a welcoming environment for the community. ESFiddle should be accessible to anyone regardless of background, race, gender or, when the aliens come, what planet they are from.

We need to add a new CODE_OF_CONDUCT.md file with the contents from here

Design documentation

Originally the site was one single page, as we are growing the number of pages we need to have a consistent look and feel to each of them.
This is a reasonably big task but do not be put off as it can be done by many different people. If you have an eye for design this is for you!

What we require is documentation on how we can make the pages look consistent (for new contributors if they are creating new pages). This documentation may require writing some new css or improving our old stuff to make sure that it's easy to use the various classes throughout the site.

How specific we are with this documentation is another question. Initially it does not really matter, as long as it's there and useful. We can also drill down into the nitty gritty such as exact letter spacing and stuff later.

For now all we really need is, here is how an average page should look (perhaps with a screenshot). here's how it should be structured code wise and then some css classes to use to add that styling.

Update the UI so the vertical layout so it fills the page

The vertical layout (the default one) currently has a lot of wasted space around the sites.

It would be good to update the UI so that it fills more of the space similar to JSBin.

The code and console containers can be extended to fill the page and scale to the users screen size.

"Star" fiddles

So the idea here is that other people will be able to "Star" your fiddles. The most starred fiddles will then be displayed on a page like a hall of fame type thing but this will be added in the future.

The first job is to add a route for '/star/:fiddleID' which will save a star against that fiddle.
The second task for this PR is to add a Star button on the fiddle page (only when it is saved!) that will make a call to this route.

The rest will be handling in future issues and PR's, let's just get the functionality in place first.

Improve the README

OK so the readme contains basic setup but we need to point people to the contributing guide and filing bug reports.

Like the readme on Freecodecamp

Use template literals for cleaner examples code

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

For examples, there are code samples that are copied. The code for copying these look something like this:

// src/examples/arrow-example.js

window.es6Example.arrow = {};

window.es6Example.arrow.code = [
    'let square = x => x * x;',
    'let add = (a, b) => a + b;',
    'let pi = () => 3.1415;',
    '',
    'console.log(square(5));',
    'console.log(add(3, 4));',
    'console.log(pi());',
    ''
].join('\n');

window.es6Example.arrow.display = 'Arrow Functions';

As you can see there are commands that are joined into a string and returned. The readability of this can be enhanced by using template literals ``

// src/examples/arrow-example.js

window.es6Example.arrow = {};

window.es6Example.arrow.code = `
      let square = x => x * x;
      let add = (a, b) => a + b;
      let pi = () => 3.1415;

      console.log(square(5));
      console.log(add(3, 4));
      console.log(pi());

`;

window.es6Example.arrow.display = 'Arrow Functions';

#81 does some of the ground work for using them.

Update CONTRIBUTE.md

The contribute guide needs some love. It has a setup guide and that is basically it.

We need to make sure that people run 'grunt test' before submitting a PR. Maybe this needs setting up as a git hook in the future.

Any other information to help new comers would be helpful. The guide needs to be as concise and streamlined as possible.

Add a blog

This PR will need to add a blog to the site. There doesn't need to be a CMS behind it as I can manually add posts.

It needs to ideal have a similar structure to a jekyll blog with a folder of posts that the blog will then display. It does not need to have comment functionality unless it is built into a library that is with the blogging platform.

I would suggest using something like https://github.com/jsantell/poet

For this to work a item would need to be added to the navbar called 'Blog'. It would then need setting up with a route on the backend for '/blog'.

Add ability to make a fiddle private

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

Add a new icon to the fiddle code window. The icon should be similar to the incognito man, perhaps use this icon. This option should only show to signed in users.

Make it so that when the user clicks that button it marks the fiddle as private.

To do this you will need to do the following:

• Add a new DB column to the fiddles table called 'isPrivate' (this should be a boolean)
• Add an api route to make the fiddle ID private
  • In that route, get the fiddle record and make the isPrivate column set to either 1 or 0 (1 = Private, 0 = not private)
• Add logic into the main fiddle route to check if the user that is trying to view the fiddle is the person who created that fiddle. If they are not the user who created it, return an error saying that the fiddle is private.

Add new example code

One of the main focuses of ESFiddle is to have a rich library of example code for ES2015+.
It would be great to expand this collection of code even further and improve the current code we have.

If you can think of a code example to demonstrate a new ES2015 or ES2016 feature then write it in the 'src/examples' folder and then submit a new PR! 🎉

We will be accepting multiple PR's for this so anyone can get going!

ES7 code is not linted correctly

When clicking the lint button on some code that contains ES7 features, such as Array.include() the code linter brings back a bunch of errors.

The linting is done by JSHint. I notice that we are a couple of version behind with this tool so updating it might fix it. However I would recommend when doing this we add JShint to be a served from a CDN as a deferred or async script.

Add trevor to dev dependencies

Super simple one here, add trevor to the dev dependencies and make sure the travisCI suite runs.

Rebasing?

What branch should we be rebasing against? Master or Develop?

Update travis node versions

In travis.yml we need to set the versions of node that travisCI will run our test suite against.

We want to support all the node versions that are still actively maintained by the node community as well as the latest current version.

Check out this repo for a list of node versions that are still active.

Using the list there, please update the travis.yml with these node versions.

Dark theme

Simples really. Add a dark theme.

Make it a option that is saved in localstorage like the theme or vertical/horizontal height settings.

The esfiddle maroon color can either change to something that contrasts well with the black or keep it the same. Experiment! 👩‍🔬

Rename and sort folder structure

I've noticed that the whole folder structure we have for the project might be a bit confusing. Some people initially think that we should change things in static/ (which was true for a while). Nonetheless, I think this could be done to be much less confusing.

I was thinking of doing the following changes

• Rename static to 'dest' or 'dist'
• Create a folder inside 'src' for 'js' and 'views'
• Move api.js to a 'server' folder
• Move all docs (apart from README) into a docs folder.

This might be quite a big job as all the file paths will need renaming. Please make sure you test throughly before submitting a PR! 💃

Fix issues from PSI

This is probably one for me but if other people want to have a crack at this then feel free :)

Googles page speed insights has made some suggestions that we should fix. Results can be found here

Add ES7 Examples

We currently have a list of ES6 example code featuring the new functionality of ES6.

Now that ES7's spec is out then we need to add an example for each feature that has been released.

You can find the new ES7 features below:
http://www.2ality.com/2016/02/exponentiation-operator.html
http://www.2ality.com/2016/02/array-prototype-includes.html

The examples dropdown will need an "ES7 Examples" label divider and then an option for each example.

Sign in with Github

This is a job that will allow lots of new features in the future!

We need a way for users to be able to sign in with their github accounts. We don't need to do anything more with it at this stage, just a basic login, logout function. The rest will be added in future PR's/issues

Make navbar ordering consistent

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

So as we've added pages there has been mixups in pages that are on the navbar and the order of them.

The correct ordering is:

• Profile (only shown when a user is logged in)
• About
• Blog
• Login/Logout (depending on whether the user is logged in)

The best solution would be to create a navbar.ejs file and then include it in all the views.

Also this is issue number 💯 🎉

About page

We should probably add an about page for the project.

The content will contain the following:

• About the project
• Information on how to report a bug
• Guide to contribute - link to the contribute guide
• Link to github project

A route will also need adding to the app.js file

ES6 Rewrite

Big one here!
This is a two step process.

1. Rewrite /src/es6-fiddle.js to be in ES2015+
2. Add a babel task to compile this js to ES5 code and add it to the watch task so that we can make changes and not have to restart the server.

Big one here but good fun. Make sure to test throughly!

Redesign Unauthorized Page

Type of issue

• Bug
• Idea/Suggestion
• Question

Description

Create a design for login/Unauthorized as currently there is none

Cache images folder

Using some kind of express caching middleware (it doesn't matter what, I saw express-cache-control but there are others), make the /images/ directory cache for a month.

This will improve load times for users as images are probably the largest asset on the page.

Automatically redirect http traffic to https

For some reason the cloudflare setting for this does work so the solution is to have some JS that checks if we are on http and if so redirect to https.

If anyone has any other solutions then feel free to do it that way.

PR's welcome!

feature: loading 3rd party javascript library

User should be able to load 3rd party library and do some coding on that.

e.g.
User should be able to load lodash library and then run following fiddle to get response in console page.

var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
 
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false

Better UI/UX

Could we improve the design of the site as a whole? It seems to plain for something as modern as ES6

Split app.js route down

The main app.js file has become a little unwieldy and needs breaking down.

I'd suggest breaking it down into the following inside of a 'routes' folder.

• Main page route (embeded and regular)
• Authorised routes (github login etc)
• Other pages like the blog and about

Make sure that all the api tests work after you do this!

Add line number for corresponding console.log() statement in console section.

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

Just a thought, I think we should add line numbers for corresponding console.log() statement to console page/section on right.

At the moment it looks like this....

If want to find out which one is true for false, I have to literally count output line and then console.log statement!

So what i am suggesting is following.....

404 Fiddle not found

When a fiddle is not found (by navigating to one that does not exist) then we need to display a 404 page rather than a json response that the fiddle has not been found.

A PR that addresses this issue would do the following

• Add a 404 page with text saying "Sorry the fiddle could not be found."
• Change the API to respond with a 404 error and send the user to the 404 page.

Move from Stylus to SASS

When I inherited the project the styles were written in Stylus. I never knew stylus so I just wrote css in the stylus files basically. I think a lot more people are familiar with SASS (myself included!) and so can take full advantage of the features that SASS offers.

A PR for this issue would include moving all our .stylus files over to sass files and configuring that in the build process (including the watch task).

Adding Title and Description to fiddles

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

@joshghent suggested that we should add a Title and Description to each fiddle.

I think one way we can do this is instead of showing a blank console when initially selecting a fiddle example, we can provide a brief description of what the example is for and explain the code as well.

This would only be displayed when you select first select an example but would disappear once you run the code and the only way for it to show again would be to reselect the example.

This is just an idea, if anyone has any other suggestion please let me know! @SaraVieira

Add image optimisation task to grunt

Google page speed insights says that we can reduce all the images (which is 4 currently) by ~70%. In the future we may add more images so it would be a good idea to add an image optimisation task to grunt for when we build for production (we don't need to do this for dev).

Ideally the optimised images would just overwrite the unoptimised ones.

Configure OpBeat APM

So I've added Opbeat APM to add some performance monitoring for us. I believe this allows me to be notified when the app is down so I can kick it back to life.

However it needs configuring. Simply follow the guide here
https://devcenter.heroku.com/articles/opbeat#using-with-node-js

Eslint giving syntax error for ES6 syntax

Need to configure ESlint to support ES6.

Some of the code on server side is written in es6 syntax, also we are planning to move front end code to ES6 as well. we need to configure eslint for this.

Also it would be great if we have some sort of provision for future ES versions.

New logo

Ok so it's high time we got a logo!
This does not have to be the next coca-cola or nike but it would be nice to have a logo of some description.

This logo would be used as an avatar for the project on github and on the website so we would need a logo that can fit in a square.

We have an established maroon color scheme but this is open to change. Go wild!

Add eslint to grunt test task

We have an eslint config but it is currently not tested against when we run grunt test

Using this package we can test src/es6-fiddle.js for eslint errors.

This will mean that future PR's are always kept to the code base standard.

Add pre-push to run travis test suite

In connection with #62 we want to add a pre-push script to run the test suite on all the node versions we support.

#62 will have added trevor which allows for running travis locally in essence. Before a project contributor pushes to their remote branch we want to make sure the test suite passes. Add this to the dev dependencies and configure it to run trevor.

Roadmap 3.0.0 - The big code clean up!

We got nearly all the features we wanted for version 2.0.0 done and released. Well done to everyone who contributed. It's amazing to see this little project turn into something with a great set of people hard at work on it! Keep up the good work. And tell your friends!

My reaction when we get new PR's

Anyway...

In the coming month (not 6 weeks), I think we should aim for the following: The theme of this release is to overhaul the code and redesign. This will mean pretty much that we have a feature freeze whilst we clean up the code, redesign the site and fine tune it so that it's more user friendly and easier to maintain. So roll up your sleeves and grab your mop and buckets cus it's refactor time 😆

• Add front end tests - issue is here
• Add front end regression tests - issue is here
• Rewrite the main client JS in ES6+ - issue is here
• Improve the score on the Google mobile-friendly test - issue is here
• Sort the folder structure - issue is here
• Make new design documentation - issue is here
• Add new docs for the coding style, such as naming conventions
• Dynamically show the login/logout buttons - issue is here
• Redesign the login area here
• Redesign the blog here
• Split the app.js routes into separate files - issue is here
• Add functionality to save names and descriptions for fiddles when you are logged in.
• Add new example code - issue is here

This is not a complete list and it might be subject to change (I have a couple of things I might throw in here)

As always, if you have any suggestions or questions then let me know here. We are very open to ideas!

Roadmap - v2.0.0

This is the primary issue outlining everything that will be done for the 2.0.0 release. This will ideally be completed in 6 weeks or less.

The main goal of this release is to add github signin and saves with fiddles. Future functionality that stems from this will come in later releases.

UI/UX Changes

• Change the editors to fill the screen. Move over to use flexbox
• Improve the mobile site rendering, get a good score on the https://search.google.com/search-console/mobile-friendly test

Backend

• Add github signin, save fiddles with a userId - active PR is here
• Cache images with express to address final page speed insights issue

Community

• Improve documentation further, make it as easy as possible for people to get the site running locally.
• Break issues down into smaller chunks to allow new contributors to work on bite-sized chunks of features or bug fixes.

Redesign Blog Area

Type of issue

• Bug
• Idea/Suggestion
• Question

Description

Redesign all the blog area because for now poet does not have any styles

Dynamically show the Login and Logout buttons

We have now implemented github login on the develop branch.

We have three buttons on the main index.html page (the code page) - Login, Logout and View Profile.

If a user is logged in we should show the Logout and View Profile button.

If they are not logged in then show the Login button.

Speak to @asiyani about how to detect if the user is logged in on the front-end.

Frontend tests

We have some backend tests but it would be good if we could write some tests using something like selenium or phantom to test the frontend.

The tests I recommend adding are

• Make sure the vertical layout works
• Make sure the horizontal layout works
• Make sure the github link works
• Make sure the theme dropdown works (for all themes!)
• Make sure the examples dropdown works (for all examples!)

Add tests

So it's time we added tests for the API so we can be confident that all new features we add and bugs we fix still leave the site functional.

The testing framework does not matter. I think we will use a mix of mocha, chai and perhaps selenium if needed.

I suggest tests for the following:

• Save a fiddle
• Load a fiddle
• Horizontal and Vertical buttons work
• Code lints correctly

Please feel free to suggest more and add them!

Improve score on the Google mobile friendly test

https://search.google.com/search-console/mobile-friendly?id=EqQWeljAIXs06Nr6Luca4A

All the issues are there really, they need addressing.

A good change would be for mobile devices to default to the horizontal view if it's between a certain width. On tablets (in landscape) you can probably use it in the vertical view but with thinner screens it would look cramped by default and not user friendly.

You have free reign on how to fix these issues as long as they look nice 👍

Create CSS Regression tests

Type of issue

• Bug
• Idea/Suggestion
• Question

Description

Create regression tests to test when someone makes any changes it does not break the layout

Also add this to Travis and pre push hooks alongside with lint

Fix code editor syntax highlighting

Type of issue

• Bug
• Idea/Suggestion
• Question

Description (include any screenshots or debugging information if applicable)

There is a bug currently on the development branch where the code editor will not display any syntax highlighting.