专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

开发

  • 免费静态资源CDN整理

    / 分类: 开发 / No Comments

    资源多, 比较靠谱的CDN:

    • www.bootcdn.cn:
      更新快, 用的又拍云

    例子: //cdn.bootcss.com/react/15.1.0/react.min.js

    例子: //cdn.jsdelivr.net/g/react@15.1.0(react.min.js+react-dom.min.js)
    或: //cdn.jsdelivr.net/combine/url1,url2,url3

    • cdnjs.com:
      国内访问较慢, 例子: //cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js
    • unpkg.com:
      也使用的cloudflare的cnd, 更新快, react官方文档cdn部分也写的这个.

    资源少或更新慢大厂cdn:

    如何选择靠谱的

    • 国内项目: 貌似只能选bootcdn了(未使用较新js库的项目也可以选择大厂cdn). 非常可悲, 同步更新cdnjs的国内CDN, 没一个大厂能提供
      国外项目: jsdelivr/unpkg.com/cdnjs.com

    测试靠谱程度, 可以用下面几个地址测试下:
    http://ce.cloud.360.cn/
    http://www.17ce.com/
    http://tool.chinaz.com/speedtest.aspx

    • 使用多个CDN(防止某个CND挂掉):
    // 拿jQuery举例(cdn1挂掉, 使用cdn2)
    <script src="//cdn1.com/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src=//cdn2.com/jquery.min.js><\/script>')</script>
  • 使用nodejs开发桌面客户端应用

    / 分类: 开发 / No Comments

    这里主要针对node-webkit和atom-shell, nodejs下开发桌面应用也有其他可以选择(大体都是基于Chromium + nodejs), 主要这两个相对比较流行, 源码也一直保持更新. 目前node-webkit文档/例子可能多一些, atom-shell相对少一些.
    详细区别什么的自己去搜吧, 自己使用中体验到的:

    • node-webkit入口是html, atom-shell入口是JS;
    • node-webkit功能相对多一些, 两者都可以把代码打包(一个是.nw,一个是.asar)放到应用里面;
    • 即使自己写了几KB的代码, 但最终生成的程序都至少几十MB, node-webkit生成的应用比atom-shell相对小一些;
    • 他们一些概念比较类似(可能方法不同), 熟悉一个后, 对熟悉另一个应该是有帮助的;

    性能什么肯定没有原生的好了, 但是用一种语言就可以生成cross-platform的软件, 这好处也是显而易见的; 总之开发一些简单的小应用, 还是非常适合的, 至少不需要再去学2-3门编程语言了.

    自己写了简单的例子, 源码放在: github.com/kairyou/create-desktop-app-with-nodejs
    里面的脚本, 在Mac下面可以直接运行程序, 或者可以直接生成/OSX/windows/Linux三个平台的程序.

    自己偏向atom-shell多一些, 不过目前两个还是都要熟悉下, 可能有些特殊的功能, 必须要使用其中一个才能满足~

    这两个的源码和官方文档:
    github.com/rogerwang/node-webkit
    github.com/atom/atom-shell

  • 升级IE11后 的一些问题

    / 分类: 开发 / 2 Comments

    主要针对开发人员使用的一些障碍

    1. F12开发人员工具
    "仿真"面板只有"文档模式"(可切换IE7-IE10), 去掉了"浏览器模式"(IE8-IE10), 主要的影响就是:
    彻底不支持IE的条件注释了(虽然IE10的标准模式就已经不支持, 但IE10下支持切换"浏览器模式").
    所以IE11下面无论怎么设置都不支持[if gte IE xx]这样的条件注释了, 如果条件注释里加载了css/js, 在IE11测试IE7-IE9就只能暂时把条件注释去掉了.
    测试用IETester v0.52(windows8.1), IE9会崩溃IE10不能用, IE7/8貌似是正常的.
    再就是安装虚拟机了(www.modern.ie/zh-cn/virtualization-tools有很多版本可以下载), 硬盘不够大的情况为了测试安装几个windows是很浪费的~
    当然这3中方法测试IE体验都不够好, 如果一个平台就能解决那是最好不过了, 谁有更好的解决方案可以共享下~
    另外, 切换IE11文档模式来测试css/js都是正常的(比如IE8模式的canvas是不支持的), 所以这部分应该是没问题的.

    2. 代理服务器
    依然不能用SOCKS 5的代理. 还是需要使用HTTP方式, 而且必须要取消勾选"选项-高级-启用增强保护模式"并重启浏览器才可以使用代理.

  • 解决Mac下SublimeLinter的Unsafe Characters警告

    / 分类: 开发,实践 / 1 Comment

    Mac下编辑JS文件, 如果是中文字符的行会警告: This character may get silently deleted by one or more browsers.

    SublimeLinter 的官方文档http://goo.gl/VYzZ0, 里面也说的含糊不清, 只是告诉要装nodejs或设置sublimelinter_executable_map.
    On Mac OS X, you must install Node.js if you plan to edit Javascript or CSS files that use non-ASCII characters in strings or comments, because JavaScriptCore is not Unicode-aware.
    OS X默认的JavaScriptCore(jsc)不支持非ASCII字符, 所以会报上面的警告, 使用nodejs才行.

    debug了下SublimeLinter的源码, 发现把Package Settings->SublimeLinter->Settings - User加上:
    "sublimelinter_executable_map":
    {
    "javascript": "/Users/leon/.nvm/v0.10.8/bin/node" // which node
    },
    就OK了, 开始还以为要设置"node":"node path", 原来是设置"javascript"..

    没安装nodejs到/usr/local/bin, 如果使用其他编辑器里的jshint/jslint应该也会遇到这个警告, 可以尝试修改node路径来解决.

  • mac osx下快速搭建nodejs环境

    / 分类: 开发 / No Comments

    直接安装nvm(可以指定node版本, 切换不同版本)

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
    
    # 编辑 ~/.bash_profile 或 ~/.zshrc, 加入下面3行:
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
    # source ~/.bash_profile 或 source ~/.zshrc
    
    nvm ls; # 版本列表
    nvm install v8 # v8.xx 的最新版, nodejs.org/#download 查看最新版
    nvm alias default 0.10 # 加到环境变量
    node -v
    # npm nodejs新版已经集成, 无需单独安装.
    npm install uglify-js -gd #uglifyjs
        uglifyjs -V

    Ps: 安装方式可能会有更新, 可以看下NVM的最新文档: https://git.io/fbpVf