分类
前端开发

用JOJO打开Node.js的Stream

Node.js的Stream被称为「流」,特别适合读写超大的文件

首先引入需要的模块 (砸瓦鲁多)

const fs = require('fs');
const path = require('path');

创建输入「流」(读取「流」)

// 第一步: 设定读取的文件位置, 即当前代码所处的文件
const rs = fs.createReadStream(__filename);
  • "吸气冲承" (设定输入)

创建输出「流」(写入「流」)

  • 欧拉吉良吉影(设定输出)
// 第二步: 设定输出的文件位置
const ws = fs.createWriteStream(path.join(__dirname, 'result.js'));

读取「流」写入「流」对接到一起

// 第三步: 将读取的文件(即当前代码所处的文件, 输出到result.js)
rs.pipe(ws)
  • 时间开始流动

  • 执行完成

原版视频 https://www.bilibili.com/bangumi/play/ep251366
时间轴: 8:00到9:00

完整代码

const fs = require('fs');
const path = require('path');
// 第一步: 设定读取的文件位置, 即当前代码所处的文件
const rs = fs.createReadStream(__filename);
// 第二步: 设定输出的文件位置
const ws = fs.createWriteStream(path.join(__dirname, 'result.js'));
// 第三步: 将读取的文件(即当前代码所处的文件, 输出到result.js)
rs.pipe(ws)

代码执行效果(拷贝文件)

小结:

Stream在拷贝大文件的过程中,是非常好用的, 可以让我们以1M内存, 轻松高效的的拷贝500M的文件!

分类
Chrome插件英雄榜 Github星聚弃疗榜

047《Go to Tab》快速跳转到打开的网页

  • Chrome浏览器支持打开多个窗口, 每个窗口支持打开多个标签, 我有一个习惯,每次搜索新的内容,都会打开一个新窗口, 新窗口又会产生新标签,于是窗口和标签越来越多, 窗口和标签很多, 就很难快速定位到已经打开的某个标签页

  • Go to Tab让我们以最快的方式, 定位到已经打开的标签页

2019-06-15-18 54 23

  • Go to Tab通过扩展面板,直接关闭标签页, 或其它窗口

002

  • Go to Tab可以通过扩展面板,搜索标签页关键词, 标签页高亮后, 按回车即可弹出标签页

003

扩展程序下载链接

https://chrome.google.com/webstore/detail/go-to-tab/hjfkaobgkmaeomgdhmhhipdbjdhhjkoi

小结:

Go to Tab对于工作期间大量打开页面, 又长时间不关机的程序员们, 是非常有帮助的

谷粒-Chrome插件英雄榜

写在最后(我需要你的支持)

  • 本文属于谷粒-Chrome插件英雄榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/ChromeAppHeroes

  • 谷粒-Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star 🌟 to this project.

分类
Chrome插件英雄榜 Github星聚弃疗榜

057《图片另存为JPG/PNG/WebP》让WebP图片下载为PNG格式

WebP是google推行的新的图片格式, 可以使用更小的空间,保存更清晰的图片, 但由于格式较新, Adobe Photoshop CC 2019 20.0.2版本都无法打开查看, 所以我们需要保存网页中的WebP图片为通用性较强png格式

我们可以使用一款扩展程序图片另存为JPG/PNG/WebP, 将WebP格式图片转换为png格式

我们以 谷歌艺术和文化 https://artsandculture.google.com/ 网站内的图片为例做一个示范

save_as_png

除了能将浏览器图片保存为png, 还可以保存为jpg和WebP格式

Chrome扩展图片另存为JPG/PNG/WebP 下载链接:

https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd

Chrome扩展图片另存为JPG/PNG/WebP并不能自动批量转换大量图片的格式, 如果你有大量转换图片格式的需求, 可以尝试使用XnConvert这款软件, 官网下载地址: https://www.xnview.com/en/xnconvert/#downloads

XnConvert使用示例: 使用XnConvert将png格式图片批量转换为WebP格式

png_to_WebP

小结:

WebP是非常先进的格式, 但由于Photoshop这类元老级图像编辑软件不支持, 我们只能将图片为png格式,再进行编辑, 先进技术改变世界, 需要一个过程, 而在过程中提供一个折中的方案(把WebP装换为png, 再将png图片装换为WebP), 也是一件有价值的事~

