backbone.js & underscore.js

Download:

http://backbonejs.org/

http://underscorejs.org/

Notes:

  • order of script inclusion
    • jquery
    • underscore.js
    • backbone.js
  • backbone has object oriented structure
  • Backbone.history object
  • Route:
    • route starts from ‘#’
      • eg: guides#test
        • route is ‘test’
    • Command to identify the current route
      • Backbone.history.getFragment()
Advertisements

PHPUnit

phpunit testing:

  • https://www.youtube.com/watch?v=-9YVcssCACI&t=244s
  • Installation:
    • composer require –dev phpunit/phpunit
  • Usage on cli:
    • If it’s installed with composer in your project folder:
      • go to your project folder
        • .\vendor\bin\phpunit phptest.php 
  • phpunit config file:
    • create phpunit.xml
    • specify the testsuite (filename, location etc)
    • from the cli just use .\vendor\bin\phpunit
    • file content
  • Can use gruntjs for running phpunit
  • Accessing Main Class from Test Class
    • Autoload the main class location in composer.json
      • “autoload”:{
        “psr-4”:{
        “App\\”:”app”
        }
        }
      • where ‘app’ is the folder location of the main class
      • PSR 4 app loading:
      • after specifying autoload execute following composer command to work with autoloaded classes
        • composer dump-autoload -o
    • Using the main class in Test class
      • create object $obj= new \App\ClassName; (fresh model for each method)
      • User the $obj to access the class properties
    • Naming for test methods:
      • ‘test’ has to be pre-fixed for all test class methods and has camel case methods
      • dot block method:
        • /** @test */
        • inserting this dot block before a method which has no ‘test’ pre-fix will run the test like other test cases which has ‘test’ pref-fix
    • Using setUp as a constructor method for creating a model with a protected variable
      • setUp runs before each method
      • protected $user;public function setUp(){
        $this->user = new \App\Models\User;
        }
    • Collection class
      • convenient wrapper for any kind of objects
      • for iterating purposes
    • Important concepts:
    • Assertions:
      1. assertTrue
      2. assertEquals
      3. assertEmpty
      4. assertInstanceOf
      5. assertCount
      6. assertInternalType
    • Exceptions:
      1. expectExceptions

Reference:

https://github.com/sainag/PHPUnit

https://phpunit.de/manual/current/en/organizing-tests.html

Tutorial series

Tips

Command line commands on windows:

Remove directory:

  • rd /s /q dirname
    • /S Removes all directories and files in the specified directory in addition to the directory itself.Used to remove a directory tree.
    • /Q Quiet mode, do not ask if ok to remove a directory tree with /S

Git Ignore:

add directoryname in the .gitignore file

CSS Preprocessors – SASS and LESS

LESS:

  • JavaScript based (nodejs is required)
  • ‘@’ to define
  • backwards compatible – rename .css to .less and start building
  • Advantages:
    • Using variables for re-using same css
    • Mixins – using css of 1 item in another item
    • Mixins with paranthesis – function with parameters – you can send custom values
    • Nested styling
    • Nested conditionals – for mobiles & desktops etc
      • conditional styling
    • Simple arithmetic operations in styling. eg: font-size * 2 etc
    • Commenting – single line commenting available
    • Importing
      • can import other .less files
        • eg: @import filename;
      • You have to put the correct file name including ‘_’ if there are any.
      • No need to add the extension
    • Extend/Inheritance:
      • &:extend selector
    • Image paths as variables:
      • eg:
        • @images: “images/”
        • using it:
          • background: url(“@{images}name.jpg”);
    • http://lesscss.org/features/

