写这篇博客的起因是我看了Medium上的这篇文章:How I started drawing CSS Images,然后哇哦😦,同样是前端开发,这区别怎么这么大呢?这位作者和我完全点了不同的技能点啊!
看了几个她在codepen上的作品,比如这个皮卡丘,发现用到的技术也并不多,于是我也想试试。
不过有哪个动漫中的人物足够简单,能够用几个基本的几何图形就画出来呢?我想到了一个人,于是我决定画一个《一拳超人》中的卤蛋,不对,是秃头披风侠——琦玉老师。
Life? Don't talk to me about life!
写这篇博客的起因是我看了Medium上的这篇文章:How I started drawing CSS Images,然后哇哦😦,同样是前端开发,这区别怎么这么大呢?这位作者和我完全点了不同的技能点啊!
看了几个她在codepen上的作品,比如这个皮卡丘,发现用到的技术也并不多,于是我也想试试。
不过有哪个动漫中的人物足够简单,能够用几个基本的几何图形就画出来呢?我想到了一个人,于是我决定画一个《一拳超人》中的卤蛋,不对,是秃头披风侠——琦玉老师。
这篇博客是我在学习 Pluralsight上的课程:Building a JavaScript Development Environment 时记下的笔记,仅作个人记录之用。
这门课程系统地介绍了前端开发中的许多工具和术语,从编辑器的选择到项目的部署都进行了介绍,我在学习了这个课程后感觉将之前零散学习的内容串了起来。
顺便一说,Pluralsight网站上面有许多不错的课程,不过价格太贵,需每月付29美元😥。但是,你可以用微软账号加入Visual Studio Dev Essentials 计划,这样就可以免费获得Pluralsight 3个月的订阅了😀。
编程的时候要做许多选择
这门课程介绍了如何在这些选项中做出选择
如果是一个刚接触 React 的新手,当学完了 React 的各种基本概念和语法之后,准备开始实际的开发工作时,他又会碰到各种新颖的名词:npm, webpack, babel, flux, es2015…… 如果以前接触过这些工具还好,否则为了建立一个简单的项目,还需要学习这一整套的流程,而在这中间又会碰上各种坑,这个过程将会非常痛苦。一个解决方案是去 GitHub 上寻找各种模板项目,用 React + webpack + … 作为关键字搜索可以发现许多别人创建的空项目,你可以在其基础上稍作修改然后开始开发。我在学习的过程中就是这么做的,但之后对其中的一些配置项仍是一知半解。
我在这里从头开始创建一个模板项目,并将过程记录下来,一方面希望能给看到这篇文章的人以帮助,另一方面也是加深我自己的理解。
最后完成的项目见这个项目:react-webpack-babel-boilerplate,在建立这个项目过程中的步骤可见另一个项目:create-react-boilerplate-steps,过程被分到了多个文件夹中。
在开始之前先看看项目的文件结构:
- src
- index.js
- App.js
- .babelrc
- index.html
- package.json
- server.js
- webpack.config.js
以上就是我们的项目需要的全部文件了。
接下来我会将这个项目的构建过程分解成几个步骤,你只要按照这些步骤依次进行即可。
前段时间忙着找工作去了,有段时间没有写博客了,上一篇还是三月份的,今天来更新一篇。
最近在学 React.js,也写了一些练习的项目,之前参考网上的一些代码写了一个很简单的 to-do list。对于初学者来说,写个基本的 to-do list 对于理解 React 中的一些概念及语法倒是挺有帮助的。
现在很多的 React 项目中已经开始使用 ES6 来写了,不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的,我这里还是用的还是更熟悉的 ES5 写法,虽然有点落伍了,但若想改成 ES6 版本倒也挺方便的。
前段时间电影《疯狂动物城》上映了,然后我的知乎首页就被它刷屏了。虽然我对这部电影没有任何意见,但作为一个还没去电影院看过的人来说,每看到相关问题一次都是无情的剧透,于是我毅然屏蔽了“疯狂动物园”这个话题。本以为问题解决了,但是接下来我又被迫看到这个问题:
问题上添加的五个话题无一命中,我又被剧透了一脸。算了,既然知乎的屏蔽规则靠不住,那就自己动手吧。这样我的Chrome浏览器扩展——ZhihuFilter就诞生了,点击这里查看Github上的项目。
其实扩展的功能很简单,当打开知乎首页后,扩展会依次检查你的屏蔽关键词列表是否出现在了某一个答案中,如果出现了,就会把这个答案隐藏,取而代之的是提示信息和一个展开答案的按钮。效果如下图所示:
你可以点击图中的按钮来查看答案,之后可以选择再次隐藏或展开。
这篇文章是我去年看到的一个很有趣的项目,还试着模仿它的代码写一个类似的项目出来,不过一直没有完成。这里把原作者的一篇相关博客翻译过来,说不定有更多的人对此感兴趣。
注意:原文中引用了一些墙外链接,请配合梯子食用
以下为译文内容:
具有神经网络大脑的agent为了生存而进化
最近我看到了一个模拟视频,展示了使用进化技术来训练agent,让它们能够避开移动的障碍物。这里使用的方法似乎是NEAT算法的变种。NEAT算法用于神经网络拓扑结构的进化,使其能够正确完成特定的任务。它是为了Unity 5游戏引擎而写的,想被整合进综合的游戏AI中,这引起了我的兴趣。
这个结果很酷而且动起来似乎很优雅,所以我想试着用javascript实现一个类似的demo,这样就可以在浏览器中运行了。在玩了一下基本的实现后,我发现对于障碍躲避问题,一个简单的神经网络就可以高效的完成了,甚至于一个完全连接的神经网络都算是杀鸡用牛刀了。最后我也意识到就算是一个简单的类感知器(perceptron)网络都能够很好地完成任务,而在之前提到的障碍躲避demo中,隐藏单元也并不能够增加多少好处。
简单的感知器图解(维基百科)
因为agent可以在探测到障碍物的瞬间自由地向任意方向移动,而且agent之间不会产生相互作用,因此这个任务变得太简单了,使用NEAT算法的杀伤力过大了。我们使用一个简单的类感知器网络(即单神经元网络),就能让agent有效地完成躲避障碍的任务了。
今天碰到了一个问题,如何让只有一行的文本进行左右对齐。对于英文文本,左右对齐的效果如下所示:
上述效果是使用text-align: justify
来实现的。可以看到除了最后一行之外,段落的其余部分都是左右对齐的。如果我们将text-align: justify
样式直接应用在单行的文本上时,将会像上面段落的最后一行,仅仅是向左对齐。可以看一下下面的例子:
代码:
1 | <p id="justify-para">这是一行没有左右对齐的文本</p> |
结果:
对于汉字文本,因为汉字的等宽特点,文本左右对齐的效果就是每个汉字间的间隔相等。为了实现这一效果,需要利用:after
伪元素,在文本之后添加一个不可见的元素,如下所示。
1 | #justify-para:after { |
最终效果:
这样就实现了单行文本的左右对齐效果。
创建圆角框有几种方法,每种方法各有优缺点,对这些方法的选择主要取决于实际情况。
固定宽度的圆角框是最容易创建的,我们只需要两个图像分别用作顶部和底部的背景。
1 | <h1>Simple, Fixed Rounded Corner Box</h1> |
用作背景的两张图片:
顶部
底部
将这两张图片作为顶部和底部的背景:
1 | .box { |
本文是我在学习了慕课网教程:瀑布流布局后的学习笔记,具体代码见GitHub。
瀑布流布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
我们可以用多种方法实现瀑布流布局,如纯 JavaScript 方法实现,jQuery 方法以及使用 CSS3 实现。
先来看一下需要实现的效果。
可以看出图片之间等宽但不等高,相互之间有间隔,当页面滚动到底部时,加载更多的图片。