Giter Club home page Giter Club logo

nodeschool.github.io's Introduction

nodeschool.github.io

Please fork it and send us improvements! Read our CONTRIBUTING.md guide for more details on how to send a great PR.

If you are an owner on the nodeschool/Owners team please do not edit this repo directly but instead send your contributions as pull requests.

We ask that you make pull requests because changes to this repository will get deployed onto the live production site immediately and it's best if you get feedback on your pull request first before it goes live.

Running the app locally

This is a static site, simply open index.html or use your favorite static file server to run local server.

You can also use the included development static server by running the following commands:

npm install
npm start

Stickers, Badges and whatnots

These are in the /images directory, feel free to use for your events. In images/make-a-sticker there is a template for making a sticker too. Woop.

Translations

If you would like to translate the NodeSchool site into another language please make a pull request adding languages/<language code>.json.

To generate a new language file template automatically, run the following commands inside a clone of this repository:

npm install
npm run generate-language

This will prompt you to enter a language code and will generate your language file in the languages/ folder with English placeholder text. Now just translate each line. You should also add your language to the languages/languages.json list.

When picking your language code, please use the correct code from the first column of this spreadsheet: http://en.wikiversity.org/wiki/ISO_639-1_language_matrix

The way translations are implemented is using 100% client-side JavaScript. When the page is loaded the users browser locale is detected (using browser-locale) and a XHR request is made to the languages folder to try and fetch a JSON translation file for that locale. First we check for the full 5 character locale file (e.g. en-us) and if that doesn't exist we fallback to the 2 character version (en) and if that doesn't exist we just do nothing and show the default English version.

Translation files are a mapping of translations IDs to the translated strings. There is a separate file called languages/selectors.json which maps CSS selectors in markup to the translation IDs.

The good things about this approach:

  • The site remains a static site. This means that contributing to the site is really easy as the entire site is just flat HTML, CSS, JS and JSON files
  • When PRs get merged they are immediately deployed live to GitHub pages. This makes maintenance really nice as there is no manual deploy step.

The drawbacks of this approach:

  • Only the English (default) version is indexed by search engines
  • The English version briefly appears on page loads before the translated version is swapped in

Update Translations

Are you not sure what translations is missing? Don't worry! :) Just run this command:

npm install
npm run generate-untranslated-lang

You will find untranslated IDs in languages/xx.untranslated.json.

nodeschool.github.io's People

Contributors

a0viedo avatar arianeai avatar brianloveswords avatar cdcme avatar cfsghost avatar claudiopro avatar dominhhai avatar finnp avatar fmoliveira avatar jasonrhodes avatar julianduque avatar kcyang avatar kohei-takata avatar krahman avatar lisposter avatar marocchino avatar martinheidegger avatar max-mapper avatar muan avatar nescalante avatar olizilla avatar riyadhalnur avatar rvagg avatar sleepwalker avatar someoneweird avatar sudodoki avatar toolness avatar trott avatar watson avatar zamakkat 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.