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

开发

  • 免费静态资源CDN整理

    / 分类: 开发 / No Comments

    资源多, 比较靠谱的CDN:

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

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

    例子: //cdn.jsdelivr.net/g/[email protected](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

  • 解决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

  • nodejs配合sass监听项目文件变动自动生成css文件

    / 分类: 开发,工具,实践 / No Comments

    以前弄scss只能在ruby下面, nodejs版less.js已经比较成熟, 而sass.js(1)不支持scss(后面作者又去开发Stylus了~), 后面出现的scss-js(2)已经错过时机(支持scss语法有限, 已很久没更新了).
    这大概是导致目前less在国内爆发的一个原因吧. 排除环境依赖影响, 个人感觉sass比less好很多, 相信不少同学也这样认为~
    对比了目前的4种css预处理语法: sass(scss)/less/stylus/closure-stylesheets, 还是更喜欢scss.

    用nodejs写小工具蛮适合的, 但之前苦于sass在nodejs下没有比较好的package. 终于node-sass(3)出现, 目前npm里最好的sass package, 测试了一些scss文件基本都OK, 语法有误时也会返回错误信息.

    基于node-sass写了个小工具, 监听项目目录, 当文件夹里的.scss文件被修改则立即编译成css文件, 使用:
    1. sudo /path/scss.js # 载入已写好的配置, 侦听多个项目;
    推荐这种方法, 把多个项目的配置信息写到 scssConfig.js中, 不需要额外的参数.
    2. sudo /path/scss.js -build # 读取所有的.scss并编译成.css文件;
    3. sudo /path/scss.js -clear # 清除错误日志(如果配置了 scssConfig.js里logDir的路径);
    4. sudo /path/scss.js /path/project1/ /path/lib/ # 临时监听project1目录, lib为.scss里@import的path(无@import,可以省略);

    源码放在: https://github.com/kairyou/f2e-tools/tree/master/scss

    附送使用node-sass时遇到的问题以及解决方法:
    1. error reading values after :
    读取value出错, 可能是颜色错误不是6位或3位, 比如:color:#abcde;
    2. .scss里面写: @charset "UTF-8"; 会报错: top-level blockless directive must be terminated by ';'
    @see: https://github.com/andrew/node-sass/issues/23
    3. error reading values after opacity / progid
    使用: unquote("..."); @see: https://github.com/hcatlin/libsass/issues/72

    文中提到的sass几个package的link:
    1) sass: https://github.com/visionmedia/sass.js
    2) scss: https://github.com/bmavity/scss-js
    3) node-sass: https://github.com/andrew/node-sass

    有了nodejs版, 其他语言(非ruby), 比如PHP的phpsass/scssphp等就可以忽略了~