#javascript #动画 #processing #p5

processing p5 js 动画与游戏制造

改 2017 6.13 processing 动画转换 转向 js客户 这意味着 我可以 在 codepen 上展示 减少一下，js加载流量 如何使用 Processing 有自己的 动画规则语言 较为易懂易用 See the Pen CSS ICON: right double quote by braveyo (@china-boy) on CodePen. 现在 你只需要一个 p5.js fire.html fire.html <html> <head> <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script> <script src="sketch.js"></script> </head> <body> </body> </html> sketch.js // Global variables function setup() { createCanvas(640, 480); } function draw() { if (mouseIsPressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); } 就这样 就是上 显示的 ...

#hexo

放原网页首页进来

把完整的网页放进，hexo中 我做了一下步骤 在不影响，快捷命令 hexo g -d 1. 原 html文件 放进根目录 source hexo 根据 source 生成静态文件夹. 所以，放source才能被 看到 2. 在 html 文件中 第一行 写下 --- layout: false --- 不能被模版化 3. 再把 css 之类 一起放进 source 就成 最好一个文件夹，用 打包工具。 4. 把我的以前，简介域名，更换到 home.html index.html 是首选，以前 用 home.html 提示，如果想，整个demo 文件夹 单纯 copy 过去 _config.yml ... skip_render [floder/*, floder/**/*] 具体看这issue

#Redux #React

Redux 基础

一个世界(store) redux的中心思想，一直是共享数据的理念 只有一个更改数据的接口dispatch 一个全局的共享数据(store)之外, react本身 state props ref.. 可以说成是 本地数据或继承数据 创造数据中心 import { createStore } from "redux" const store = createStore(reducer); 打造数据逻辑结构 reducer Redux 把 数据逻辑结构 叫 reducer const reducer = function( state, action ) { if (action.type === "Something"){ //为什么叫 逻辑 ,就因为 if if if //你可以加1 //return state+1; //返回值，自动改变原有数据。 return state; } if (action.type === "Another"){ return state; } return state; } 行动属性 action 行动 就像 行动代号，一样的存在 ...

#react

React.Component use class or className

React 中 继承 React.Component react v15.4.1 一般来说的做法是 外层元素 用 className 里层元素 也用 className 而在 fackbook文档-web Component 中 例子中 x-search 元素 却是要使用 class 才能 赋予 css 正确的样式 class HelloMessage3 extends React.Component { render() { return <div className='new'> className='new' <x-search class='new2' >{this.props.name}</x-search> <span className='new2'>好</span> class='new2' </div>; } } ReactDOM.render( <HelloMessage name='1' />, document.getElementById('root') ); Codepen Demo 参考 Codepen 参考 .new{ color:red; } .new2{ color:blue; } 。。。。未完待续

#webpack #less #Autoprefixer #postCss

webpack+less+Autoprefixer

webpack 前端打包工具 js css 图片 之类 压缩 生产化 现在，配置其中一项，css文件的加载器，loader 不同的是，配置结果，是为了，把less > css + 补全浏览器前缀 还有 babel js 语法 postcss.config.js 启动补全前缀 module.exports = { plugins: [ require('autoprefixer') ] } webpack.config.js (babel 语法，css，less文件解析补全,合并到一个‘style.css’) var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\. ...