SnippetsLab & github gist & Lepton

gist主要用来管理一些基本的代码片段,比起github上面的项目每次要提交全工程更加轻量和简单。很多时候我们的很多代码片段是可以复用的,这些实际上也跟抽象相关。特别是脚本语言,比如javascript或者python之类,很多时候很少的修改就可以解决其他的问题。

gist的优势

  • 每个Gist都是一个Git库,有版本历史,可以被fork或clone
  • Gist有两种:公开的和私有的,私有的不会在你的Gist主页显示,也无法用搜索引擎搜索到,但这个链接是人人都能访问的
  • Gist可以搜索、下载、嵌入到网页。其中嵌入网页的功能还是不错的
  • 有很多时候我们只是想记录代码的一部分,没有必要把一堆的其他代码提交到网上去
  • 可以用gist保存一个有历史记录的长期更新的列表清单(知识点、知识迭代等)
  • 记录简短的想法或总结:有时候想总结一些技术或经验,或者有一些想法,由于内容比较短,还不足以发表博客,可以先记录下来

使用SnippetsLab来管理Github Gist的好处

  • SnippetsLab支持的代码高亮比一般的文本编辑器多很多
  • 同步到gist之后,可以保证代码的同步

gist的使用可以参考
Gist使用经验

observablehq
可以用这个应用为gist写独立的网页,方便展示,同时很多javascript代码可以展示最后的结构,前端开发的福音。
如果是纯前端代码,做好之后可以使用这个来发布,不需要在发布一个新的网页了

gist使用英文原版网页

gist和SnippetsLab相关的一个开源electron软件

Leptong官网

我的使用经验

  • 使用SnippetsLab来管理代码片段,更专注的代码管理
  • 主要用于管理javascript和python的代码片段
  • 将经常要更新和使用的list来用snippets来管理,毕竟snippets里面的文件更少,文档模式更方便管理,同时发送到gist会更加方便。
  • Lepton是开源的Gist客户端,可以针对需要进行修改相应的代码
2019/9/1 posted in  linux

图片颜色画板抓取

color-thief-py
分装的很好,可以直接安装使用,提供api非常方便

colorfic
这个也不错啊

Text2Colors
这个非常有意思,一定要研究一下
后面可以多研究一点这种类型的应用。集成到平台中去

gucci

PyColorPalette

rayleigh
使用颜色搜图

colorgram.py
可以取色

paintingReorganize
Use PCA analysis to reorganize the pixels of a painting into a smooth color palette.
颜色的分析

https://github.com/athoune/Palette

https://github.com/fundevogel/we-love-colors

https://github.com/tody411/PaletteSelection

https://github.com/Zsailer/yerkes

https://github.com/PJijin/Cover-Image-Generator

2019/8/29 posted in  web

django 的 gulp集成

django 集成gulp task run来更方便的发布静态文件

基于Adminto3的基本的gulp使用

首先是安装 gulp

$ npm install gulp -g

然后运行到模板文件中,运行

$ npm install
  • gulp - recompiles and minifies theme assets into dist directory and starts local server serving the theme.
  • gulp build - recompiles and minifies theme assets into dist folder.

迁移步骤

  • 将src、package.json和gulpfile.js 拷贝到项目根路径
  • 在Template中引入模板文件
  • 修改gulpfile.js

将输出路径改到static下面,使用dist来单独隔开

var folder = {
    src: "src/", // source files
    dist: "dist/", // build files
    dist_assets: "collect_web/static/dist/assets/" //build assets files 
};

删除掉HTML相关部分,使用django来管理HTML template,所以不在需要使用gulp来管理了

// copy html files from src folder to dist folder, also copy favicons
function html() {
    var out = folder.dist;

    return gulp
        .src([
            folder.src + "html/*.html",
            folder.src + "html/*.ico", // favicons
            folder.src + "html/*.png"
        ])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file',
            indent: true
        }))
        .pipe(gulp.dest(out));
}

同时删除下面的HTML调用部分


