分类目录归档:技术

javascript

使用 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/

code 1076536 640

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

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

可行方案

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

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

实现后的效果如下
luse8
跳变的原因不明,后续研究。
[title]Todo[/title]

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

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

google 76517 640

Google 搜索结果导出 CSV

初衷

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

site: domain intitle:keywords
Code language: CSS (css)

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

特性

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

安装方法

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

使用方法

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

结果默认导出 title 和 link

补充说明

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

film 1668918 640

如何处理 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 Qzone marketing

批量删除 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 的调试控制台内执行即可。

fd4a959f23df

Swift 实现 横线样式的输入框

输入框样式的输入框是我们在做项目时经常会使用到的。除了引用一些第三方的库来实现这样的样式,我们还可以通过代码来实现这样的效果。
4vzey
具体的代码如下

func setBottomBorder(textField:UITextField){
        let border = CALayer()
        let width = CGFloat(1.0)
        border.borderColor = UIColor.white.cgColor
        border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width:  textField.frame.size.width, height: textField.frame.size.height)
        border.borderWidth = width
        textField.layer.addSublayer(border)
        textField.layer.masksToBounds = true
    }

调用时,使用

@IBOutlet weak var firstPagePhone: UITextField!
 setBottomBorder(textField: firstPagePhone)

 

默认标题 单图文公众号首图 2017.08.15

Swift 退出 Segue (转场)

在一个 StoryBoard 中,我们可以通过拖拽来生成两个 View Controller 之间的跳转。就像下面这样
kodh9
这样我们只是实现了从一个 View Controller 跳转到另外一个 View Controller ,那我们如何从 其中跳出呢?
可能有的人想到可以再跳回去,的确,我们可以调整回去,但是那样并不是跳回,而是加了一个新的 View Controller ,本来两层,变成了三层,长此以往,会导致我们的应用出现占用了大量的内存和CPU的情况。
所以我们需要做到退出的功能。
退出一个 Segue 效果需要以下几步

  1. 创建一个 Button 用于点击退出。
  2. 在 ViewController.swift 中添加如下代码
    @IBAction func unwindToSegue (segue : UIStoryboardSegue) {
        }
  3. 然后将 按钮拖拽到 ViewController 中的 Exit 按钮中,选择其中弹出的 unwindToSegue 方法即可。hz3m2
b29692084bbb

Insert Update Time – WordPress 的链接分享插件

初衷

在使用 Dokuwiki 时,可以使用按钮一键添加一个编辑记录的标签
esuad
我在写博客时,有更新旧文的习惯,但是由于没有更新记录,对读者来说不慎友好,故而做出这个插件,来一键生成编辑记录。

插件信息

插件名为 Insert Update Time ,目前已经上架 WordPress 官方插件库,可以通过在博客后台搜索直接下载
3r9w0

插件使用说明

插件默认会在你的编辑器内添加一个按钮,点击按钮,就会自动生成一个更新记录。
p5ejz
更新记录中包含一个 更多标签和一个包含用户信息和更新日期的标志。

插件使用动态图

TinyMCE

lp3b9

QuickTag

插件安装方法

1. 在 WordPress 后台搜索 Insert Update Time 或搜作者 Bestony ,即可找到这个插件
2. 前往插件主页下载插件,并上传到 WordPress 中 https://wordpress.org/plugins/insert-update-time/

我的其他插件

LinkShare – WordPress 链接分享插件

keyboard 2529270 640

cin 如何设置小数点输出位数?

C 语言可以通过设置输出时的格式来进行样式控制,而 C++ 默认没有这样的方法,我们需要通过引入特别的库来实现 —— iomanip

#include<iostream>
#include<iomanip>
using namespace std;
int main(){
    cout.setf(ios::fixed); // 设置余位补零
    int a;
    double PI;
    cin>>a;
    PI = 3.14159265358979323;
    cout<<setprecision(7)<< a*a*PI <<endl; // 设置小数点后输出 7 位
}

 

b29692084bbb

LinkShare – WordPress 的链接分享插件

[title]初衷[/title]
最近将云笔记由有道云笔记切换为了印象笔记(确实好用一些),所以整理了有道云笔记的资料。
发现自己在过去其实收藏了很多的资料,但是由于年久未看,所以也是囤积在了云笔记中。而自己的本心其实是想通过这些资料,来整理出自己的文章,最终无以成型。
再加上最近看了一篇文章,在说当下的文章转载问题:当下的文章转载非常不规范,CC 协议不遵守,并且 CC 协议其实鼓励的是使用链接分享。
基于这样的考量,我想我需要的其实是类似于微博那样的简短的分享的功能。但是在 WordPress 中集成一个 微博的功能其实并不简单,而且我也希望即使我换主页,也能够很好的兼容,那么对于插件的要求就会很高,而我当下主要的工作还是考研,所以实在无力优化,所以便曲线救国,采用了分享链接的形式。
[title]使用思路[/title]
插件默认会在后台创建一个新的文件类型 LinkShare,同时,你可以在后台侧边栏和顶部的新建中看到分享,你可以通过这两处来创建新的分享。同时,还可以在侧边栏中的分享进行分享的管理
[title]Demo[/title]
https://www.ixiqin.com/links-share/
[title]使用说明[/title]

插件安装说明

  1. 安装插件
  2. 创建一个新的页面,在页面中添加如下短代码[ linkshare][ /linkshare]
  3. 保存页面,并在后台新建链接分享

链接分享说明

  1. 点击侧边栏中的分享或顶部新建中的分享,进入到新建分享的页面。
  2. 在该页面依次添加标题、链接、评论dhlji
  3. 填写完成后点击发布

[title]安装方式[/title]

  1. 【推荐】在 WordPress 后台的插件中心搜索关键词 Link Share 或搜索作者 Bestony 即可找到插件,点击安装即可。
  2. 前往 https://wordpress.org/plugins/link-share/ 下载 zip ,然后上传到后台插件中心即可。

[title]样式美化[/title]
短代码生成的是 ul 无序列表,该列表的结构如下

<ul class ="linkshare-list”>
    <li class=“linkshare-item”>
        <a class=“linkshare-link”>linktitle</a>
    <li>
</ul>

你只需要对应添加 linkshare-listlinkshare-itemlinkshare-link 的 css 样式即可
[title]Todo[/title]

  1. 加入标签
  2. 允许将分隔符切换为其他的符号

[title]更新日志[/title]
= 0.0.6 =
1. 将默认语言切换为英文,方便后续的国际化
2. 添加中文语言
= 0.0.4 =
1. 在输出端使用 esc_url 处理URL
= 0.0.3 =
1. 在输入端使用 esc_url 处理URL
= 0.0.2 =
1. 审查、处理 POST 请求
= 0.0.1 =
1. 完成短代码部分
2. 完成文章类型部分
3. 完成信息提交部分