CSS知识拾遗(10-11):CSS像素与物理像素事宜

  1. 为什么要合并.css文件?
    因为,无论你的<link>元素里面的media属性如何声明,最新版本的主流浏览器都会下载你所有的<link>元素的src属性里面声明的CSS文件。
  2. CSS像素与物理像素(Physical Pixel)
    // 下面的HTML代码规定一个图像元素的宽度为“300 CSS像素”
    <img src="img.png" width="300"/>
    // 由于移动设备的物理像素越来越高,
    // 传统适用于桌面浏览器的像素在移动设备上看来会很小很小。
    // 因此,有了像素比(px ratio)
    // 解决方案有:
    // .svg方案(需fallback)
    <img src="img.svg" width="300" />
    // srcset属性方案(代码少)
    <img src="default.jpg" width="300" height="300"
      srcset =
        "hi.jpg 2x
        , uhi.jpg 3x"
    >
    // <picture>方案(最佳方案)
    <picture>
      <source media="(max-width: 720px)" src="hd.jpg">
      <source type="image/webp" media="(max-width: 720px)" src="hd.webp">
      <source media="(max-width: 1080px)" src="fhd.jpg">
      <source type="image/webp" media="(max-width: 1080px)" src="hd.webp">
      <source src="default.jpg">
      <img src="fallback.jpg" alt="">
    </picture>
    // 如果浏览器不支持<picture>元素,它会使用它里面的<img>
    // background-position方案
    <div id="imageHost"></div>
    <style>
      #imageHost{
        background-image: url("default.jpg");
        background-repeat: no-repeat;
        background-position: 300px 300px;
      }
      @media
        (min-width: 720px)
      {
        #imageHost{
          background-position: 0px 0px;
        }
      }
    </style>
    // background: url("...") 方案
    <div id="img"></div>
    <style>
    #img{
      background-color: rgb(236,236,236);
      width: 300;
      height: 300;
    }
    #img{
      background: url("path/to/default.jpg") left top no-repeat;
    }
    
    /* 为确保兼容性 */
    @media
      (-webkit-min-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    }
    @media
      (-min--moz-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    @media
      (-o--moz-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    }
    
    @media
       (min-resolution: 2dppx)
     {
       #img{
         background: url("path/to?retina.jgp");
       }
     }
    </style>
    // JS方案
    <img id="img" src="default.jpg" />
    <script>
      if(window.devicePixelRation >= 2){
        document.getElementById("img").src = "retina.jpg";
      }
    </script>
    // iOS专用方案
    #photoHostEl {
      background-image:
        -webkit-image-set(
          url("default.jpg") 1x
          , url("retina.jpg") 2x
     );
      width: 100px; 
      height: 100px;
    }
    // 让后端解决
    

QR Codes / 二维码工具

  1. 现成
    1. 付费( && 编辑器):第九工厂(艺术二维码模板)
    2. 付费( && 编辑器):草料二维码(二维码模板以及渠道统计)
  2. 编辑
    1. 本地
      1. .gif通用 && 付费:Adobe Photoshop
      2. .svg通用 && 付费:Adobe Illustrator
      3. 图片融合:Halftone QR Codes / Visual QR Code Generator
      4. JavaScript本地:qrcode.js
    2. 在线
      1. 图片融合:QArt Coder
      2. Google Chart API:
        <!-- 中国IP访问这个API的速度很慢 -->
        <img src="https://chart.googleapis.com/chart?chf=bg,s,ffffff&cht=qr&chs=120x120&chl=YOUR_CONTENTs&chld=|0" />
  3. 阅读器
    1. Chrome Extension:right-click QRcode reader
    2. iOS 11 Camera app
    3. (Android) Barcode Scanner
  4. 方案
    1. .gif动画QR Code(画质一般,性能一般,平台支持较好):
      1. 用Photoshop(的时间轴功能)制作/处理.gif文件,生成.bmp文件 >>
      2. 通过Visual Code Generator将.bmp文件们转化为二维码图片 >>
      3. 通过Photoshop将二维码图片们合成.gif文件
    2. .svg动画QR Code(画质最好,性能较差,平台支持较差):
      1. 用Photoshop(时间轴功能)制作/处理.gif文件,生成.bmp文件 >>
      2. 通过Visual Code Generator将.bmp文件们转化为二维码图片 >>
      3. 用Illustrator(的描边功能)将二维码图片们转换.svg文件们
      4. 通过文本编辑器或Illustrator将.svg文件们合并成一个.svg文件
      5. 通过CSS或者JavaScript来将.svg动画化

亲爱的,周末干嘛(29-31):Geek