SASS:

  • Ruby based
  • ‘$’ to define
  • .sass is shorthand version with no semicolons and braces etc
  • .scss is normal kind of less (you’ll use .scss files all over)
  • Ruby is required to get sass but can install with npm and start using it like LESS
  • Advantages:
    • variables
    • nesting
    • partials:
      • Good practice is to use ‘_’ for the files that are not going to be included in the html. These files are only used in other .scss files
      • @import filename to include this in other file. You don’t need to add ‘_’ and ‘.scss’ for import command
    • Extend/Inheritance:
      • Useful when you have various size panels (big/medium/small)
      • for using one css class in other class, use @extend selector
    • Mixins – is like function and passing parameters to it
      • you can send custom values
      • Eg:
        • @mixin border-radius($radius){ -webkit-border-radius:$radius; -moz-border-radius:$radius; -ms-border-radius: $radius; border-radius:$radius}
        • .little-panel{ @include border-radius(5px);}
        • .big-panel{ @include border-radius(10px);}
    • Operations
      • Arithmetic operation/ adding values etc
      • multiply background color (*1.5) to get lighter version of the colour
    • http://sass-lang.com/guide

Ref:

Package Managers

Package – A package can be a GitHub shorthand, a Git endpoint, a URL, and more. Eg: bootstrap

  1. npm – node package manager
  2. bower – package manager for web
    • bower is a command line utility
    • has to be installed with npm
    • Installing bower: (-g installs it globally)
      • npm install -g bower
    • bower requires node, npm and git
    • bower init to initialize bower.json file
    • Installing packages with bower
      • bower install <package>
      • bower install <package> -S (for saving in bower.json)
      • bower install <package> -D (for saving in bower.json as devdependency)
    • Issues git not found event after having git client tool
      • solution:
        • locate your git.exe file
        • It’s usually located here – C:\Users\user\AppData\Local\GitHub\PortableGit_dGUID\cmd
        • GUID changes when the git gets updated
        • copy the path and paste it in command line
        • enter ‘git’ command, if you see git help options that means git is working
        • now copy the path, remove ‘.git.exe’ at the end and paste into PATH variable
        • close and reopen the command line and try entering git command again. If everything goes right, git works!
      • package.json file gets created with all dependencies. If not just enter, ‘npm init’ command
  3. composer – A dependency manager for php
    • Installing composer
      • https://getcomposer.org/download/
      • The installer will download composer for you and set up your PATH environment variable so you can simply call composer from any directory.
    • Installing packages with composer:
      • composer require twbs/bootstrap
    • For php
      • Eg:
        • composer require phpmd/phpmd
        • composer require –dev phpunit/phpunit
          • Using phpunit from commandline
            • .\vendor\bin\phpunit testFile.php
            • Same pattern of execution for other modules installed with composer
    • composer.json file gets created with all dependencies

Raspberry PI 2

