Web 开发技术分析，前端开发学习历程。
282 篇文章Thera 是一款针对移动混合应用开发的编辑器，它适用于通过weex, Luaview，React Native编写的应用，支持调试，语法高亮，代码片段等常用编辑器功能，同时还可以实现真机模拟和调试。实际上它的底层参考了Atom的设计，基于 Electron ，可以通过JS 和 Html + Css来实现编辑器的基本的功能。由于 thera 是经过深度改造，和 atom相差较大，因此我们可以直接修改源码来build 一个自己的浏览器。 首先我们克隆项目: git clone https://github.com/alibaba/thera 然后进入项目，我们执行 npm install。 安装完成后，我们需要 script下面去执行 npm 包的安装，用于我们 build的依赖 cd script && npm install 接下来，我们需要手动去进行 apm 包管理器的代码下载，因为 Thera 有实现自己的 详情 »
Atom是Github推出的一款代码编辑器，抛开对于编辑器基本功能的实现,Atom的架构体系也值得大家学习，Atom是通过前端的HTML + JS + CSS借助 Electron来实现构建客户端程序的架构，同样这样的实现也有利于自己扩展更多的插件，很多开发者可以通过JS去实现插件的基本开发，这里梳理下插件开发的基本要点。 快速开始 apm 是 Atom 的一款命令行工具。我们开发插件需要用到它。我们先确保我们安装了 apm. 可以点击左上角的 Atom -> Install Shell Commands 来进行安装。完成之后我们可以输入 apm -v: apm 1.15.3 npm 3.10.5 node 4.4.5 x64 python 2.7.10 git 2.11.0 我们开发插件通过 Package Generator 命令来实现快速创建一个插件开发的基本文件。通过快捷键 输入 详情 »
Nuclide是 facebook 针对Atom出的一款编辑插件，你可以通过它开发，调试 React 以及 React Native的程序。这也是FB首次将自己的开发流引入到第三方编辑器中。 当然这里记录的不是这个编辑器怎么用，怎么用可以看这里.这里主要是记录对源代码的阅读和解析。 目录结构 Nuclide 的目录结构并非和标准的 atom 插件生成包的目录一致。 + lib // 存放的是整个Atom 插件功能的JS资源 + node_modules + pkg // 依赖的包，插件功能的具体实现在这个里面 + nuclide-code-hightlight 代码高亮的功能 + nuclide-console 实现控制台输出功能 + ... + resources + package.json ... 不是很重要的文件 lib 目录 熟悉 Atom插件开发的应该都知道，我们实际上所定义的菜单按钮或者command的这些都是通过在这里面的JS实现的，而我们首先需要制定项目的入口文件，也就是lib/main-entry.js。 main.js main.js 实际为 nuclide 做了配置的主要事情，我们看源码就知道，它执行流程如下： 设置默认的配置 读取 pkg 目录下的包的package. 详情 »
Weex正如它的目标， 一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升，我们可以通过一套代码，实现web，android, iOS的三个平台上运行。自己最近尝试了一次借助weex的插件机制，使用Weex-Amap地图插件 可以开发 LBS 相关的应用。 首先我们先来看下运行的效果吧: iOS 版 Android 版 截图数据仅供参考 它大概具备下面的一些功能; 统计用户在运动过程中的距离累计，时间计算等。 存储用户的运动数据 使用地图定位和距离计算的API，实现距离统计。 显示地图折线，通过对定位的数据地理位置进行折线绘制 统计用户运动的数据，计算总距离和时间 点击用户的历史记录，可以查看轨迹 感觉和大家所用到的app功能相差不多了，但实际上我们借助 Weex 和 Weex-Amap 插件可以非常快速的实现这些功能，下面我们来看下具体怎么实现吧。 使用 weex-toolkit 创建项目 首先我们按照官网的教程安装weex-toolkit。如果已经安装过请忽略。 $ npm install -g weex-toolit 安装完成后，我们创建一个项目目录，比如running-app。 weex create running-app 大家可能会看到下面的提示，输入y安装即可。 详情 »
weex-amap 一款高德地图 Weex 插件，它具备了地图的基本使用功能，包括地图展示，添加坐标点，控制地图缩放，在地图上添加折线或者圆形等图形，同时也具备地图的一些基本计算和判断等功能。而且如同 Weex 的能力，它是三端都支持运行，这样你可以通过一套代码实现三端的地图功能。 使用效果预览(iOS版)： 快速开始 使用插件，我们需要初始化一个工程项目，然后将插件添加进去。 weex create mapapp cd mapapp # 你可以自行添加ios 或者 android weex platform add ios # 添加地图插件 weex plugin add weex-amap 请确保你安装了最新的 weex-toolkit 这样你的项目里就具备了高德地图的插件功能。 先来一段基本的地图展示，编辑你的weex文件 <template> <div class="container"> <weex-amap class= 详情 »
最近花了些时间，更新博客的一些样式。说说一些小细节。 火影完结 上周四火影完结了，大概这是自己最喜欢的一部动漫，没有之一。这次博客改版，网站的图标和logo都换成了简版的 卡卡西风格。 去掉了iconfont 这次博客去掉了iconfont，把图标全部换成了svg，svg已经成为了主流，而且自己本来对图标的需求就不是那么大。不过自己还是很喜欢themify 这个字体，设计的很漂亮。 更新了slide 和 navigation 之前的slide是svg曲线过度效果，这次换成了旋转的切页效果，参考地址在这里: https://tympanus.net/Tutorials/SlidingHeaderLayout/layout-multi.html 博客内容后增加了个人的社交站点 主要是页是为了各个站点的互通，还有就是为了尾巴的一些友情链接，可以给朋友的站点留些位置 博客主题依旧是免费试用的: 你可以前往这里下载 Ghost-theme。欢迎反馈。 详情 »
写一些react插件，大家会引入CI集成测试。这样有助于开源项目的质量。尤其引入了karma 进行浏览器的自动测试。 自己写react.js的开源组件的时候用的是 Airbnb Enzyme + Karma的测试环境。这个时候我们需要调用chrome测试，通常我们在 karma.conf.js 指定 browsers 参数为['chrome']。但是在CI的测试环境中。会提示 Cannot load browser "[Chrome]": it is not registered! Perhaps you are missing some plugin? 这个时候需要我们对测试环境做个判断重新指定浏览器，参考如下： const path = require('path'); let browsers = ['Chrome']; // trvis env if (process.env.TRAVIS) { browsers = ['Chrome_travis_ci'] 详情 »
其实很多时候我们都是fork完别人的代码然后快速提交，然后发一个PR过去就好了。但有的时候我们也会遇到需要长期保持我们fork的项目与fork的源保持一致。粗暴一点的做法，就是删掉当前的repository然后再重新fork一个。当然我们还有更好的方法。 下面用自己fork的react-hot-loader作为例子。自己fork了gaearon的 react-hot-loader,然后自己clone了一个项目在本地。这个时候进入项目，我们可以使用git remote -v可以看到我们的clone源。比如过了几天，对方项目新增了分支或者新的代码，这个时候你希望自己的项目也能够保持与原项目代码进行同步。这个时候我们可以这样做: 1 配置远程的upstream 地址 git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git 而我这里的地址也就是我fork的地址 https://github.com/gaearon/react-hot-loader 2 这个时候你可以执行git fetch upstream 进行对upstram的代码更新。 大概你就能够看到一些更新的信息。 3 进行代码合并 这个时候我们可以用git merge合并我们希望从远程更新后的分支或者主干代码。比如: 参考 configuring-a-remote-for-a-fork Syncing a fork 详情 »
在flat design(扁平化的设计)中，Long Shadow （长投影）被看着屡试不爽的设计技能。比如下面这张，非常经典的长投影设计: 摄影师选择长投影通常是给图片带来戏剧效果， 在自然界中，长投影发生在黄昏的时候，太阳接近地平线时，水平地面上的物体俯瞰就会有长投影的效果。在界面设计中我们通常采用了模拟45度角的效果，模拟阳光从西北角上射来，从而与设计的主题形成鲜明的对比效果。使用photoshop制作长投影有很多种方法，你可以阅读常用的四种方法创建长投影效果,自己平时最喜欢用的也是第四种，通过图层复制和移动来达到这样的效果,比如自己在behance上传的这张图片， 大致原理就是 你复制一个当前图层，选中图层样式，填充黑色，然后将其移到原图层下面。然后使用鼠标或者滤镜都可以实现平移，友移一个单位和下移一个单位。 然后，我们再复制这个图层，再平移一次。然后合并这两个阴影图层 然后我们再重复动作，即把这个图层复制一次，向下移和向右移动2个单位。再执行合并。依次类推复制，移动偶数倍单位，合并，然后再重复。 当然你用滤镜->其他->位移会更加方便 大致就是这样的效果，然后最后设置下透明度就好。 上面说的是设计，前端如何通过css代码来实现这样的效果？大家第一时间想到就是css3已经支持的text-shadow 首先我们给背景添加一种比较突出的颜色吧，自己强烈安利flatcolors这个网站，里面有很多配色方案，随取随用。 详情 »
原文地址： https://bitsofco.de/optimising-gifs/ @ireaderinokun 和很多人一样，我喜欢在自己的站点用gif。可以非常好的突出某些功能。比如下面模仿 itunes的轮播 不过我们不得不面对一个问题，就是gif太大，像上面的图片，大概有 11.4mb。最近自己在阅读很多别人的文章时候，也发现，由于自己文章存在gif导致网站加载过慢。gif的使用了无损的算法，每一帧都是一张gif图片，这意味着在图片压缩时候，不会存在信息丢失，这也就是为什么gif这么大。 为了解决这样的问题，我们需要做一些事情。 使用html5 video 感觉惊喜的是采用视频的格式mp4活着webM都所用的文件大小都小于使用无损压缩的 gif正因如此，一个解决方法就是，替换掉gif采用mp4活着webm格式的视频，使用自动播放和循环，这样让人会有gif的样子。 通过给video设置一些属性，我们可以让video去模拟gif播放的效果： autoplay 自动播放，用户无需点击 loop 无限循环播放 muted 尽管gif没有音轨，但是ios自动播放还是需要设置这个属性 playsinline ios safari上确保视频不会全屏 poster 制定视频下载时候的显示的图片 如同下面这个 “视频” 居然 1m不到 😂 将gif 转换成webm你可以到CloudConvert进行转换。 详情 »