愿有情人都是geeks

  1. 养蚂蚁
    1.  好处:
      • 较低的经济以及时间低成本。嗯,养猫养狗挺费钱的,而且很耗时间,特别是狗,有些猫也是,粘人;而一勺蜂蜜能养一锅蚂蚁很久了
      • 较低的感情投入。其他常见宠物如猫狗等一般都会先你一步死去,很伤感的。
      • (几乎)没有味道,且不占地方。一般比养鱼还省地方。另外,蚂蚁本身就喜欢狭窄一点的空间,空间太大,他们反而会把部分空间用作垃圾场,不卫生也不好看。
      • 很cool,很geek。其实只需要这个理由
    2. 坏处:
      • 你的伴侣/房东/房友/朋友可能不乐意。如果你的女朋友不同意,你或许该考虑换个女朋友了,她的思想不够geek
    3. 参考:
    4. 建议:
      • 找本地蚁后(保护生态),挖本地山泥
      • 发社交网络时,注意屏蔽那些不喜欢蚂蚁的人群
  2. 组装一个特斯拉线圈(音箱)
    1. oneTesla(特斯拉线圈音箱)
    2. 淘宝
    3. 自己DIY
  3. 自制电子音乐做手机铃音
    1. 制作:
      1. JavaScript:Tone.js || Scribbletune
      2. 手机app:
        1. iOS && 部分免费 && 傻瓜:Melodist(拍照做音乐)
        2. Android & iOS && 部分免费 && 手动:Medly
        3. Android & iOS && 免费 && 傻瓜:HumOn(哼歌做音乐)
        4. Android & iOS && 免费 && 半傻瓜:Remix Live
    2. 导入
      1. iOS:iTools by 联想天空/ThinkSky
      2. Android:略

.WebP格式事宜

WebP格式事宜

  1. 简介:.WebP是谷歌公司研发的一种性能(文件大小)极其优越的开源图片格式。其性能的示例不妨参考又拍云的网页。
  2. 优点:
    • 无损压缩的压缩率高,有损的更高(代替.png以及.jpg)
    • 有损于无损的.WebP都支持透明背景(代替.png)
    • 支持动画(代替.gif)
    • 有免费的CLI图片转换工具
  3. 缺点:
  4. 建议:
    • 让Blink引擎浏览器的用户享受.webp格式带来的便利

一份有趣的JavsScript (ECMAScript 3rd Edition)题目

个人认为,很多JavaScript(面试)题与程序员解决现实问题的能力的关系不大。但是,如果你以编程为乐的话,做题挺好玩的。

原题在这里。下面所有题目的问题都是:“下面的程序的运行结果是?”

  1. 关键词arguements
    (function(){ 
      return typeof arguments // "object"
    })();
  2. 变量声明
    var f = function g(){ return 23; };
    typeof g(); // err, g not defined
  3. 原始数据
    console.log( (function(x){
      delete x;
      return x;
    })(1) ); // 1
    // 原始数据delete不了
  4. 变量声明
    var y = 1, x = y = typeof x;
    console.log(x); // "undefined"
    // 第一行做了这些事情
    // 1)声明了变量y
    // 2)给变量y赋值1
    // 3)声明了变量x
    // 4)给变量x赋值前就使用“typeof x”,“typeof x”返回字串"undefined"
    // 5)把变量x以及变量y赋值为“tyoeof x”,也就是字串"undefined"
  5. 把函数传入函数
    (function f(f){
      return typeof f(); // "number"
    })( function(){return 1;} );
  6. this的指向
     var foo = {
       bar: function() { return this.baz; },
       baz: 1
     };
     (function(){
       return typeof arguments[0]();  // "undefined"
     })(foo.bar);
    // this指向当前对象,arguments
  7. this的指向
    var foo = {
      bar: function(){ return this.baz; },
      baz: 1
    }
    typeof (f = foo.bar)(); // "undefined"
    // f被匿名执行,this指向Window
  8. IIFE
    var f = (function f(){ return "1"; }, function g(){ return 2; })();
    typeof f; // "number"
    // 两个并行的IIFE,总体返回值为取最后一个函数的返回
  9. 函数的提升与类的强制转换
    var x = 1;
    if (function f(){}) {
      x += typeof f;
    }
    x; // "1undefined"
    // 在if语句的条件中,通过function声明的变量与通过var声明的变量
    // 它们提升的行为不一。f
    // Function声明的变量不会称为全局
    // Function声明的变量甚至不可以被if语句内的程序所调用
    // 因此,typeof f的结果是"undefined"
    // 数字 + 字串,结果等同于:字串化的数字+字串
  10. typeof
    var x = [typeof x, typeof y][1];
    typeof typeof x; // "string"
    // 第一行代码等同于:" var x = typeof y; "
    // tyoeof返回值类型为字串
  11. 对象的写法
    (function(foo){
      return typeof foo.bar; // "undefined"
    })({ foo: { bar: 1 } });
  12. 函数的提升
    (function f(){
      function f(){ return 1; }
      return f();                    // 2
      function f(){ return 2; }
    })();
  13. 构造函数
    function f(){ return f; }
    new f() instanceof f; // false
  14. with
    with (function(x, undefined){}) length; // 2
    // with我不懂