javascript tricks

Encoding data for POST requests

Right now, when you go to copilot.github.com you’re greeted with this example: This is bad and might result in security issues. Here’s where things go wrong: body: `text=${text}`. Unescaped text is added into a format with defined encoding. It’s similar to SQL/HTML injection, as something intended as a ‘value’ gets to interact with the format directly. Read more…

CSS Flex盒子全指南

本文图片较多,如有不清楚的地方,可以点击原文链接查看高清大图。另,如有翻译不周之处,请指摘。 原文: The Complete CSS Flex Box Tutorial 译文: Flex 盒子与CSS 网格 (Grid)很相似,都十分复杂,这是因为它不止包含一种元素类型,而是两种:container 和 items。 CSS 视觉字典(译者注:原作者推荐的一本讲述CSS属性的付费书籍) Contains visual diagrams for every single CSS property in common use.medium.com​medium.com/@js_tut/css-visual-dictionary-e53329daf93e 如果想更好地理解Flex的工作原理,可以在此页面上尝试flex 布局编辑器。 当我刚开始学习Flex的时候,我想搞清楚它能做的所有事情,但却始终找不到一本能展示Flex所有属性事例的全面性教材。因此,我以鸟瞰 的方式,用Flex的方式画了以下图表。 这就是Flex能做的所有事情。但是……还是让我们以评论的方式来逐一重温以上图表吧。在本课程结束时,相信你一定会对Flex所能做的事情了如指掌。 Flex Flex是在父容器中自动伸展多行和多列内容的规则集。 display: flex 与其他CSS属性不同,在Flex布局中,存在一个主container,items嵌入其中。有些CSS Flex属性只作用于父container。有些则只作用于items。 你可以把flex元素看作是带有display:flex属性的父container,而放置在这个container中的元素则叫做items。每个container均有 flex-start 和 flex-end点,如图所示。 主轴和交叉轴 尽管item都是以线性方式排列的,Flex还是要求你注意行和列。因此,Flex有两条坐标轴。水平轴指的是主轴,垂直轴指的是交叉轴。 在主轴上水平延伸的内容具有宽度和间隔,为了控制它们的显示行为,你将会使用到justify相关属性。为了控制item的垂直展示行为,你将会使用align相关属性。 如果你有3列6个item,那么在展示时,Flex将会自动创建第二行来容纳剩余的item。 如果你有多于6个item的展示列表,Flex则会创建更多的行。 行和列如何在父元素中分布是由:flex-direction 、flex-wrap 以及其他几种 Flex 属性决定的,这些属性都将在本教程的余下内容中有所涉及。 Direction(方向) 可以通过倒置的方式来设置 item 流的方向。 Wrap Read more…

http2 的连接建立过程

http2 的分类 http2 有多种不同的连接建立情况,简单来看可以分为两种: 但是,在实际使用中这样划分缺乏实操性,所以实际情况会这么分: 从 http/1.1 升级到 h2c 当客户端不知道服务器是否支持 http2 时,先尝试以 http/1.1 的形式向服务器发送 http 请求,同时,带上一个 Header:Upgrade: h2c,这样,如果服务器是支持 http2 的,那么就会响应一个升级操作:例如: [[email protected]]# cat http1.req GET / HTTP/1.1 Host: server.example.com Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: <base64url encoding of HTTP/2 SETTINGS payload> 如果服务器支持 http2,响应的就是一个 Switch Protocols 的 101 响应: [[email protected]]# cat http101.resp Read more…