function watchFiles() {
    gulp.watch(folder.src + "html/**", gulp.series(html, reloadBrowserSync));
    gulp.watch(folder.src + "assets/images/**/*", gulp.series(imageMin, reloadBrowserSync));
    gulp.watch(folder.src + "assets/fonts/**/*", gulp.series(fonts, reloadBrowserSync));
    gulp.watch(folder.src + "scss/**/*", gulp.series(css, reloadBrowserSync));
    gulp.watch(folder.src + "js/**/*", gulp.series(javascript, reloadBrowserSync));
}


// default task
gulp.task(
    "default",
    gulp.series(
        copyAssets,
        html,
        imageMin,
        fonts,
        css,
        javascript,
        'watch'
    ),
    function(done) {done();}
);
  • 使用npm install 安装
  • 开发的时候启动gulp即可,这样在修改的时候就可以自动更新的dist中
  • 修改gitignore文件,不要把node_modules文件上传到Git中了
  • 修改模板文件的static

2019/8/29 posted in  python

瀑布流

Waterfall

宽度自适应瀑布流
https://myst729.github.io/Waterfall/
还可以,做成了异步加载

waterfall

原生 JavaScript 实现的瀑布流效果,兼容到 IE8。

Stick

stick是什么 stick是一个响应式的瀑布流组件。

weibocard

Columnizer-jQuery-Plugin

column layout

列式布局

ftcolumnflow

文字的流

查询关键字 column grid

一种比较神奇的排序算法

可以研究研究的神奇的排序算法

http://suprb.com/apps/nested/

这个一定要研究一下

elastic-columns

效果看上去不错,但是感觉实现比较复杂

columns.js

这个包需要好好研究一下

masonry

比较好用的包,代码也比较简单
比较推荐

bootstrap-waterfall

Bootstrap的
比较推荐

2019/8/27 posted in  web

图片Editor分析 fabircjs 扩展包

angular-editor-fabric-js

非常好的使用fabric实现的angular带工具栏的内容

angular-fabric

这个也做的比较好,但是前段页面总是卡卡的,不知道是什么原因

react-fabricjs

react版本,但是没有看到demo

React Design Editor

非常好的基于react的可拖拽花瓣框架

vue-fabri

vue版本的fabric,没有截图

multi-draw

☁️ 基于Fabric.js+Socket.io的多人在线实时同步画板

demo挂了,看不到,可以跑起来看看

floido-designer

这个感觉非常靠谱。

还是用了electron,这样的好处是可以做成客户端了。体验会更好

vue-card-diy

手机版的自定义画板

react-sketch

样子做得一般般,但是可以使用了,用来学习是不错的选择

pie-js

还比较不错

geckos

An online Card Editor with Templates http://gulix.github.io/geckos/

没运行起来,后面可以试试

基于canvas的高级画板程序.

全局绘制颜色选择
护眼模式、网格模式切换
自由绘制
画箭头
画直线
画虚线
画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形
文字输入
图片展示及相关移动、缩放等操作
删除功能
支持画板同比缩放
支持图形即时显示

lukis

photo-chrome

A state of the art web based photo editor module made using angular v4

值得好好研究研究的项目

