khoand0000

• Using download attribute for <a>

<a href="path_to_file" download="proposed_file_name">Download</a>

Pros: fast, don't need program from server (the link doesn't need have Content-Disposition: attachment is set from server)

Cons: Partial support by browsers. check http://caniuse.com/#feat=download.

• <button>

khoand0000

<?php

/**
 * Created by PhpStorm.
 * User: khoand
 * Date: 11/29/15
 * Time: 7:14 PM
 */
class Shared
{

khoand0000

• Required request parameters: page (start 1, not 0)
• Optional request parameters: results_per_page
• RESTful pattern, don't include required parameters in url: http://myapi.com/items (not http://myapi.com/items/:page), include required and optional parameters in query parameters: http://api.com/items?page=1&results_per_page=50. Because there is just GET request is used for pagination, so always using query parameters (don't include them in json body, just using json body when request is PUT, POST)
• Response: json object contains at least: count (total items), items (array)

{
  count: 10,
  items: [
    {name: '', ...},
 {name: '', ...}

khoand0000

// data is array
vm.data = Data.getData(function () {
  angular.forEach(vm.data, function(item) {
    console.log(item);
  });
  
  // don't use
  // for (var i = 0; i < vm.data.length; i++)
  // { }
  

khoand0000

My situation: I want my menu contains 2 items: username text, user icon (contain sub-menu with 1 item: Sign Out) always same align horizontal even resize window (becaues window's width is not enough to contain both items. So I used the css code like

ul.navbar-top-links {
  overflow: hidden;
  height: 50px; // example
}

with html code

khoand0000

My situation: I want to update height of side-menu (it is dynamic, its items are loaded from server). I know need to using $timeout to waiting angular build DOM done. Bellow code is right

  $scope.data = WebService.getData(function () {
      // doing something with $scope.data
      
      // must put the in here, after server return result.
      // angular using the result to build DOM again (changed everything will be destroyed)
      // using $timeout to waiting angular done
 $timeout(function() {

khoand0000

$content  = preg_replace('#[\d]{3,4}[\.\- \s]?[\d]{2,3}[\.\- \s]?[\d]{2,3}[\.\- \s]?[\d]{1,2}#mius', '...', $content);
//        0999990999
//        099 999 0999
//        099 999 09 99
//        099 99 90 99
//        0999 99 0999
//        0999 990 999
//        0999 99 09 99
//        09999999990
//        0999 999 9990

khoand0000

• Using https://github.com/RobinHerbots/jquery.inputmask to make 'tel' inputs

        $(":input[type=tel]").inputmask("0999-999-999[9]");

• Using http://parsleyjs.org/ to validate phone input in client-side

  <input type="tel" class="form-control" id="contact-phone" name="contact_phone"
         pattern="0[0-9]{3}\-[0-9]{3}\-[0-9]{3,4}"
         placeholder="Phone" required>

khoand0000

• Padding relates to click, hover on the element; so just using padding when showing box of the element (bound by border) is larger
• Using margin when increase space between 2 elements

khoand0000

Take note when using https://css-tricks.com/centering-css-complete-guide/

• Vertically
  • Is it inline or inline-* elements (like text or links)?
    • Is it a single line?
      • don't know height of element: padding-top == padding-bottom
      • know height of element: using line-height

          .center-text-trick {

height: 100px; /* apply inline-block element, inline element doesn't need it */