RWD (1-3): CSS Pixels, Breakpoints, Responsive Images

  1. CSS Pixels vs. Physical Pixels
    1. CSS Pixels, the pixel the device reports to the browser
      • Pixel Ratio: For example, for iPad 4, the CSS Pixels is 768px width, but actually there are 1536px width physically (aka, Device Pixels). In this case, we call the iPad 4 has a 2 times Pixel Ratio. But the maths are not always so clean, say for iPhone 6 Plus, 414/1080 px
      • For commonly seemed CSS Pixels and Pixel Ratio, check
      • For Windows computers, the “Scale and layout” settings will also produce a Pixel Ratio higher than 1.
    2. Device Pixels / Dots of Light / Physical Pixels
  2. Commonly Used Breakpoints
    // as most business is mobile first
    // it is better to write CSS for 
    // the smaller devices first
    @media (max-width: 575px) { ... }   // for phone mainly
    @media (min-width: 576px) { ... }   // for pad mainly
    @media (min-width: 768px) { ... }   // for pad or screen
    @media (min-width: 992px) { ... }   // for screen
    @media (min-width: 1200px) { ... }  // for screen
    // some people prefer to use the measurement of "em"
  3. Responsive Image
    // naming the layer as follows in Photoshop
    // when the assets is exported, we will have 3 .png files
    // as specified below. .jpge also works
    100x100 logo1x.png 200x200 logo2x.png 300x300 logo3x.png
    // for difference pixel ratios
      <img src="images/logo.png"
      srcset="images/logo1x.png 1x
      , images/logo2x.png 2x
      , images/logo3x.png 3x
    // or
    <img src="images/demo.jpg"
      sizes="(min-width: 64em) 50vw, (min-width: 35em) 75vw, 100vw"
      srcset="images/demo400.jpg 400w
        , images/demo700.jpg 700w
        , images/demo1000.jpg 1000w
        , images/demo1300.jpg 1300w"
    // the above markup says:
    // if (min-width: 64em), the image should width 50vw
    // else if (min-width: 35em), the image should width 75vw
    // else (the last one's media query must be omitted), 100vw
    // assuming that the width is now 1024px (64em)
    // then the img width 50vw. In other word, 1024/2 px = 512 px
    // then, 400w one (400px) won't be enough and the least overkill one
    // is 700w (700px), and so the browser will choose the 700w one
    // to download and display, aks "images/demo700.jpg"
    // special note: once a larger image is chosen 
    // Google Chrome won't load a smaller one
    // another way to do it is via clip (deprecated)
    // as only newer devices has a higher Pixel Ratio
    // it is better to do use .svg and <picture> element if possible
      <source srcset="amazing.svg" type="image/svg+xml">
      <img src="fallbackProgressive.jpg" alt="This will be shown if the image fails">

My Work Station Setup

This is my wok station, aka, business computer, setup (for front-end development productivity enhancement).

  1. OS (Operating System): Windows 10 Pro
  2. Dependencies
    1. Chocolatey (a Windows Package Manager)
      // essential commands
      $ choco install googlechrome jre8 firefox 7zip autohotkey nodejs git.install putty filezilla dotnet4.5 teamviewer sublimetext3 wireshark foxitreader keepass googleearth cmder opera greenshot googledrive speccy sumatrapdf unetbootin sysinternals -y
    2. Node.js via Window NVM (Node.js Version Manager)
    3. Python 2.x and 3.x
    4. Ruby (for Sass mainly)
    5. Git (for Version Managing)
    6. XAMPP (for local PHP dev environment)
    7. Composer (for PHP package managing)
  3. Global CLI Tools
    1. jpeg optimizing: jpegtran & cjpeg
    2. SASS
  4. Global GUI Tools
    1. Text Editor: Sublime Text 3
    2. Quick Access: Caplocks+
    3. Proxy: Shadowsocks
    4. Proxy Manager: Proxifier
    5. Mouse Gesture: WGesture
    6. Screen Temperature Auto-Adjustment: f.lux
    7. Screenshot: ShareX
    8. Color Picking: Instant Eyedropper
    9. Plain Text Copy: PureText
    10. .jpeg optimization: JPEGmini Pro

