Web 开发技术分析，前端开发学习历程。
284 篇文章React-core-image-upload is a really light-weight plugin for react.js developers to upload his images. Now you could also compress and crop image via this plugin. The xhr2 help us to gain more ability to handle files. Last two days, we were trying to migrate Vue-core-image-upload to react.js one. And all the new features of Vue-core-image-upload 详情 »
之前做 weex-svg 的时候，开发者第一次接触 SVG （手写那种，虽然很多情况都有设计师使用 AI 来完成这项工作，但还是不排除需要利用到 svg 的每个 元素）。 才开始，大家都会困惑于 viewBox 和 viewport这两个属性，大家可能也会看到 svg 代码中的千奇百怪。是的，自己也曾为此困惑，宝宝当时内心: 之前自己在做 SVG 学习笔记 的时候，也曾翻译过 Jakob Jenkov 的 关于 [viewport 与 viewbox] (http://tutorials.jenkov.com/svg/svg-viewport-view-box.html) 的区别。 翻译地址: http://events.jackpu.com/svg/#/prop-viewbox-and-viewport 今天再详细的说下这两者的属性。 viewport viewport 也就是 可视区域 详情 »
原文地址: 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 设计。 如何实现保持用户的持续增长 详情 »
