月度归档:2017年09月

使用 JavaScript 来导出 CSV

使用 JavaScript 来导出 CSV

由于要做一个 UserScript 用到了这个功能,便顺便记录下来。
数组结构

var data = [
{
"title" :value,
"href" : value
},
...
]

生成 CSV 字符串

function convertArrayOfObjectsToCSV(args) {
        var result, ctr, keys, columnDelimiter, lineDelimiter, data;
        data = args.data || null;
        if (data == null || !data.length) {
            return null;
        }
        columnDelimiter = args.columnDelimiter || ',';
        lineDelimiter = args.lineDelimiter || '\n';
        keys = Object.keys(data[0]);
        result = '';
        result += keys.join(columnDelimiter);
        result += lineDelimiter;
        data.forEach(function(item) {
            ctr = 0;
            keys.forEach(function(key) {
                if (ctr > 0) result += columnDelimiter;
                result += item[key];
                ctr++;
            });
            result += lineDelimiter;
        });
        return result;
    }

生成 CSV 文件,并下载

function downloadCSV(args) {
        var data, filename, link;
        var csv = convertArrayOfObjectsToCSV({
            data: data
        });
        if (csv == null) return;
        filename = args.filename || 'export.csv';
        if (!csv.match(/^data:text\/csv/i)) {
            csv = 'data:text/csv;charset=utf-8,' + csv;
        }
        data = encodeURI(csv);
        link = document.createElement('a');
        link.setAttribute('href', data);
        link.setAttribute('download', filename);
        link.click();
    }

 
 
代码来源:https://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/

你永远不会习惯他

你永远不会习惯他

有的人,生活态度积极,对待自己的生活也极为严谨,在选择伴侣之时,一丝不苟。
有的人,生活态度消极,对于自己的终身大事,不过得过且过,在和异性交往时,对于异性的一些小的毛病和习惯选择了忍耐,心中总是告诉自己『习惯就好了』。
然而,你永远不会习惯他。
习惯本身便是无奈之下的选择,这种无奈之下的选择会为你带来持续的痛苦,让你持续的呆在痛苦之中,最终爆发。
悲愤中的妥协,爆发或者死亡。

致新生 —— 电子信息学院2017级新生演讲

致新生 —— 电子信息学院2017级新生演讲

终于,我这个老腊肉走入大四,今年由我来为新生进行演讲。这里将我演讲的资源分享出来,供大家参考。
[title]小览[/title]


[title]致谢[/title]
在编写的过程中,多次参考了吴军先生的《硅谷来信》中的内容
[title]下载[/title]
演讲稿
PPT

如何让 HTML5 的 Video 标签中的 poster 占满整个区域?

如何让 HTML5 的 Video 标签中的 poster 占满整个区域?

在帮导师上传视频时,遇见了一个问题
为了让页面不那么空白,在放置 Video 标签时,我添加了 Poster 属性,从而使视频未播放时,可以正常的显示一张图片。一方面可以保持原有的体验不变(这里之前就是一张图片)。
但是当我真正放好了以后,发现一个问题,就是 Poster 无法完整的覆盖整个区域,大概就是填满我下方截图中所圈出的区域。两侧会有留白。而我的 CSS 是有边框的,所以会非常的丑。
一开始,我认为是 Poster 的比例问题,但是在我按照播放器的比例来切割 poster 尝试多次无果之后,我觉得问题不是出在这里。

问题出在哪里我目前还不清楚,无空深究,这里只把解决方案贴出,具体的原因待以后有空再来深究。

可行方案

当前的方案是采用的 background 来实现的。
首先,删除 video 标签的 poster 属性,然后将其 preload 属性设置为 none,
接下来,添加 CSS 代码

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

实现后的效果如下

跳变的原因不明,后续研究。
[title]Todo[/title]

  1. 搞清楚为何 Poster 没有占满
  2. 搞清楚为何出现跳变

[title]拓展阅读[/title]
https://stackoverflow.com/questions/10826784/make-html5-video-poster-be-same-size-as-video-itself

Google 搜索结果导出 CSV

Google 搜索结果导出 CSV

初衷

由于需要统计某个网站中包含特定关键词的文章,该工作借助 google 搜索引擎的特殊语法来完成。

site: domain intitle:keywords

但是结果较多时,依次复制粘贴至 Numbers 中较为麻烦,便制作了该脚本,来快速导出搜索结果。

特性

  • 导出 Google 搜索结果为 CSV 文件

安装方法

  1. 在 Chrome/Safari 上安装 TamperMonkey (Firefox 为  Greasemonkey)
  2. 访问下载地址进入到插件页面
  3. 点击页面上的安装此脚本

使用方法

  1. 搜索后,在搜索结果页的左侧会出现一个下载搜索结果
  2. 点击按钮后,设置保存的文件名,即可将搜索结果导出为csv

结果默认导出 title 和 link

补充说明

使用时建议调整搜索设置,将搜索结果设置为100条,效果更好。

如何处理 TS 文件?

如何处理 TS 文件?

TS 文件是现在在移动端用的比较多的视频格式。
下午导师转发给我一个链接,希望我能把链接中的视频放在会议的官网。自然没有拒绝
晚上回来审查了下元素才发现原来是 ts 文件,以往没有处理 ts文件的经验,今天顺便记录下

下载 TS 文件

