Git Product home page Git Product logo

betterttv's Introduction

BetterTTV

Build Status Dependencies Status Discord

Building BetterTTV

Getting the essentials

  1. Install nodejs.
  2. Run npm install within the BetterTTV directory.

Development

We use gulp to concatenate all of the files and templates into one. We include a dev module that creates a server to imitate the CDN when gulp is watching.

To use it, we must first modify the hosts file on your computer.

*on nix:

echo "127.0.0.1 cdn.betterttv.net" | sudo tee -a /etc/hosts

on Windows:

add 127.0.0.1 cdn.betterttv.net to %SystemRoot%\system32\drivers\etc\hosts

Now just run the following command from the BetterTTV directory.

*on nix:

sudo gulp watch

on Windows you need an elevated command prompt:

gulp watch

A webserver will start and you can visit Twitch in your browser and browse normally. Files not included in the repo are pulled from the actual server, so everything works.

SSL is used to connect to the localhost webserver. The localhost webserver presents a self-signed certificate, which browsers will by default reject.

For Google Chrome, you can use the --ignore-certificate-errors flag to ignore the self-signed certificate. Only run Google Chrome with this flag enabled when testing, since it will accept all certificates.

For Firefox, you can add an exception to Firefox:

Firefox -> Tools -> Advanced -> Certificates -> View Certificates -> Servers -> Add Exception

Debug Messages:

In order to receive debug messages inside the browser's console log, you must toggle the consoleLog localStorage setting.

Type this in the JavaScript console to enable console logging:

BetterTTV.settings.set('consoleLog', true);

Linting

We use ESLint to ensure a consistent code style and avoid buggy code.

Running gulp will automatically check for any errors in the code. Please fix any errors before creating a pull request. Any warnings produced prior to your changes can be ignored.

Live Linting with Sublime Text:

If you use Sublime Text as your text editor, you can set it up to highlight any errors that ESLint would throw in real-time.

  1. Get ESLint using npm install eslint
  2. Install Sublime Package Control
  3. Install SublimeLinter
  4. Install SublimeLinter-eslint

Live Linting with VSCode:

If you use VSCode as your text editor, you can set it up to highlight any errors that ESLint would throw in real-time.

  1. Get ESLint using npm install eslint
  2. Install the ESLint extension from the extensions marketplace

betterttv's People

Contributors

aaron128l avatar alcadesign avatar amamut avatar conceptionals avatar cratemuncher avatar dansa avatar digitalvortex92 avatar ehsankia avatar fire- avatar hon95 avatar iburn36360 avatar jdarmst avatar jjkjiang avatar lewisje avatar matthewjk123 avatar merghq avatar nareese avatar nbruderman avatar night avatar ourflagismined avatar samfundev avatar scaniatv avatar smackedlol avatar stoupe avatar sw1ft avatar teak avatar tidyl avatar vendethiel avatar voltaek avatar xgerhard avatar

Watchers

 avatar  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.