PHP Essentials

  1. PHP (recursive acronym for PHP: Hypertext Preprocessor) is a server-side scripting language (the oppose being JavaScript). It is not a programming language because it (an app by a programming language say Java does the oppose):
    1. Runs in response to an event
    2. Performan instructions top down
    3. Has little or no user interaction
  2. PHP
    1. is NOT a compiled language
    2. is designed to work with HTML
  3. Setting Up your local playground for Windows 10 (opinionated)
    1. Install Xampp
    2. Run these commands
      $ cd c:\xampp\htdocs && mkdir learningPHP && touch index.php && subl .
    3. Write the file say:
      <!DOCTYPE html>
        <meta charset="UTF-8">
          echo "Hello Wolrd";
    4. Open Xampp and start the PHP server
    5. Open Chrome and go to “localhost/learningPHP”, and voila
    6. Or simple go to a online code playground say’s
    7. You may want to put a “php.ini” file under your project root with the below contents to enable error report for development:
      display_errors = On
      error_reporting = E_ALL

      more for error reporting of PHP on, the official docs

    8. Other commonly used troubleshooting methods are as follows
      echo $variable;        // checking on the variable's value
      print_r($array);       // checking on the array
      gettype($variable);    // checking on the variable's value's type
      var_dump($variable);   // checking on the variable's value & its type
      get_defined_vars();    // checking on the defined variables
      dubug_backtrace();     // checking on the backtrace
    9. external debugging tools: Xdebug, DBG, FirePHP
  4. An operational trail
    1. client side: browser > server side: apache
    2. apache finds the file requested, which happends to be, say index.php
    3. apache is handling index.php, and go back and forth with the database if
    4. instructed by the index.php file. The result is a (dynamic) .html file
    5. apache sends the resulting .html file back to the browser


// 这个名为data的变量类同于我们在创建Vue实例的时候给传进去的data对象
const data = {
  msg: '这里的信息并不重要,因为我们要演示的是Vue.js是如何监听数据的变化的'
observe(data) // 函数会在下面定义
data.msg = '数据发生了变化'
function callback(){

function observe(data){
  // 确保data存在以及data是合法的对象,以及
  // reactivate里面会调用observe,这样可以
  // 一层一层遍历所有data下的非原始数据类型的值
  if(!data || typeof data !== 'object') return
  // 遍历data变量里面所有可枚举的值
    reactivate(data, key, data[key]) // 后面会定义

function reactivate(data, key, val){
  // 柯里函数,遍历掉data里面可能有的对象以及数组等,
  // 在这个示例里面我们没有搞玩得那么复杂
  // 在JavaScript里面,所有的东西都是“对象”
  // 包括各种原始数据类型的值
  // 所有的“对象”都可以通过.defineProperty
  // 方法来设置新属性
  Object.defineProperty(data, key, {
    enumerable: true         // 可枚举
    , configurable: false    // 不能再被define
    , get: function() { return val }
    , set: function(newVal) { 
      val = newVal

// 你可以试试运行如下代码
// data.msg = '我有setter,我是reactive的'
// data.newlyCreated = '我没有setter,我不是reactive的'


  1. 学习资源
    1. 浏览器安全
    2. 被黑网站:百度搜索hacked by || 谷歌搜索hacked by
  2. 常见前端攻击思路
    1. 钓鱼:攻击者伪造网页,(通过邮件等)引导用户输入密码等信息
    2. 篡改:攻击者入侵服务器,篡改网页内容
    3. 篡改之暗链:攻击者篡改网页的时候在网页上加上指向指定网页的连接,提高这些网页的曝光度
    4.  点击劫持:引诱用户点击网页上透明度为0的iframe上的按钮
    5. 隐蔽式的URL跳转,比如:
    6. XSS(Cross Site Scripting),攻击者在服务器上注入恶意脚本,或在受害者的浏览器里注入恶意脚本的攻击方法
    7. CSRF(Cross-Site Request Forgery),受害者在正常网站)正常登陆账号产生cookies的同时浏览攻击者网站),攻击者在受害者未知的情况下,通过脚本甚至HTML元素等给good.com发起网络请求的攻击方法
    8. 隐蔽在图片内的恶意代码,参考Malware Hidden Inside JPG EXIF Headers
  3. 常见后端攻击思路
    1. SQL注入,比如所为的万能密码“  admin ‘–  ”
    2. 命令注入:如果传给服务器端PHP脚本的字串式变量里包含system, exec, shell_exec, eval等函数来操作服务器
    3. 常见文件操作漏洞
      • 文件上传漏洞:上传文件的地方上传PHP文件,并远程执行这个PHP文件
      • 任意文件下载漏洞:攻击者给管理下载文件的PHP文件传自定义的参数,以期下载正常渠道无法下载的文件
      • 文件包含漏洞:比如,如果index.php与admin.php需要操作数据库的部分都存在于同一个叫conn.php的文件,那么攻击者知道了index.php的内容就知道了admin.php操作数据库的逻辑了
  4. 综合性网页漏洞扫描软件
    1. AWVS
    2. Netsparker
    3. AppScan