[fabricjs-pathfinding](https://github.com/kevoj/fabricjs-pathfinding)

可视化的走迷宫,非常好的demo例子

AngularJS & FabricJS - 2D - Diagram

A browser-based 2D diagram editor, built using AngularJS, AngularUI and Fabric.js. This project is built by [Big-Silver].

react-redux-fabricjs

Fabric.js with React/Redux

2019/8/27 posted in  web

在线python editor

2019/8/26 posted in  python

图片Editor 分析

tui.image-editor

Full-featured photo image editor using canvas

mini画板

这个一直在更新,是可以使用的工具。使用npm和js进行管理

WebGL Filter

python 和js写的

fabric-js-editor

这个就是现在需要的针对图片和文字编辑的开源组件。他使用的是Fabric.js

Fabric.js

Fabric.js

在这个网站上有很多针对网站的实现的内容,研究清楚这个可以直接进行编辑。

https://github.com/aurbano/nuophoto

这个实现的一般般

PlantUML Editor

https://github.com/kkeisuke/plantuml-editor

基于vue的 online UML编辑器

文档editor

https://github.com/Z-Editor/Z-Editor
https://z-editor.github.io/
A tool to create, edit and print formal Z-notation documents.

Method-Draw

Method-Draw

非常非常好的图片Editor

yanshuo.io

用CKeditor来做的??

2019/8/26 posted in  web

Computer Science课程研究

2019/8/25 posted in  python

Markdown PPT 工具 分析

平时的文档基本上都以markdown形式进行输出,markdown可以导出到blog, gitbook, jekyll等等模型中。那么同时markdown也可以直接生成为对应的PPT,在平时讲解的时候方便直接进行投屏讲解。减少很多的制作PPT需要花费的时间。这里主要整理当下比较流行的markdown模式的ppt工具

nodeppt

nodeppt github地址

nodeppt 2.0 基于webslides、webpack、markdown-it、posthtml 重构,新效果。
其中webslides使用标签的方式进行分页分割。所以对markdown会有一定程度的侵入。

使用npm进行部署,所以安装和使用非常简单,只有2条命令就可以发布markdown到PPT模式。

支持的翻页效果较多,行列式也较多,整体的PPT样式看上去是很不错的。

同时支持echarts、流程图 mermaid,数学符号 KaTeX 三个插件

相关文档支持也比较好

webslider

webslider
是刚才nodeppt的基础包。这个做出来的东西设计感很强,可以点击这里看一下他的demo
但是使用起来是使用XML的模式进行写作,从markdown调整过来会比较复杂。

Marp

marp
是一个基于electron框架开发的PPT工具,所以支持多个端。最终还是到网页上进行显示
他是直接使用markdown在marp工具上进行写作。
marp当前是第二个版本,版本还在开发中,还不是很成熟。

R markdown

一款基于R语言下的markdown幻灯片应用

文档比较详实,

slides

这个是做的比较好的基于reveal.js的在线幻灯片制作工具。非开源的

https://github.com/briancavalier/slides
https://slides.com

reveal.js

strut2

https://github.com/tantaman/Strut

非常好的基于3D的带编辑器的幻灯片制作工具

wtf-slides

wtf-slides

感觉一般般 ,但是可以学习一下代码

matrix

matrix
有时间可以研究一下这个,用的几个包还是很不错的

md2googleslides

最后生成google slides

2019/8/25 posted in  web

怎么做好PPT

做好PPT的5个方向

Treat your audience as king 听众是上帝

减少灌输,更多的给听众他需要的内容,使用更易懂的沟通模式。

Spread ideas and move people

较少平白的讲解,图片可以适当的活动,产品的弹出可以加一个突然的动作,以及一些动态的小视频。吸引听众对PPT的注意,需要动态的东西。

Help them see what you are saying

让大家看到你所说的

  • 人的思维分为两种,思考者和观察者,让思考者去听和思考,让观察者去观察。所以需要在演讲和PPT两方面去做
  • 使用最少的文字表达你的意思,尽量使用图,减少文字,过多的文字会让听众从你的语言上分心去阅读。
  • 使用脑图更好的表达意思。让听众接受你的思维方式,让你和听众能够有一个一致的思维方式。
  • 将文字改为图片、表格或者图形,更容易吸引人。

Pratcice design, not decoration

  • 90% 以上的设计都是破坏性的
  • 需要有一个主要要点。每次只显示一个观点,不要把所有的东西一次推给听众。 缩放图片,使其占满幻灯片。删掉不需要的东西

Cultivate healthy relationships 和幻灯片培养健康的关系

  • 放手幻灯片,不要隐藏在幻灯片后面
  • 打破对幻灯片的依赖,让你和听众做好准备
  • 将文字尽量减到最少,只显示关键的字
  • 然后不停的练习、练习、练习,思考如何和幻灯片的内容结合,最后可以直接面对观众去演讲。让你和观众有眼生的交流和互动

做好PPT的前期建议

在讲述之前,首先明确几个事情

  • 你跟谁在沟通?——和你的受众保持共识
  • 希望你的受众了解哪些内容或者做什么? —— 明确希望受众如何反应,并考虑你的沟通方式以及调整基调
  • 如何表达自己的观点?

了解你的对象

你的受众

你的受众越具体,你就越能成功地进行沟通。

一次性尝试与太多需求不同的人沟通,远没有与细分的一部分受众沟通高效。

你对受众了解得越多,就越能准确理解如何与之产生共鸣,如何在沟通中满足双方的需求。

你自己

思考你与受众的关系以及你期望他们如何看待你是非常有帮助的。

现场演讲的建议

  • 写下每页幻灯片的重点。
  • 大声讲给自己听。这有利于激活大脑半球,从而帮助你记住演讲的重点。这还能迫使你练好幻灯片之间的承接词,避免像其他人一样卡壳。
  • 在朋友或同事面前做一次模拟演讲。

简洁的幻灯片用于现场演示(因为你会在现场详细地解释一切),详实的文档则留给受众自行消化。

三分钟故事

三分钟故事就是:如果你只有三分钟的时间把必要的信息告诉受众,你会讲什么?这是确保你对所要讲的故事理解得清晰透彻的好办法。 ——摆脱幻灯片的好办法

三要素:

  1. 必须能陈述你独特的观点
  2. 必须切中要害
  3. 必须是一个完整的句子

故事版——思维导图

不懂故事板技术,活该你PPT没逻辑!

打算创建内容的可视化大纲,它能确立沟通的结构,是打算创建内容的可视化大纲

可以使用故事版来描述,也可以使用思维导入来描述

不要从幻灯片软件开始。很容易还没想清楚如何组织各个部分就陷入到制作幻灯片的模式中去,最终只留下一套臃肿却言之无物的幻灯片。

PPT的使用

颜色的选型

少既是多

根据显示方式来选型

开哪些窗口

选择窗格 —— 图层模式,开启选择窗口适合将哪些显示,哪些隐藏,已经相应的图层顺序 。 类似PS等大多数制图软件。

动画窗格 —— 编辑动画用,基本上所有的动画都在动画窗格可以设计。

在屏幕足够大的时候,建议使用这两个窗格。可以制作大多数的动画效果。

图层的使用

组合的使用

动画的使用

  • 多看——别人是怎么玩的
  • 多想——结合自己的使用

图片的选择

  • 尽量使用PNG图片
  • 查找图片的方式
  • 尽量使用高清图,最后可以压缩图片

母版

每个PPT前都需要整理的

注意事项

两种不同形式的PPT

查看型PPT

  • 尽量多以图表、标题、图片形式去讲述
  • 必要的文字描述可以放在备注中
  • 可以直接画一些框架模块图
  • 颜色可较丰富
  • 较少的动作,方便PDF形式表述

讲述型PPT

  • 减少颜色,准确的是减少色系
  • 减少页面元素,突出重点
  • 可以用动作来吸引注意,使用动作来帮助理解
  • 增加视频内容
  • 少用文字,将文字变为图表、图片的形式
  • 结合脑图

模板的使用

图表、图标

PPT、Prezi和Snow

PPT —— 线性的讲述模式,现在大多数ppt的模式给人以一种线性的思维定型模式。其实PPT式可以支持多种模式的,但是大多数的模板以及一般的思维都将PPT固定为一种线性模式了,一篇到另一篇都是一个线性的结果。

Prezi —— Prezi的特点是缩放用户界面,在演讲过程中可以根据进程放大缩小。总的来说prezi是一个二维结构,可以缩放、旋转、无边界、在线编辑、实时保存、简单易用。

Prezi explorer

参考两个得奖Prezi
malmaison-hotel

Strut —— Strut实际上是一个三维空间的ppt,可以有x、y、z三个轴,来进行三维的跳动,从而能够给予更多一维的空间,同时也赋予了一定的prezi的缩放、旋转、无边界功能(但是这几个功能缺失没有Prezi做的强大)。另一个突出点就是Strut不需要客户端,直接在浏览器端制作,浏览器端播放,随时随地能够查看。

附件

配色网站

adobe配色网站
www.colourlovers.com

图片素材站

google image
unsplash
花瓣
阿里图标库
免费资源站

百度网盘

2019/8/23 posted in  工作方法

django Template中取多对多关系

{% for place in places %}
    Name: {{ place.name }}<br/>
    Area: <br/>{% for area in places.area.all %}{{ area }}<br/>{% endfor %}
{% endfor %}

在Template中可以取到多对多关系,使用不带括号的搜索就可以拿到。

也可以使用

{% for place in places %}
    Name: {{ place.name }}, Area: {{ place.area.all|join:", " }}
{% endfor %}

查询模式2

将查询到的内容批量存入context中

from myapp.models import Area, Place

def detail(request, place_id):
    place = Place.objects.get(pk=place_id)
    areas = place.area.all()

    return render_to_response('detail.html', {
        "place": place,
        "areas": areas,
    })
<h3>{{ place }}</h3>

{% if areas %}
  <ul>
  {% for area in areas %}
    <li>{{ area.name }}</li>
  {% endfor %}
  </ul>
{% endif %}
2019/8/22 posted in  python

django-taggit

安装 django-taggit

pip install django-taggit -i https://mirrors.aliyun.com/pypi/simple

添加模型

setting.py 中添加引入taggit app

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'taggit',
]

