Web 开发技术分析，前端开发学习历程。
282 篇文章原文地址: http://codepen.io/Mamboleoo/post/tunnel-animation-1 @Louis Hoebregts 如果你对下面的效果非常好奇的话，那么今天这篇文章就是要告诉你们如何实现一个类 虫洞的特效动画。 同样我也在 agency’s 2017 使用了这样的效果。而我将在这篇文章中解释其中的原理和基本实现。 我们需要创建一个管道然后在里面会设置一个相机运动。然后我们会丰富我们这个管道的外在样子。 我们使用了 Three.js 来完成基本的动画，如果你对 Three.js 不怎么了解，你可以先阅读 Rachel Smith's posts 来了解一些基本知识。 建立场景 作者使用的codepen编辑，不过这里会补上欠缺的 首先我们加入一些基本 Three.js 代码来实现 一个基本的 Three.js Demo. 在 html 代码中添加 canvas <!DOCTYPE html> <html> < 详情 »
Webpack2 已经出来许久，但是由于配置写法的变化，很多人还没有迁移。关于 webpack2 的一些变化可以阅读这篇文章 What's new in webpack 2。 如果你计划从 webpack2 迁移到 webpack2 的话，关于配置如何进行更改可以从 这里 知道。但是今天主要是推荐另外一个命令行工具 webpack CLI。 它可以快速的生成webapack 配置和 进行配置迁移。 快速开始 首先我们得全局安装 webpack-cli： npm install -g webpack-cli 安装完成后我们可以通过使用 webpack-cli init webpack-addons-demo 来初始化一个配置目录文件，文件内容可以看 这里。当然webpack的目录模板也是可以自己开发的。 webpack 迁移 使用 webpack-cli 可以方便的完成我们从 v1 迁移到 v2。 直接使用命令: webpack-cli migrate webpack.config.js webpack 详情 »
最近重新写了 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 然后进入创建的项目， 详情 »
