CSS实现多边形文本区域自动换行,自动裁剪,沿着多边形来排版

先来看个正六边形的效果对应的HTML是
<div class="main"><div class="left"></div><div class="right"></div><p>这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。这是一段文本。</p></div>
对应的css是:
<style>.main {width: 13em;text-align: center;}.left, .right {width: 29.3%;height: 13em;background-color: lightgray;}.left3,.right3{width: 1px;}.left {-webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);float: left;-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);clip-path: polygon(0 0, 0 100%, 100% 100%, 0 70.7%, 0 29.3%, 100% 0);}.right {-webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);float: right;-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 70.7%, 100% 29.3%);}p {text-align: center;}</style>
阅读全文

git报错bad signature和index file corrupt的处理方法

今天打开工程,习惯性地git status下,却发现以下报错:
λ git statuserror: bad signaturefatal: index file corrupt
这该怎么办呢?index file在 git 里面一般指的是.git/index这个文件。这个文件保存的是暂存区的信息(索引信息)。可以通过git ls-files --stage来查看暂存区的内容。这个文件很重要!但是现在报index file corrupt,说明这个文件已经损坏了。还好,我们有办法重新来生成这个文件:git read-tree或者直接git reset.解决办法:
  1. 进入到工程目录下cd /path/to/dir
  2. 删除或重命名.git/index文件:rm -f .git/indexmv .git/index{,.bak}
  3. 重建.git/index:git read-tree或者直接git reset
这样3步后再运行git status即可正常显示git状态了:
λ git statusOn branch masterYour branch is up-to-date with 'origin/master'.nothing to commit, working directory clean
阅读全文

HTML中嵌入SVG图片的N种方式

最近用到了个SVG图片,里面还是带<image>标签的,想要把它嵌入到HTML中还是有些工作要做的。

经历

最初的图片是这样写的
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"preserveAspectRatio="xMinYMin meet"width="660" height="342"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="660" height="342"/><rect x="2" y="284" width="656" height="58" fill="rgba(0,0,0,0.6)" stroke-width="1" ></rect><text text-anchor="start"font-family="Microsoft Yahei, sans-serif" font-size="28"x="20" y="322" fill="#fff">这是百度</text><text text-anchor="end"font-family="Microsoft Yahei, sans-serif" font-size="28"x="640" y="322" fill="#fff">😄</text></svg>
p.s. 先拿百度的图片来凑个数显示效果应该是:但是通过<img>标签插入到HTML中后却变成了这样:W.T.F查了半天MDN,也没有什么收获。最后在StackOverflow上找到了一个解决方案:即使用<embed>标签。修改成<embed src="./test.svg" style="display:block;width:330px;height:240px" />后却显示成了:只显示了图片左上角那部分有木有!这张图片是按2倍图做的,应该要缩小一半,...阅读全文

【翻译】Monolog使用说明 – 即Monolog中文文档

前言

最近项目中使用的Monolog出了点小问题,去翻其文档,发现居然只有英文的。趁业余时间,翻译一下吧。以下是其使用说明中文翻译。更多翻译内容见clarence-pan/monolog-zh-doc.

使用 Monolo

安装

Monolog 在 Packagist monolog/monolog) 上可用,并且可以通过Composer安装:
composer require monolog/monolog
如果你不使用 Composer, 那你可以从 GitHub 上获取代码,然后使用任何兼容 PSR-0 的自动加载器(比如Symfony2 ClassLoader 组件)来加载 Monolog 的类

核心概念

每一个日志服务实例 Logger) 都有一个通道(名称),并有一个处理器 (Handler)栈. 无论何时你添加一条记录到对应的日志服务实例,这个处理器栈将被遍历一遍:每个处理器都将依次决定是否要处理这条记录,而如果要处理,则遍历结束(译注:类似DOM事件冒泡)。这样子可以创建非常灵活的日志配置。比如一个StreamHandler可以把所有日志都写入磁盘,而上面加个MailHandler可以把错误日志作为邮件发送出去。处理器还有一个$bubble属性定义了是否屏蔽某条记录或者处理了某条记录。在这个示例中,配置MailHandler$bubble参数为false则意味着MailHandler将不会把自己已处理过的记录继续冒泡给StreamHandler.你可以创建许多日志服务实例(Logger),每一个则定义一个通道(比如数据库、请求、路由...)。而每一个日志服务实例都可以组合各种各样的处理器,可以共享处理器也可以不共享。这个通道将会在日志中反映出来,从而允许你可以很容易地查看或者筛选记录。每一个处理还会有一个格式化器(Formatter)。如果你没有配置一个,则一个有意义的默认的格式化器将被创建。格式化器用来规范化并格式化输入的记录,以便处理器能输出一些有用的信息。不支持自定义的严重性级别。只支持使用RFC 5424中定义的八个级别(调试/Debug、信息/Info、提示/Notice、警告/Warning、错误/Error、严重/Critical、警报/Alert、紧急/Emergency)来作为基本的筛选目的。不过,如果为了排序或者其他需要灵活性的使用场景,你可以添加加工程序(Processor)从而可以在(处理器)处理前添加额外的信息(标签、用户IP...)。

日志级别

Monolog 支持一下RFC 5424中的日志级别:
  • 调试/DEBU...
阅读全文

`express` 框架中的参数小记

注意req.params只有在参数化的路径中的参数。查询字符串中的参数要用req.query.比如:
// server.js:app.post('/user/:id', function(req, res){console.log('req.params: ', req.params)console.log('req.query: ', req.query)console.log('req.body: ', req.body)})
// HTTP request:POST /user/123?foo=1&bar=2Content-Type: application/x-www-form-urlencodedaaa=1&bbb=2
这样的请求,应该是要用req.query.fooreq.query.bar来获取 foo 和 bar 的值,最终打印出如下:
req.params:  { id: '123' }req.query:  { foo: '1', bar: '2' }req.body:  { aaa: '1', bbb: '2' }

关于req.body

此外,express框架本身是没有解析req.body的 -- 如果打印出来req.body: undefined则说明没有安装解析req.body的插件:为了解析req.body一般可以安装body-parser这个插件:
// 假设 `app` 是 `express` 的实例:const bodyParser = require('body-parser')// 在所有路由前插入这个中间件:app.use(bodyParser.urlencoded())
这样就可以了。bodyParser.urlencoded()是HTML中默认的查询字符串形式的编码,即application/x-www-form-urlencoded. 如果需要解析其他格式的,则需要分别加入其他格式的中间件,比如:
  • bodyParser.json()支持JSON格式(application/json
  • bodyParser.raw()将会把req.body置为一个Buffer(Content-Type:application/octet-stream)
  • bodyParser.text()将会把req.body置为一个string(Content-Type:text/plain)
然而上传文件用的multipart/form-data格式却没有被bodyParser所支持,需要使用busboy之类的其他中间件。阅读全文

如何优雅地使用 VSCode 来编辑 vue 文件?

最近有个项目使用了Vue.js,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题。后来,果断放弃收费的 PHPStorm ,改用vscode (Visual Stdio Code).当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件

先来扒一扒使用 PHPStorm 遇到的问题

  1. vue文件虽然可以通过插件来解决高亮问题,但是<script>标签中的 ES6 代码的识别老是出问题,箭头函数有的时候能正确识别,有的时候会报错
  2. 无法正确识别 vue 文件中的 jsx 语法
  3. 无法正确识别和高亮 vue 文件...
阅读全文