TS 文件的命名很有规律,一般都是 xxx-01.ts 到 xxx-99.ts 具体的数目取决于视频的大小。你可以通过 Google Chrome 的开发者工具来看最终有多少个文件。
然后,可以使用下面的命令来一键下载

wget -r http://www.example.com/filename-{1..99}.ts

这样我们就成功的下载了这个视频的所有分片。

部分视频网站可能会有一些检测的机制,可能会比较麻烦

合并 TS 文件

下载完成后,我们就要来合并 TS 文件了。使用下面的命令,就可以合并文件了

echo 'filename-'{1..99}.ts | tr " " "\n" > tslist
while read line; do cat $line >> filename-all.ts; done < tslist

通过上述的命令,我们可以把99个ts文件合并成为一个 filename-all.ts 文件,这个ts文件就可以借助播放器来直接播放了。

将 TS 文件转码为 mp4 文件

这里为了方便浏览和兼容,我将 ts 文件转为 mp4 格式,代码如下

ffmpeg -i source.ts -acodec copy -vcodec copy target.mp4

 

延展阅读

https://gistpages.com/posts/download-streaming-video-ts-files

批量删除 QQ 空间说说的 JS 代码

批量删除 QQ 空间说说的 JS 代码

var delay = 1000;function del() {    document.querySelector('.app_canvas_frame').contentDocument.querySelector('.del_btn').click();    setTimeout("yes()", delay);}function yes() {    document.querySelector('.qz_dialog_layer_btn').click();    setTimeout("del()", delay);}del();

在 Chrome 的调试控制台内执行即可。

如何做好音频课程

如何做好音频课程

随着知识付费的崛起,各种知识付费产品也开始兴起。音频课程便是其中一例。今天,我来分享一下如何做好音频课程。
音频课程并不是简单的声音录音,大多进行了一定的后期处理,才能达到更好的让学员学习的目的。整个课程的制作下来,可以归结为三个部分:

  1. 编写课程文案
  2. 录音并进行编辑
  3. 配乐和其他处理

1. 编写课程文案

音频课程由于不如现场讲授课程那样及时,听众会非常容易听出你的课程中的一些小的瑕疵,所以在课程的录制时,应尽可能的减少出错的可能,从而降低后期编辑的难度,也能使得声音整体更加自然和流畅。
在编写文案时,应该做到 逐字写稿,每个字都要写清楚。即使是课程中的语气词,如 啊、哦、嗯、呃等等,都要在文案中表明,从而让你的课程在录音时不会觉得太过于口语化。
在讲课前,将文案打印下来,多读几遍,以免出现不通顺的地方,导致在正式录制时浪费时间。同时,对于文稿中的特别的部分,加上一些阅读的标示,比如:这里重读、这里要叹气、这里语调激昂等等,这样可以让你在录制时更加注意,让你的课程更具魅力。
PS. 编写正式的文案之前,可以先列大纲,这里我推荐你使用幕布。写文案时也可以使用石墨来编写。通过在线工具来编写你可以在任何时间和地点下进行。

2. 录音并进行编辑

录音分为三部分,分别是环境、硬件、软件。对于看文章的大部分人来说,都不是专业的音频工作者。所以给出的建议也都是普通人可以做到的。
首先是环境:在录音时,尽可能选择比较安静的环境和时间,这样可以减少你后期处理的麻烦,比如在自家的书房,无人的办公室等。在录音前,记得将手机调成静音模式(震动模式会在桌子上造成很大的噪音,不推荐),将一些社交 App 都退出掉,以免产生提醒。
在硬件上,如果你是 Mac ,可以直接使用 Mac 笔记本上自带的麦克风,如果你是 Windows ,建议你购买一个外接的麦克风(大部分 Windows 自带的麦克风录音效果不怎么理想),可以在淘宝搜索「电容麦」,价位大致在 120 ~ 220 元左右的即可。购买时注意接口类型,不要购买成手机用的麦克风。
除此之外,要记得给 麦克风 配上一个防喷罩,我们不是专业的歌手,没有办法很好的控制,配上一个防喷罩会让你在编辑时节省大量的时间。
在软件方面,我向你推荐 Adobe Audition ,你可以使用 Au 完成所有的录音、编辑、配音的工作,学会一个,就可以完成所有任务,性价比很高。关于 Au 的使用教程,我给你推荐两个

  • 免费:http://study.163.com/course/introduction/266005.htm
  • 付费:http://study.163.com/course/introduction.htm?courseId=1004264011

这两个课程都不错,付费的课程是针对电台制作的,如果不缺这十块钱,建议看付费课程。
在编辑音频时,主要做的事就以下三条

  1. 降噪
  2. 删掉口误
  3. 适当调整节奏

前两个在上面的两个课程中都有涉及,就不再细讲。
调整节奏主要是你自己在录制过程中可能不自然的就加快了语速,这个时候,你可以在语音之前加一个0.5秒的停顿,来使节奏放缓。

3.配乐和其他处理

在选择音乐时,要根据你讲的内容选择合适的音乐,不然就会给听众一个怪怪的感觉。
在播放音乐时,需要调整音乐的【音量】和【节奏】,不要让音乐盖过人声。
同时,可以借助 Au 的功能,对音乐执行「渐入」、「渐出」,来让音乐出现的更加平滑,不突兀。
借助多轨道来完成音频的处理

更多

如果你有更好的建议不妨在留言中留下你的建议,我会添加到文章中,后续也会对文章进行更新。