models.py中添加tag字段

class Article(BaseSchema):
    title = models.CharField(max_length=1023, null=True, blank=True, default='')
    description = models.CharField(max_length=2047, null=True, blank=True, default='')
    content = models.TextField(null=True, blank=True, default='')
    slug = models.SlugField("slug", max_length=255,
                            help_text="Used to build the article's URL.")
    banner = models.URLField(null=True, blank=True)
    header_image_height = models.PositiveIntegerField(default=75)
    header_image_width = models.PositiveIntegerField(default=75)
    header_image = models.ImageField(upload_to='photos/%Y/%m', height_field='header_image_height',
                                     width_field='header_image_width',
                                     null=True, blank=True)
    categories = models.ManyToManyField(
        Category, blank=True, related_name="entries", verbose_name="categories")
    tags = TaggableManager()

    def __unicode__(self):
        return self.title

    def __str__(self):
        return self.title

添加完成之后重新发布模型

python manage.py makemigrations
python manage.py migrate

在admin中添加模型

class ArticleAdmin(admin.ModelAdmin):
    # fields = ["title", "description", "banner","content","header_image","categories"]
    fieldsets = [
        ('basic content', {"fields": ["title", "slug", "description", "content", "tag"]}),
        ('图片', {"fields": ["banner", "header_image"]}),
        ('category', {"fields": ["categories"]})
    ]
    list_display = ["title", "description", "updatedAt"]
    list_filter = ['updatedAt']
    search_fields = ['title', 'description']
    filter_horizontal = ('categories',)

    def get_queryset(self, request):
        qs = super(ArticleAdmin, self).get_queryset(request)
        qs = qs.filter(deletedAt=None)
        return qs

