Skip to content

03 Gui Development Guidelines

pbca26 edited this page Dec 12, 2016 · 10 revisions

General

  • 2-space indents, always
  • line continuation of code gets another 2-space indent
  • no trailing spaces
  • try to keep lines within 80 characters
  • try to keep files under 200 lines of code
  • file names in lowercase, each word followed by dash
  • add todo in case somethin
  • provide comments in your code, especially if something is not self explanatory
  • use meaningful names for files, functions and variables

JavaScript

  • var keyword in front of all new variables
  • variable names in camelCase
  • variable declarations at the top of the functions/files, if possible
  • no space after in-line function definitions eg. done(function(myVar) {})
  • space before and after curly braces eg. if (true) { myfunc (); } else { myotherfunc (); }
  • try to move big chunks of reusable code into abstraction layers, see api.js

CSS

  • don't use # as styling hooks, make use of css classes instead
  • css class names in lowercase with dash (-) as the delimiter between words e.g. my-button-green
  • multiple class definitions with the same css instructions are separated by comma, each class on a new line
 example css code

.one,
.two,
.three:last-child {
  padding: 10px;
}
  • consult with http://caniuse.com/ to see if your css instructions are widely supported by major browsers

HTML

  • try to apply semantics to separate different blocks and make code better structured
  • make use of most used HTML tags
  • consult with resources such as http://www.w3schools.com/ if you're not sure which tag(s) to use

Responsive breakdown points

  • 320 - 768, mobile
  • 768 - 1170 tablets
  • 1170 and up, desktops

Backend dependencies


Git commits

  • Mention task specific Trello card ID in your commit, where it's applicable
  • Use meaningful comments
  • Don't write overly long comments
  • Comment starts with verb e.g. added, changed, refactored etc

GUI size

Total GUI size should not exceed 1 - 2 MB including images, typography and other assets. Keep your work clean. Don't rely on external plugins/libraries if something can be done with vanilla JavaScript or Angular.


Sublime Minimum Config

Preferences -> Settings - User

"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true

In case you are using another code editor just make sure to use 2-space indents.


Daemons Synchronization

To build and test the GUI one needs coinds (coin deamons) running on his machine. As it is always being updated and have to keep it synced. Here are some recomendations:

  • SYS / MZС can be synced in 30-60 min both Iguana and regular QT-wallet. It takes just about 500 Mb of space. There is a bunch of mid-sized coind like DOGE or LTC which you can sync very fast with bootstrap.dat.

Coind Regtest mode

Regtest mode in coin daemons can be used as a sandbox environment. Which doesn't require wide bandwidth or a lot of hdd space. Also, you have an ability to "generate coins" by creating a local block chain. Regtest mode doesn't cover all scenarios and should be used to speed up development process. It's best that after task completion it is tested using real life coind wallet(s).


How to build latest Iguana Core code

pull the latest code available on master branch

install nanomsg

cd /tmp
wget https://github.com/nanomsg/nanomsg/archive/1.0.0.tar.gz -O nanomsg-1.0.0.tar.gz
tar -xzvf nanomsg-1.0.0.tar.gz
cd nanomsg-1.0.0
mkdir build
cd build
cmake .. -DCMAKE_INSTALL_PREFIX=/usr
cmake --build .
sudo cmake --build . --target install

build iguana