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