在前台显示tags

2019/8/21 posted in  python

颜色分析功能

2019/8/19 posted in  web

cookiecutter-django 部署指南

cookiecutter对于项目的管理结构比较清晰,但是在部署的时候就会出现这样那样的问题,这里整理一下cookiecutter构建的项目上基于guincorn的部署指南。 后面再逐步整理其他的部署指南

安装配置指南

1. 虚拟环境的安装和配置

首先还是要创建我们的虚拟环境 virtualenv,这里就不过多介绍了。配置完成后,进入虚拟环境,安装依赖包

(venv)....$ pip install -r requirements/production.txt

系统原生生成的还是需要添加我们自己添加的部分依赖包,所以在之前还是要修改一下production.txt文件,加入自己的依赖包

完成后对于cookiecutter还是要加入自己的一些配置文件,配置文件建议放到venv中,这里我们在虚拟环境中添加一个新的配置文件

2. 修改环境变量

# vi ../collectvenv/bin/postactivate

export WEB_CONCURRENCY=4
export DJANGO_SETTINGS_MODULE='config.settings.production'
export DATABASE_URL='postgres://<user>:<password>@<ip>:<port>/<databasename>'
export DJANGO_SECRET_KEY='<添加秘钥>'
export DJANGO_ALLOWED_HOSTS='<添加网站名>'
export REDIS_URL='redis://127.0.0.1:6379/<redis>'
export DJANGO_ADMIN_URL='admin/'

