如何用 html 和 css 画一拳超人

写这篇博客的起因是我看了Medium上的这篇文章:How I started drawing CSS Images,然后哇哦😦,同样是前端开发,这区别怎么这么大呢?这位作者和我完全点了不同的技能点啊!

看了几个她在codepen上的作品,比如这个皮卡丘,发现用到的技术也并不多,于是我也想试试。

不过有哪个动漫中的人物足够简单,能够用几个基本的几何图形就画出来呢?我想到了一个人,于是我决定画一个《一拳超人》中的卤蛋,不对,是秃头披风侠——琦玉老师。

课程笔记--Building a javascript development environment

这篇博客是我在学习 Pluralsight上的课程:Building a JavaScript Development Environment 时记下的笔记,仅作个人记录之用。

这门课程系统地介绍了前端开发中的许多工具和术语,从编辑器的选择到项目的部署都进行了介绍,我在学习了这个课程后感觉将之前零散学习的内容串了起来。

顺便一说,Pluralsight网站上面有许多不错的课程,不过价格太贵,需每月付29美元😥。但是,你可以用微软账号加入Visual Studio Dev Essentials 计划,这样就可以免费获得Pluralsight 3个月的订阅了😀。


1. Course Overview

编程的时候要做许多选择

  • Editor
  • Module format
  • HTML generation
  • Transpiling
  • Bundler
  • Linting
  • Testing

这门课程介绍了如何在这些选项中做出选择

从头创建一个基于 React, webpack, babel 的模板项目

如果是一个刚接触 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 应用

前段时间忙着找工作去了,有段时间没有写博客了,上一篇还是三月份的,今天来更新一篇。


最近在学 React.js,也写了一些练习的项目,之前参考网上的一些代码写了一个很简单的 to-do list。对于初学者来说,写个基本的 to-do list 对于理解 React 中的一些概念及语法倒是挺有帮助的。

现在很多的 React 项目中已经开始使用 ES6 来写了,不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的,我这里还是用的还是更熟悉的 ES5 写法,虽然有点落伍了,但若想改成 ES6 版本倒也挺方便的。

GitHub 上的项目地址
在线 demo

开发一个用于屏蔽知乎网内容的Chrome扩展

前段时间电影《疯狂动物城》上映了,然后我的知乎首页就被它刷屏了。虽然我对这部电影没有任何意见,但作为一个还没去电影院看过的人来说,每看到相关问题一次都是无情的剧透,于是我毅然屏蔽了“疯狂动物园”这个话题。本以为问题解决了,但是接下来我又被迫看到这个问题:

问题上添加的五个话题无一命中,我又被剧透了一脸。算了,既然知乎的屏蔽规则靠不住,那就自己动手吧。这样我的Chrome浏览器扩展——ZhihuFilter就诞生了,点击这里查看Github上的项目

扩展功能

其实扩展的功能很简单,当打开知乎首页后,扩展会依次检查你的屏蔽关键词列表是否出现在了某一个答案中,如果出现了,就会把这个答案隐藏,取而代之的是提示信息和一个展开答案的按钮。效果如下图所示:

你可以点击图中的按钮来查看答案,之后可以选择再次隐藏或展开。

(译)用神经网络实现能够自主避让障碍的生物

这篇文章是我去年看到的一个很有趣的项目,还试着模仿它的代码写一个类似的项目出来,不过一直没有完成。这里把原作者的一篇相关博客翻译过来,说不定有更多的人对此感兴趣。

注意:原文中引用了一些墙外链接,请配合梯子食用

以下为译文内容:



具有神经网络大脑的agent为了生存而进化

这里是javascript的演示

最近我看到了一个模拟视频,展示了使用进化技术来训练agent,让它们能够避开移动的障碍物。这里使用的方法似乎是NEAT算法的变种。NEAT算法用于神经网络拓扑结构的进化,使其能够正确完成特定的任务。它是为了Unity 5游戏引擎而写的,想被整合进综合的游戏AI中,这引起了我的兴趣。

