CSS笔记和杂谈

Posted on

这应该是最长的一次博客断更吧。。。因为年后辞职加上来日本工作的原因。导致很长时间都没有更新自己的博客了。很是惭愧,本来定的目标就是每月一篇很简单的任务。但居然空档了这么长时间,这就是正所谓的生于忧患死于安乐吧。找到了工作就松懈了,所以今天又重新捡起来继续写。公司的新人课题是做一个简单的CMS网站,也算重新复习了一下网页制作吧,因为一直再写JS的项目,基本的HTML和CSS的设计都有点生疏了。。。

CSS一行多列设计

这是一个最基本的设计布局。在一行上有多列的内容,最简单的例子是导航栏。HTML的大致结构是这样的:

    <ul>
    <li>HTML/CSS</li>
    <li>JavaScript</li>
    <li>CMS</li>
    </ul>

默认的话,这三列内容是向下排列的,如何让它们横着排列呢?这时候有三种解决方案:第一,是采用float使得所有的li列表浮动表示在一行。但这时候记得使用clear去清除浮动属性。这种设计方案的好处是兼容性强,但新手容易处理不好float属性对布局的影响和忘记清除float属性。第二种解决方案是对li使用display:inline-block;使得li并排一行,这种方案的好处是容易理解和兼容性高。但如果li之间的HTML源代码有回车的话会导致相邻的li有很细微的间距。所以对像素级别的设计方案来说并不推荐。第三种方案是使用flex布局。这是目前来说最灵活的一种布局方案了,特别对于多屏幕自适应来说非常友好。但是对浏览器版本要求比较高,IE11以下都不支持。所以这个简单的布局方案要根据自己的业务情况进行具体选择,并没有银弹。

子DIV溢出方案

有些时候根据需求我们设计的子DIV要比父DIV超出一定范围,这时候要怎么设计才好呢?有时候会想到利用position: relative;来改变子DIV的文档流进行实现。但这种方式实在是不推荐,因为会影响父DIV在页面的布局。我建议的解决方案是使用margin来进行溢出,margin不仅可以输入正数,也可以使用负数。当使用负数的时候就会朝反方向扩展达到溢出的目的。

多行文字垂直居中

实际开发中,我们经常会遇到这种常见的需求,对于一行文字来说,很简单,我们只要把heightline-height设置成一样的高度就可以了。但是对于多行文字的话,我们还是需要一些技巧的。首先,我们需要在文字外面再套一层元素进行设置。HTML结构大致是这样:

    <div>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </div>

然后我们在div上设置heightline-height一样高,使得span元素保持垂直居中。然后再修改span元素的CSS属性,设置正常的line-height和display: inline-block;以及vertical-align: middle;

参考

remove-whitespace-inline-block

display

Vertical align multiple lines of text

tagged: css

Golang语言学习分享

Posted on

Golang语言是谷歌开发的编程语言,虽然运行效率比不上C语言那么高效,但是也算比C语言更容易开发,因为内置了很多数据结构和借鉴了其它语言的优点,容易学习和开发。在实习的阶段也使用Go语言开发了一个简单的项目。所以想把学习的一些经验记录下来。

Golang的安装

我推荐使用Linux系统来学习和使用Golang语言,各种发行版的包管理器应该默认都会有Golang的安装包。不过还是要说下如何手动安装,去官网下载Golang的安装包,至少要1.7版本以上。然后解压缩和配置环境变量。 过程很简单。

Golang入门

首先,请大家阅读官方的这篇文档How to Write Go Code。这篇文章介绍了如何写一个基本的Golang程序和类,这里要说的是GOPATH,使用Golang语言必须要设置GOPATH环境变量,可以通过使用go env来查询Golang相关的环境变量。GOPATH下一般有三个文件夹bin,src,pkg。src下存放我们写的Golang项目,bin下是编译好的二进制文件,pkg文件夹下是生成的库文件。 我们安装的第三方库也会存放在src文件夹下,记住 Golang 引用的包名的根文件夹是GOPATH的src文件夹,所以我们一般都要使用绝对路径来引用包避免出现错误。

还有要注意的一点是,需要编译的Golang项目必须放在GOPATH下的src文件夹下,否则编译的时候无法正确的找到相关的依赖包。Golang还有一个好处就是可以直接以二进制文件的方式运行,只依赖系统的glibc。所以部署的时候特别方便,不像其他语言一样必须安装相应的解释器。

Golang依赖问题

开发程序肯定会使用各种第三方依赖,目前Golang语言的各种库都是存放在github上,国内下载很不方便,所以要让每个开发者都去下载一份依赖确实很不友好。还好Golang在1.7版本以上直接vendor。如果项目里有vendor文件夹,Golang会首先读取这个文件夹作为依赖来使用。使用Golang vendor的方法很简单:

    go get -u -v github.com/kardianos/govendor
    govendor init
    govendor add +external

这三个步骤分别是安装,初始化,和添加依赖。这样就在项目本身里面添加了依赖,协同开发的时候大家也没必要再去更新一份,非常方便。

Golang性能分析

在开发高性能多并发程序的时候,对系统的实时响应要求很苛刻,这就需要使用专业的分析工具来进行代码分析,确定出耗时代码进行相应的优化。好在Golang本身提供了这个工具pprof,这个工具可以列出具体每个函数的耗时,还能进一步跟踪函数里面的具体细节,定位耗时代码。

Golang序列化