写在最后(我需要你的支持)

  • 本文属于谷粒-Chrome插件英雄榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/ChromeAppHeroes

  • 谷粒-Chrome插件英雄榜, 为优秀的Chrome插件写一本中文说明书, 让Chrome插件英雄们造福人类, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • ChromeAppHeroes, Write a Chinese manual for the excellent Chrome plugin, let the Chrome plugin heroes benefit the human, If you like this project, I hope you can add a star 🌟 to this project.

分类
Github星聚弃疗榜 开源游戏

开源游戏-CXK, 出来打球

游戏说明

  • 这是一个网页版CXK打篮球的小游戏,玩法和经典小游戏打砖块类似

  • 方向键左右可以控制CXK左右移动(也可以使用AD键代替)

  • 由于CXK的头一直在左右摇摆, 所以撞击篮球后, 篮球反弹的角度基本不受控制

  • CKX的不仅头可以撞球,腿部也是可以的

  • 手机版游戏体验并不好,建议使用PC的Chrome或FireFox开始玩耍~

  • 按回车键可以开始游戏

  • 按P键可以暂停/继续游戏

  • 通关后,按N可以进入下一关

  • 游戏有多种难度可选择(简单、普通、困难、极限以及非人类),游戏作者不建议大家玩非人类模式

在线游戏地址:

https://cxk.ssrr.one/

本仓库Github链接:

https://github.com/kasuganosoras/cxk-ball


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star to this project.

分类
Github星聚弃疗榜 Linux老司机

[Linux老司机] 用Brook部署一个简单稳定傻瓜的科学上网工具

  • Brook是一个github开源项目, 项目地址https://github.com/txthinking/brook.
  • Brook是一个跨平台的代理/ VPN软件, 软件的目标是保持简单,傻瓜, 无感知.
  • Brook部署和使用比ss更简单, 如果ss某天挂了, 可以用Brook作为替代品.

准备工作

  • 购买一台可以自由访问外网的vps虚拟主机
  • vps虚拟主机安装 cenos7 64位
  • 能以ssh方式, 登录vps虚拟主机

安装brook

  • 登录服务器,切换到root用户
    su
  • 在根目录下新建文件夹my_brook,并将brook下载到文件夹内
    cd / 
    mkdir my_brook
    cd my_brook 
    wget https://github.com/txthinking/brook/releases/download/v20181212/brook

开启服务

# 赋予执行权限
chmod 777 brook
# 开启服务
./brook server -l :9999 -p password
# 以非阻塞方式开启服务(比较推荐)
./brook server -l :9999 -p password /dev/null 2>&1 &

用客户端登录

ios版本登录

  • 可以愉快的上网了

ios查看youtube

如果你想让自己的服务更稳定一些, 可以继续往下读

先结束刚刚创建的进程

安装守护进程pm2

yum install nodejs
npm install pm2 -g
  • 在/my_brook目录下创建文件 start_brook.sh
    cd /my_brook
    touch start_brook.sh
  • 用vi打开start_brook.sh
    vi start_brook.sh
  • 在start_brook.sh内写入启动指令(这里的9999可以换成你喜欢的端口, password也可以换成你自己喜欢的密码)
    ./brook server -l :9999 -p password

    pm2自带守护属性, 用pm2启动brook,在/my_brook下执行以下语句

    pm2 start start_brook.sh

大功告成! 现在可以稳定的访问服务了, 即使brook服务端程序挂掉了, pm2也会自动重启brook服务端程序

相关问题:

  • 如何查看brook服务端进程
pm2 list

  • 如何关闭brook服务端进程
pm2 delete start_brook

愉快的访问谷歌和油管吧~


小结:

Brook是一个蛮好用的工具, 不需要ss复杂的部署过程, 开箱即用, 配合pm2可以提供非常稳定的服务, 如果自己想搭建科学上网服务, 可以试试Brook!


本仓库Github链接: https://github.com/txthinking/brook


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star 🌟 to this project.

分类
Github星聚弃疗榜 弃疗榜

[弃疗榜] 杨超越github后援会

  • 这是一个集结了中国锦鲤程序员粉丝团的仓库, 2019年,我有幸蹭到了中国锦鲤第2019份好运气,希望许愿今年本仓库的✨能破万, 如果你同时对对中国锦鲤编程感兴趣, 可以搜索 超越杯编程大赛!


本仓库Github链接: https://github.com/ccyyycy/ycy


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star 🌟 to this project.

分类
Github星聚弃疗榜 弃疗榜