这个结果很酷而且动起来似乎很优雅,所以我想试着用javascript实现一个类似的demo,这样就可以在浏览器中运行了。在玩了一下基本的实现后,我发现对于障碍躲避问题,一个简单的神经网络就可以高效的完成了,甚至于一个完全连接的神经网络都算是杀鸡用牛刀了。最后我也意识到就算是一个简单的类感知器(perceptron)网络都能够很好地完成任务,而在之前提到的障碍躲避demo中,隐藏单元也并不能够增加多少好处。

perceptron
简单的感知器图解(维基百科)

因为agent可以在探测到障碍物的瞬间自由地向任意方向移动,而且agent之间不会产生相互作用,因此这个任务变得太简单了,使用NEAT算法的杀伤力过大了。我们使用一个简单的类感知器网络(即单神经元网络),就能让agent有效地完成躲避障碍的任务了。

实现单行文本的左右对齐

今天碰到了一个问题,如何让只有一行的文本进行左右对齐。对于英文文本,左右对齐的效果如下所示:

左右对齐的段落

上述效果是使用text-align: justify来实现的。可以看到除了最后一行之外,段落的其余部分都是左右对齐的。如果我们将text-align: justify样式直接应用在单行的文本上时,将会像上面段落的最后一行,仅仅是向左对齐。可以看一下下面的例子:

代码:

1
2
3
4
5
6
7
8
9
<p id="justify-para">这是一行没有左右对齐的文本</p>

<style type="text/css">
#justify-para {
background-color: #ccc;
width: 400px;
text-align: justify;
}

</style>

结果:

一行没有左右对齐的单行文本

对于汉字文本,因为汉字的等宽特点,文本左右对齐的效果就是每个汉字间的间隔相等。为了实现这一效果,需要利用:after伪元素,在文本之后添加一个不可见的元素,如下所示。

1
2
3
4
5
#justify-para:after {
content: "";
display: inline-block;
width: 100%;
}

最终效果:

左右对齐的单行文本

这样就实现了单行文本的左右对齐效果。


参考资料

CSS – One Line Justify

使用 ::before 给列表添加样式

::before会创建一个伪元素(pseudo-element)作为选定元素的第一个子元素。这个元素默认为行内元素。

语法

1
2
3
4
5
6
7
8
/* CSS3 语法 */
element::before { style properties }

/* CSS2 的过时语法(仅用于支持IE8) */
element:before { style properties }

/* 在每个<p>元素前插入内容 */
p::before { content: "Hello world!"; }

注意CSS2和CSS3的写法有一个冒号的差别。

几种实现圆角框的方法

创建圆角框有几种方法,每种方法各有优缺点,对这些方法的选择主要取决于实际情况。

固定宽度的圆角框

固定宽度的圆角框是最容易创建的,我们只需要两个图像分别用作顶部和底部的背景。

1
2
3
4
5
6
<h1>Simple, Fixed Rounded Corner Box</h1>

<div class="box">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>

用作背景的两张图片:

顶部 top.gif
底部 bottom.gif

将这两张图片作为顶部和底部的背景:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
width: 418px;
background: #effce7 url("bottom.gif") no-repeat left bottom;
padding-bottom: 1px;
}


.box h2 {
background: url("top.gif") no-repeat left top;
margin-top: 0;
padding: 20px 20px 0 20px;
}


.box p {
padding: 0 20px;
}

固定宽度的圆角框

学习笔记:瀑布流布局

本文是我在学习了慕课网教程:瀑布流布局后的学习笔记,具体代码见GitHub

瀑布流布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

我们可以用多种方法实现瀑布流布局,如纯 JavaScript 方法实现,jQuery 方法以及使用 CSS3 实现。

网页结构与布局

先来看一下需要实现的效果。

瀑布流布局

可以看出图片之间等宽但不等高,相互之间有间隔,当页面滚动到底部时,加载更多的图片。

本站访客数人次