Web 开发技术分析，前端开发学习历程。
280 篇文章最近重新写了 Ghost-theme 的主题。其中主要是取消了Icon-font，改为了SVG Sprite 。其次非常重要的板块首屏的Slide 和导航重新设计了。先看下具体的效果吧: 视频无法播放，可以查看 gif 图片 Slide 切换 切换动画 slide 的切换主要是利用了transform 和 animation 两个重要的属性。而切换的时间函数则需要用到 cubic-bezier(关于贝塞尔曲线的效果可以参考这里)。然后利用少量的JS和手势库就可以完成了。 基本结构 <div id="slideshow" class="slideshow"> <!-- slide --> <div class="slide"> <div class="bg-overlay" style= 详情 »
We are so happy to release the new version of vue-core-image-upload. We try to fix some bugs and support some new features. As the slogan: Do More For You We try to add some new features to handle the image files via pure javascript. There are some new features: Compress image in local browser Crop image 详情 »
Atom 是目前非常流行的编辑器，除了好用小巧的特点，它丰富的插件也给开发者提供了很多的便利性。 Atom 是基于 Electron 开发的，也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图: 其实我们在完成实际的插件的部分，也就是工作的最上层，使用我们前端最基本的知识去实现基本的需求。当然这一层的实现，可以有很多方式，你可以使用简单的JS 去创建视图窗口，你也可以使用一些框架，比如 Vue.js 以及今天提及的 React。React 最核心的一个目标: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES React 的发展很迅速，现在不仅可以完成普通网站的开发，也能能够开发原生的App(React-Native)，也可以开发 VR 相关的内容 (React-VR), 当然桌面应用现在也是可以借助于 Electron 完成。 今天我们简单实现一个插件，通过菜单按钮，呼出对话框，然后完成输入字符串，并将字符串插入到我们的当前代码中。 创建项目 详情 »
React Native有的时候会出现一些比较奇葩的问题，比如今天这次遇见的，运行 react-native start 然后模拟器打开就是这样红色的错误。😂😂😂 宝宝可是什么也没有动过，突然就坏了。 错误内容就是: ``` bash TypeError: babelHelpers.typeof is not a function. (In 'babelHelpers.typeof(target)', 'babelHelpers.typeof' is undefined) ``` 大概解决方法就是: npm cache clean 然后我们需要在我们的项目添加.babelrc 如果没有的话，然后增加一个presets配置: { "presets": ["react-native-stage-0"] } 当然我们也得安装这个依赖。 npm install babel-preset-react-native-stage-0 --save 这个时候我们重新启动: ./node_modules/react-native/packager/packager.sh start --reset-cache 参考: 详情 »
React-VR 是 Facebook 团队推出的使用JavaScript来开发VR应用的框架，和 React 相似，你可以通过编写组件的形式来进行程序的开发。(写过 React-Native的应该可以很快上手吧。) 快速开始 首先我们需要安装脚手架程序: npm install -g react-vr-cli 安装成功后，我们就可以开始创建项目了。 react-vr init vrexamples 如果初始化过程中，遇见了提示 yarn 依赖安装的问题，你可以进入项目目录，重新安装就好。 初始化成功后，我们进入项目，然后输入npm start , 访问: http:/localhost:8081/vr/ 就可以看到web上的内容了。如果你有VR的设备，你也可以戴上体验下。 编辑代码 这个时候我们打开编辑器， 查看index.vr.js 的源码，写过React-Native的是不是有种泪奔的感觉，的却是这样写的： 'use strict'; import React from 'react'; import { AppRegistry, asset, 详情 »
美国太平洋时间4月18日上午，2017年4月18日 Facebook 将在加州举行2017的 F8 开发者大会 。F8 主要是面向技术开发者的会议，Facebook则会带给大家过去一年里他们的技术团队在人工智能，VR，视频等方向上的研究进展。 B站的直播 F8 Youtube Keynote 每年的小扎都会做 F8 的 Keynote 演讲，阐述公司的发展近况，以及最新的研究成果。大概一个半小时的时间会有一些部门的负责人上台分享，分享团队的近况，当然这是一次最好机会练习听力的机会，不要错过。 2014年的 F8 宣传片: React 以及 GraphQL 在 FacebookF的应用以及未来 (关于 React的话题) The Evolution of React and GraphQL at Facebook and Beyond React 和 GraphQL 颠覆了传统页面的开发，这个分享我们可以了解到 FB 的工程师如何提升开发效率以及应对未来的一些 App 设计。 如何实现保持用户的持续增长 详情 »
2017年的 Google IO 大会还有一个月要开始了，时间定在了美国时间 5月17日。除了值得关注的 keynote 外，这次分享还有 Google 业务线上的工程师带来几天的技术分享，从人工智能，Android，云平台以及 Web 等领域技术一线工程师的议题分享。下面罗列一些个人认为值得关注的议题: Keynote 虽然是凌晨一般都是北京时间晚上1点多开始，但是真的值得期待，每年的开场都会精心设计,小花童鞋是最期待这一项的。Google的各个业务线工程师都会带来过去一年的成功给大家，比如新的Android, cloud platform , deepmind 等。这个近些年国内都会有直播的，GDC也会组织线下的活动的。贴下2013年 Google IO 的开场视频: 直接从6分钟开始看 The Future of Audio and Video on the Web Sam Dutton 用户在网上绝大多数时间都花费在了音乐和视频，而音频和视频占据70%的文件内容，而现在web不需要任何插件就能够提供给用户非常棒的音视频体验，那么接下来我们将分享如何进行优化以及他们的未来。 From AMP to PWA: 详情 »
weex-svg 介绍 近几年 SVG 逐渐成为前端开发的热门技术。我们可以在业务场景中构建我们的图标，以及替代部分位图，随着动画交互的普及，SVG 也成为了大家的选择之一。 今天我们给大家带来如何在 weex 项目中通过 weex-svg 来实现 SVG 的一些图形信息的展示。 我们查阅 weex-svg 的文档，可以了解它目前支持的一些元素和属性有: 基本的图形 rect 矩形 circle 圆形 path 路径 polyline 折线 polygon 几何形 line 直线 linear-gradient 线性渐变 radial-gradient 径向渐变 通用属性 fill 颜色填充 stroke 描边的颜色 stroke-width 描边的宽度 快速开始 weex-svg 在插件市场已经发布了，我们可以通过 weex-toolkit 来添加插件。 首先我们创建一个项目： weex create svgapp 然后进入创建的项目， 详情 »
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 命令来实现快速创建一个插件开发的基本文件。通过快捷键 输入 详情 »