First time setting up:

  1. Setting up raspbian
    1. You will need USB wifi adaptors – 802.11N
    2. Wireless keyboard and mouses
    3. Download latest raspbian
      1. https://www.raspberrypi.org/
      2. Noobs/Raspbian
      3. Download torrent to the micro sd/ sd burner (on your local computer)
    4. Setting up the sd card: (on your local computer)
      1. format the sd card – use the formatting tools on sd association (https://www.sdcard.org/downloads/formatter_4/eula_windows/index.html)
      2. even if the card is bigger – the sd card burner will setup the size for the os
      3. copy all the downloaded zip files to sd card
      4. When this is done put the sd card into the raspberry pi 2
    5. keyboard, mouse, wifi and sd card adapters all needs to be on raspberry
    6. put the power up – micro usb
    7. connect hdmi to screen
    8. select the raspbian option on the start up screen and start installing
    9. when the installation done – set the boot path (follow the video guide)
    10. Setting up wifi:
      1. on initial screen – go to wifi config and follow the setu process
    11. Power supply:
      1. any micro usb charger with 5volts power supply at 1A current or more
      2. i’m using Samsung galaxy tab’s charger

 

Buying wifi adapter from anything below:

  1. http://au.rs-online.com/web/p/wireless-adapters/8920012/
  2. http://www.ebay.com.au/itm/150-Mbps-USB-Wifi-Adapter-W-Antenna-Raspberry-Pi-Mac-OSX-Windows-Linux-/281704710784?hash=item4196e8c280:g:PS4AAOSwx-9WzACc
  3. http://www.ebay.com.au/itm/150Mbps-Mini-USB-WiFi-Wireless-Adapter-Network-LAN-Card-802-1n-g-b-Ralink-RT5370-/182304215506?hash=item2a722d91d2:g:r10AAOSwMtxXq-u-
  4. http://www.ebay.com.au/itm/New-Wireless-USB-Adapter-LAN-Wifi-Dongle-f-Raspberry-Pi-802-11b-g-n-150Mbps-AU-/111838168586?hash=item1a0a13060a:g:GzwAAOSwgyxWXUNj

Installing windows 10:

http://www.techrepublic.com/article/windows-10-on-the-raspberry-pi-what-you-need-to-know/

Installing raspbian with pixel (full desktop version):

 

Shutting down raspberry pi:

  1. Shutdown like windows from the menu bar
    1. green light (next to the red light) which indicates activity stops blinking when the pi shuts down
    2. wait for a few seconds and then unplug the power
    3. Done

NativeScript – building mobile apps with NativeScript

NativeScript with JavaScript:

  1. NativeScript is a cross-platform JavaScript framework for building native mobile apps for iOS and Android.
  2. NativeScript is free and open source
  3. NS renders UIs with native platform rendering engine, no web views.
  4. Prerequisites:
    1. JavaScript
    2. CSS
    3. Terminal
    4. IDE
  5. Installation: NativeScript CLI install needed on the machine – http://docs.nativescript.org/start/quick-setup
    1. Windows installer – http://docs.nativescript.org/start/ns-setup-installer
    2. If your machine already has Android SDK installed then you’ll need to manually install NativeScript following the steps on the quick-setup page
    3. Windows intaller needs – Java Development Kit, Nodes.js, Android SDK pre-installed
  6. Complete the installation by following all the instructions above

Starting NativeScript:

  1. tns command from CLI
  2. tns create HelloWorld –template nativescript-template-tutorial to create Helloworld app
  3. Go to the app folder – cd HelloWorld
  4. Running the app:
    1. tns run android:
      1. You must have at least one AVD (Android Virtual Device) configured on your development machine for this command to run your app up on an Android emulator. If you don’t have one installed currently go ahead and set one up now.
      2. creating new virtual android emulator:
        1. Open android sdk manager from start menu – You have installed as part of the pre-requiresites for NativeScript
        2. Check all the system images are installed for future use or else click the install packages button at bottom right corner.
        3. Create Andrios virtual devices:
          1. http://docs.nativescript.org/tooling/android-virtual-devices
          2. Install HAXM for accelaration – https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager
          3. Complete the creation of emulators by clicking start button – check to see if there are any errors.
          4. If there are no errors the emulator will open up
      3. Execute the run command again to run your app on android emulator
      4. Can run multiple emulators at the same time:
        1. tns device command lists all devices
        2. choosing a device by – tns run android –device 2
        3. to run all connected devices is by – tns run android
    2. tns run ios
    3. Tns run won’t stop until ctrl+c as the app refreshes as you change the code
    4. Changing colour schemes – http://docs.nativescript.org/ui/theme#color-schemes
    5. When you add a new dependency you need rebuild the app from scratch
    6. Ref – http://docs.nativescript.org/tutorial/chapter-1

Builidng a real-world app:

  1. http://docs.nativescript.org/tutorial/chapter-2
  2. http://docs.nativescript.org/tutorial/chapter-4
  3. login.js: code-behind:
    1. frameModule for navigation
    2. UserViewModel is for the login
    3. exports.loaded page binding is important for any parameter passing to work
    4. login works from now
    5. As a best practice, testing for a platform with an if check is the way to go when you have a small number of platform-specific changes to make. If, on the contrary, you have big, entirely different chunks of code for iOS and Android, you might want to go with platform-specific code-behind files—e.g. login.ios.js and login.android.js.

Reference:

http://docs.nativescript.org/tutorial/chapter-0