把这些添加上之后不要忘记了要执行一下

(venv)... $ source ../collectvenv/bin/postactivate

让这个配置文件在当前环境下生效

3. 添加guincorn配置文件

配置文件可以在collect_web项目路径下

vi /opt/collect/collect_web# vi gunicorn.conf.py

把相应的配置都加上

import logging
import logging.handlers
from logging.handlers import WatchedFileHandler
import os
import multiprocessing
bind = "0.0.0.0:9091"   #绑定的ip与端口
backlog = 512                #监听队列数量,64-2048
#chdir = '/home/test/server/bin'  #gunicorn要切换到的目的工作目录
worker_class = 'sync' #使用gevent模式,还可以使用sync 模式,默认的是sync模式
workers = 4 # multiprocessing.cpu_count()    #进程数
threads = 16 #multiprocessing.cpu_count()*4 #指定每个进程开启的线程数
loglevel = 'info' #日志级别,这个日志级别指的是错误日志的级别,而访问日志的级别无法设置
access_log_format = '%(t)s %(p)s %(h)s "%(r)s" %(s)s %(L)s %(b)s %(f)s" "%(a)s"'
# accesslog = "/home/log/gunicorn_access.log"      #访问日志文件
#errorlog = "/home/log/gunicorn_error.log"        #错误日志文件
accesslog = "-"  #访问日志文件,"-" 表示标准输出
errorlog = "-"   #错误日志文件,"-" 表示标准输出
proc_name = 'collect_web'   #进程名

4. 执行测试

配置完成后可以执行测试

/opt/collect/collect_web# gunicorn -c gunicorn.conf.py config.wsgi

使用默认的gunicorn需要对项目的路径比较清楚,我们发现cookiecutter的wsgi.py文件是写在config里面的,所以这里我们需要修改到config下面,才能找到相应的wsgi,然后进行到下一步

5. 修改配置文件

启动后会发现依然有一部分的环境变量找不到,实际上是因为我们没有使用那一部分。所以这里比较重要的就是修改config中的production.py中的相关内容。把不需要的尽量屏蔽掉。

6. 发布相应文件

如果是新建数据库的话记得migrate。如果是新环境的话记得去collectstatic一下,把所有的静态文件都发布到同一个包中去。

cd project-directory
git pull
python manage.py migrate
python manage.py collectstatic

7. 配置nginx

server {
    server_name ***
    listen 80;
    location /{
        proxy_pass http://127.0.0.1:9091/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass_request_body on;
        client_max_body_size 100m;
    }

    location /static/ {
        alias /opt/collect/collect_web/staticfiles/;
    }
}

systemd配置

待完成事项:

  • 配置自启动和进程监控
  • 配置github钩子,一键同步更新

可以参考的网站

gunicorn官方部署文档

cookiecutter-django官方文档

2019/8/13 posted in  python

文档工具制作

https://github.com/phodal/2md
html转化为markdown

https://github.com/domchristie/turndown
这个是原始的网站工具

http://url2io.applinzi.com/docs
提取正文的网页服务

https://www.cnblogs.com/yetuweiba/p/4149683.html
提取网页正文的开源库的比较

https://www.cnblogs.com/jasondan/p/3497757.html
我为开源做贡献,网页正文提取——Html2Article

https://yq.aliyun.com/articles/622451
网页正文提取方法一二

https://www.yuanrenxue.com/crawler/news-crawler-content-extract.html
大规模异步新闻爬虫:网页正文的提取

https://dfkan.com/2333.html
使用API智能提取网页上的文章正文:url2io

https://www.jianshu.com/p/af5c5ef4f2f5
使用Python进行网页正文提取

http://www.elias.cn/MyProject/ExtMainText
ExtMainText —— 提取html文档正文

https://github.com/goose3/goose3
✨Python下非常好用的提取库

2019/8/8 posted in  web