在开发程序的过程中,为了操作方便,我们会定义各种各样的结构体来表示数据。很多情况下,结构体需要进行网络通讯,这时候我们就不得不序列化结构体进行网络发送。就像前端开发中把JSON对象转换成字符串发送出去一样。但是序列化却是一个很耗时的过程,处理不当就会成为系统的瓶颈所在。所以我列举出了几种序列化方案,推荐大家使用。我最后选择的是gencode

好用的Golang项目推荐

Github有很多不错的Golang项目可以学习借鉴,例如Go Git Service,就是一个非常好用的代码托管项目。

参考

pprof

Golang Serializer Benchmark Comparison

awesome-go

tagged: Golang

逆向JavaScript经验分享

Posted on

最近心血来潮,想看个国漫。结果爱奇艺独播,还每集那么老长的广告,可是把我恶心的不要不要的。然后为了展现程序员的自我修养,我要分析下这个视频的源文件地址,直接观看,跳过广告!凭着我分析百度网盘的经验,花了三个晚上,总算搞定了。 顺便分享下整个逆向分析过程,和大家学习。

查看请求

前端无论怎么样的操作,本质上都是向服务器发送请求,然后解析请求数据,展现在页面上。所以说逆向的切入点就是查看网络请求!因为我要分析视频的源MP4文件而不是flash文件,所以我把浏览器模拟成手机让爱奇艺载入手机版界面以便抓包获取MP4文件。切换成手机版很简单,只需要在Chrome上按F12打开开发人员工具,点击左上角的 Toggle device toolbar图标就可以切换成手机设备了,我选择模拟的设备是Nexus 6P。这时候重新刷新页面,查看NetWork面板。里面会有这个页面载入发起的所有请求,我们重点找的是各种JS发起的请求和带参数的请求。最笨的办法就是一个请求一个请求看一遍,总有你需要的。

分析请求

通过一个个查找,我们找到了一个请求返回了一个JSONP格式的数据,这个数据里面包含了MP4源文件的地址。注意,很多人分析请求的时候经常喜欢找MP4文件的请求,这个可以算是一个切入点。但是一般网站不会把视频网址固定死的,所以找到MP4请求并没有什么实际意义,而是一定有一个请求去向服务器索取真实的MP4地址,一般这个数据都是JSON格式的。所以只要耐心找,一定找得到的。很多请求都只不过是资源文件,所以很容易过滤掉的。

接下来就请看我们找到的这个关键请求: Request 从这个请求的Response可以得知这是我们需要的请求,但这也只不过才是开始。我们知道了这个请求,就需要思考如何构造这个请求,来获取真实的MP4地址。一般请求的网址和路径都是固定的,所以我们的重点工作就是构造请求参数。 这个请求总共有17个请求参数,真是够多的。但是我们不知道所有请求参数是否是必须的。有可能服务器只校验其中的几个参数,所以我们没有必要对每个参数都分析一遍。

这时候就需要拷贝下来这些参数来进行分析,在界面的左侧面板,右键单击之后会出现 copy as cURL菜单。这样我们就可以在Linux的终端里调试这个请求,你可以先拷贝到记事本上,然后修改请求之后再终端里跑一遍看看能否返回正常的数据。有些服务器也会对Request Headers进行校验,所以可以试试去掉相关的headers例如cookie,UA。最终调试出可以得到合法数据的最简单请求。爱奇艺这个例子对Request Headers没有进行任何校验,反而对请求参数很苛刻,少一个都不行,最后我们会解释为什么爱奇艺对请求参数检查这么苛刻。

逆向JS文件找到相关请求如何构造

从上面我们知道了,这个请求只对参数进行了校验,Request Headers并不需要。那重点就是逆向JS找到如何构造参数即可。

通过Sources面板可以看到这个页面加载的所有JS,但是这个看起来也太多了吧。所以这个不是方法,重点就是查找关键的JS文件。Ctrl+Shift+F可以查找所有的文件,所以我们可以利用搜索大法来找到关键的JS文件。一般也可以通过Network查看请求的触发者,但是很多封装之后的JS,是无法通过请求追溯到构造的JS文件的。但是无论这个JS文件怎么压缩混淆,网址是必须要有的。所以我们搜索cache.m.iqiyi.com/jp/tmts就找到了关键的JS文件了!找到JS文件之后,会跳转到Sources面板,点击右下角的{}Pretty print会把压缩的JS自动进行换行和排版,方便分析。这时候通过分析这个JS文件,我们就知道如何构造这个请求了。

站在巨人的肩膀上

我们没有必要每个参数都自己用JS实现一遍,因为人家已经实现好了,我们只要调用就好。这个请求的关键是getTmtsVf函数。这个函数对请求进行了哈希,添加了一个vf参数,所以我对参数进行了任何的修改都会导致请求非法。无论怎么实现的JS,有些参数只能通过全局变量来共享,所以对于那些参数,我们可以直接使用。例如爱奇艺有个全局的Q变量,通过这个变量可以获得很多需要的参数。

终极解决方案

对参数的构造完全取决于最后个人对JS文件的理解的功底,能看懂压缩的JS的逻辑才能成功提取需要的请求参数。但也有些变态的JS文件很难理解,不进行动态调试分析的话很难明白。这时候我们就不得不请出Chrome的大杀器:webRequest,通过这个API,我们可以拦截请求并进行替换。我就使用这个API拦截了app_movie.js,注入了我带调试信息的JS。你就可以随意的调试了。关于这个API的使用DEMO,可能后续会放在我的Github上。

写在最后

其实可以分析桌面版本的flash视频,然后使用B站的这个flv.js来解决播放问题。最终我写了一个油猴脚本来一键输出MP4文件。有兴趣的可以私信我。

tagged: JavaScript