Month: January 2017

jasmine

javascript test library
https://jasmine.github.io/

describe('Address Book', function(){
  it('should be able to add a contact', function(){
    var addressBook = new AddressBook(),
    thisContact = new Contact();

    addressBook.addContact(thisContact);

    expect(addressBook.getContact(0)).toBe(thisContact);
  });
});

describe('Address Book', function(){
  it('should be able to add a contact', function(){
    var addressBook = new AddressBook(),
    thisContact = new Contact();

    addressBook.addContact(thisContact);

    expect(addressBook.getContact(0)).toBe(thisContact);
  });

  it('should be able to delete a contact', function(){
    var addressBook = new AddressBook(),
    thisContact = new Contact();

    addressBook.addContact(thisContact);
    addressBook.deleteContact(0);

    expect(addressBook.getContact(0)).not.toBeDefine();
  });
});

grunt file

/*
 After you have changed the settings at "Your code goes here",
 run this with one of these options:
  "grunt" alone creates a new, completed images directory
  "grunt clean" removes the images directory
  "grunt responsive_images" re-processes images without removing the old ones
*/

module.exports = function(grunt) {

  grunt.initConfig({
    responsive_images: {
      dev: {
        options: {
          engine: 'im',
          sizes: [{
            /*
            Change these:
            
            width: ,
            suffix: ,
            quality:
            */
          }]
        },

        /*
        You don't need to change this part if you don't change
        the directory structure.
        */
        files: [{
          expand: true,
          src: ['*.{gif,jpg,png}'],
          cwd: 'images_src/',
          dest: 'images/'
        }]
      }
    },

    /* Clear out the images directory if it exists */
    clean: {
      dev: {
        src: ['images'],
      },
    },

    /* Generate the images directory if it is missing */
    mkdir: {
      dev: {
        options: {
          create: ['images']
        },
      },
    },

    /* Copy the "fixed" images that don't go through processing into the images/directory */
    copy: {
      dev: {
        files: [{
          expand: true,
          src: 'images_src/fixed/*.{gif,jpg,png}',
          dest: 'images/'
        }]
      },
    },
  });
  
  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-mkdir');
  grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);

};

https://unicode-table.com/en/

compression level

watch out image compression level and natural width.
should be less pixels.

Total bits = pixel x bit per pixel

    body {
      margin: 0;
    }
    img {
      float: left;
      margin-right: 10px;
      width: calc((100% - 20px)/3);
    }
img:last-of-type {
	margin-right: 0;
	}

Vector scales without quality degradation.

$0.naturalWidth
601
$0.naturalWidth
1202

The process of DOM

Characters -> Tokens -> Nodes -> DOM

Request page -> GET html -> page head(build DOM, render) -> search result(build DOM, render)

Characters -> Tokens -> Nodes -> CSSOM
hi tag is faster evaluation than div p tag as dom tree.

JavaScript is parser blocking

Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Although originally designed for use with Node.js and installable via npm install –save async, it can also be used directly in the browser.

first canvas

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="my_canvas"></canvas>
</body>
<script>
	var canvas = null;
	var context = null;

	setup = function(){

	canvas = document.getElementById("my_canvas");
	context = canvas.getContext('2d');
	canvas.width = 1200;
	canvas.height = 720;
	};
</script>
</html>

flex-box

<style tyle="text/css">
      .container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .box {width: 150px;}
 </style>

column drop, off canvas, layout shifter, mostly fluid

media query

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="screen and (min-width:500px)" href="over500.css">

media query within a style sheet.

@media screen and (min-width: 500px){
	body { color: #F79420; }
}

@media screen and (min-width: 800px){
	body { background-color: blue; }
}

frequently used max-width and min-width

@media screen and (max-width: 500px){
	.yes {
		opacity: 1;
	}
	. no {
		opacity: 0;
	}
}

change background-color with width.

body {
	  	background-color: green;
	  }
  	  @media screen and (max-width: 400px) {
        body {
        background-color: red;
        }
      }
  	  @media screen and (min-width: 600px) {
        body {
        background-color: blue;
        }
      }

developer tool help you to decide media query
%e7%84%a1%e9%a1%8c

view port

%e7%84%a1%e9%a1%8c

<meta name="viewport" content="width=device-width, initial-scale=1">

initial-scale indicate relationship between device independent pixel and css pixel.

<meta name="viewport" content="width=360,initial-scale=1">

prevent image overflow content

img, embed, object, video {
  max-width: 100%
}

example

<img id="owl">
#owl {
 width: 640px;
 max-width: 100%;
}

CSS/Properties
https://www.w3.org/community/webed/wiki/CSS/Properties

nav a, button {
min-width: 48px;
max-height: 48px;
}

Device Pixel Ratio

device pixel ratio:デバイス・ピクセルとCSSピクセルの比率のこと
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

device pixel / hardware pixel: デバイス・端末がサポートする物理的な最小単位のピクセル。ハードウェア・ピクセルともいう。

CSS pixel:CSSで使う論理上のピクセル。デバイス・ピクセルが物理的なピクセルの数であるのに対し、CSSピクセルは論理上のピクセルの数です。
CSS properties take “length” values, such as width, margin, padding, font-size, border-width, etc.Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.For some CSS properties, negative lengths are allowed.
There are two types of length units: relative and absolute.

User agent：利用者があるプロトコルに基づいてデータを利用する際に用いるソフトウェアまたはハードウェアのこと。 特にHTTPを用いてWorld Wide Webにアクセスする、ウェブブラウザなどのソフトウェアのこと。
In computing, a user agent is software (a software agent) that is acting on behalf of a user. One common use of the term refers to a web browser telling a web site information about the browser and operating system.

Example:Mozilla/5.0 (Linux; Android 5.0; Nexus 6 Build/XXX00x) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.59 Mobile Safari/537.36

Google dev tool remote debugging
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Hardware Pixel and Device Independent Pixel

With font boosting and without font boosting

ViewPortとは：「表示領域」
スケールは1、等倍で表示される
ポートレート表示時の幅は320px
ランドスケープ表示時の幅は480px以上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="...">
<title>title here</title>
...
</head>
<body>
...

1920 x 1980 px
DPR = 2
maximum width of a viewport is 960px