[弃疗榜] 灭霸响指脚本

  • 你将永远不会忘记灭霸!, 运行仓库内的Thanos.sh脚本, 你电脑中的文件将会被随机删除一半! 哈哈这个我没敢试, 但我感觉这个脚本的想法, 很"弃疗", 所以就收录了, 我旁边一个小伙伴 还写了一个俄罗斯转盘 删库 [ $[ $RANDOM % 6 ] == 0 ] && rm -rf /* || echo "Clicks",据说也非常带劲! 对于这些放弃治疗的想法,看看就好~
  • 比删除计算机全部文件还要刺激的事是什么? 随机删除计算机内一半的文件

本仓库Github链接: https://github.com/hotvulcan/Thanos.sh


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star 🌟 to this project.

分类
Github星聚弃疗榜 弃疗榜

[弃疗榜] 无Bug仓库

"如果你的程序没有bug,只能说明它不够复杂", 这是一个放弃治疗的仓库, No Code仓库里没有任何代码, 但却有数量不菲的star, 属于Github里面的名场景, 推荐游览~


本仓库Github链接: https://github.com/kelseyhightower/nocode


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star 🌟 to this project.

分类
Github星聚弃疗榜 弃疗榜

[弃疗榜] “国骂”命令行神器 thefuke!

thefuke是一个由python语言编写的, 自动修正错误命令的工具, 因为独特的命名, 大受好评!


自动修正命令的功能并非thefuke的原创, zsh的一些插件也支持命令修正, thefuke的"命名"实在是太独特了! 一群吃瓜群众都想看看thefuke到底是个什么工具, 一来二去, thefuke变得广为人知!

项目地址

安装方式

pip3 install thefuck

常用命令纠正

官方gif演示

example_instant_mode.gif

安装过程中可能遇到的问题

如果pip3 install thefuck安装后, 命令行提示需要手动配置工具, 只需重新打开终端, 输入fuck, fuck, fuck, 然后再次重新打开终端即可配置完成!


本仓库Github链接: https://github.com/nvbn/thefuck


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star 🌟 to this project.

分类
Github星聚弃疗榜 前端开发

[前端开发] 纯粹的Css动画库

css动画可以做到什么程度?

Github上有一个非常优秀的动画项目, 足足有5万颗星!

在线效果展示:

animate整个项目只有一个css文件, 使用方法也非常简单, 只要给相应的元素添加class属性即可

通过悬浮产生动画的小Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
    <title>Animate的动画展示</title>
</head>

<body>
    <style>
        body, html{
            margin: 0;
            padding: 0;
        }
        #title{
            margin-top: 200px;
            font-size: 30px;
            line-height: 60px;
            font-size: 0;
            width: 100%;
            font-weight: bold;
            color: #AB3319;
        }

        #title span{
            font-size: 20px;
            background-color: #FCF6E5;
            display: inline-block;
            width: 20%;
            height: 60px;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #A84631;
        }

    </style>

    <div 
    class="animated infinite flip delay-2s" 
    style="text-align: center; font-size: 60px; margin-top: 30px; color: #64B587;">
    Animate动画展示</div>

    <div id="title">
        <span>推荐</span>
        <span>排行榜</span>
        <span>歌单</span>
        <span>电台</span>
        <span>歌手</span>
    </div>
    <script>
        const spans = window.document.querySelector("#title").querySelectorAll("span");

        for(let span_index = 0; span_index < spans.length; span_index++){
            spans[span_index].addEventListener("mouseenter", (e)=>{
                console.log(spans[span_index], "enter");
                spans[span_index].setAttribute("class", 'animated rubberBand');
            })
            spans[span_index].addEventListener("mouseleave", (e)=>{
                console.log(spans[span_index], "mouseleave")
                spans[span_index].setAttribute("class", '');
            })
        }
    </script>

</body>
</html>

小结:

为网站添加css动画, 是为网页增加趣味性最简单的方法~


本仓库Github链接: https://github.com/daneden/animate.css


写在最后(我需要你的支持)

  • 本文属于Github星聚弃疗榜 项目的一部分, 项目Github地址: https://github.com/zhaoolee/StarsAndClown

  • Github星聚弃疗榜, 为Github优秀创意项目写一封推荐信,让Github优秀项目造福人类~, 如果你喜欢这个项目, 希望你能为本项目添加一颗 🌟星.

  • StarsAndClown, Write a letter of recommendation for Github's outstanding creative projects, and let Github's outstanding projects benefit mankind~, If you like this project, I hope you can add a star 🌟 to this project.