大概是日记吧

3 minute read

芝加哥和村里相连的那条路并不算宽敞,还总是在维修,然而即便如此,来来回回开了那么多次,却从来没有过拥堵。八九点的时候,天还依稀的亮着。方圆几百米几乎没有车辆,放眼望去,隐约能看到远处的红光。

送走了大哥,大大和秋生也回到了城里,肖神没有什么特殊的原因应该也不会来了。回到住处的时候,忽然意识到这熟悉的黑暗房间竟是如此空旷。

若说之前是因为喜欢不被打扰的宁静才蜷缩在夜里,那现在似乎没有什么昼夜颠倒的理由了。只要拉上窗帘,这个房屋内的一切,便和外面的世界断开了联系。在阳光进不来的角落里,时间只是一个概念,昼与夜都是一样的漆黑。

如果这样下去的话,估计自己在未来的很长一段时间内,都见不到什么活人了。除了每周和教授 Skype 以外,甚至连说话的需求都没有了。

所以,为了给自己留下点时间的概念,还是写点什么东西记录一下平时的生活好了。日常的工作也好,平时的消遣也好,做了什么奇怪的梦也好。至少这样一来,在日后回顾的时候,就不会把这段时间的记忆误认为是幻觉了。

毕竟,对于一段无法分享的记忆来说,有谁知道什么是真的,什么是假的呢?

06/26/2017

本来想从今天开始调整作息的,谁知道自己又因为折腾 ssl certificate 花了一晚上时间… 果然刚开始入门的时候,还是应该老老实实地看着教程,先把服务器的工作原理搞懂,再去折腾这些有的没的。

四月份左右的时候自己也折腾过一阵子,那时主要是因为写了一阵子 Python 之后一时兴起想折腾一下 Flask。然而,折腾了几天之后,便因为我太懒各种各样的原因,在 digital ocean 注册了个账号之后就放那里了。这一次又开始折腾,主要是因为写了几天 React Native 之后,觉得 React 好像还蛮有意思的,所以想试着把那个放在那里烧钱的服务器翻出来,试着写一个博客。

感觉 web 开发还是蛮神奇的,但目测也是一个大坑。因为和自己平时的工作内容差的太远了,如果真的要全心投入学习的话,我的科研大概就进行不下去了,所以只能偶尔抽空看两眼,实在是有些遗憾。不过作为个人兴趣,用来打发时间,感觉都是不错的选择。

之所以说是大坑,主要是因为要学的东西还蛮多的,而且似乎更新换代特别快(?)【因为到目前为止只有一个初步的印象,所以不好下定论】。在科研中遇到问题一脸懵逼的时候,无论是十年前还是二十年前的论文,放到今天都还是很棒的资料。在学 C++的时候,StackOverflow 上几年前的问题,基本也都能满足个人需求,五年前出版的 C++ Primer 放到今天仍然是一本极佳的入门教材。

但 JavaScript 是什么鬼??想起我年初的时候还一本正经地找了本书,看了整整两百页的包括 Object 和 Array 在内的种种 JS 语法讲解以及背后的逻辑,最后发现根本就不会有人在意这些纯粹的语法细节,也几乎没有项目是用纯粹的 JS 去实现的…

更不用提那个横空出世的 ES6 了【虽然真的超好用】。

因为前端想用 React 写,然而几乎和 React 相关的所有教程都不约而同地提到了 React Router,于是便去查了一下。本想跟着教程把大概的框架搭出来的,结果却看到了满屏的 error。一脸懵逼的之时顺手看了一下教程的发布日期…嗯?去年年底?感觉时间也没有很长啊…为什么现在这个版本的 API 完全不一样了???

不说别的了,就连 React Native 的官网,在最近几个月的时间内也发生了一系列魔改。先不说 Expo 是什么时候悄无声息地扩散到几乎每一个 demo 里的,create-react-native-app这种东西是什么时候突然出现的(顺带还植入了Expo),就拿 API documentation 来说,Using List View 的介绍页是什么时候变成 FlatList 的(刚刚我去看的时候发现又多了一个 SectionList???),Keyboard 这种东西又是什么时候出现的?为什么实际使用的 API 和 documentation 里介绍的又不一样…??

直到我一脸懵逼地打开了版本页,才发现 React Native 每个月都在更新。我第一次看到的大概是 5 月 1 号左右的 v0.44,而现在首页上挂着的是 20 天前出现的 v0.45,目测一两周之内 v0.46 就要出来了…【一口老血】

不知道这样的景象在 web 和 app 开发中算不算正常,反正我是惊呆了【…】。

于是自己的那个所谓准备要写的博客到现在为止都还是一幅惨不忍睹的样子,在昨天后知后觉地发现可以把 client 和 server 分成两部分写的时候【…】,决定把后端部分交给Flask,顺便研究一下SQLAlchemy。于是在一番折腾下,又多了另一个准备用来放 API 的更加惨不忍睹的子域名

虽然正确的写博客的姿势大概不是这样…【小声】

啊,本来只想随便记录几句生活的,结果不小心就扯了这么多,大概因为是第一篇,所以把之前积蓄了许久的吐槽一起发出来了吧。

那就以几句日常记录收尾好了。

因为家里的肉吃完了,晚上煮泡面的时候便直接把培根煮了进去(反正也长得蛮像的嘛),味道竟然还挺不错的。

晚上九点左右的时候,突然想起前一阵子有一张催款单还没来得及付,于是便去了趟邮局。路过星爸爸的时候,去试了一下最近刚出的Berry Prickly Pear Frappuccino,因为听网评说很甜所以只要了一半的糖浆,味道五星好评。

回来的路上去了趟超市,然而想着自己一个人呆着的时候大概是不怎么会做菜的,于是就只买了泡面和一堆零食。

睡了一整天还是觉得很困,大概是安眠药的副作用吧。为了提神,在大晚上又煮了杯咖啡…估计这时差是倒不过来了。一整袋咖啡豆已经快喝完了,这速度也是可以的。

闲着没事做把厨房给整理了一下,室友留在桌子上不知道多久的一堆食物残骸终于被我扔掉了。烧了壶水,然后在和冷水兑了一下之后,从冰箱造冰的那个口倒了下去,终于把堵在出口的那一整块冰处理掉了。

本来做完这些事情是想一脸兴奋地和人分享的,但也不知道和谁说,所以就记录在这里了。那今天就这样吧,给自己鼓个掌,啪啪啪。

06/27/2017

发现了TypeScriptFlow这两个检查类型的神奇的东西。在两者之间纠结了半天,然后选择了 Flow。配置好了 Babel,装了 Eslint Flowtype,然后默默地删掉了。用它的不便之处远远高于它的好处。反正只是写一个个人小博客,也没有什么猪队友坑人的情况,自己平时多留心应该就好了。

本来想弄成 REST API 的,结果突然想起在前一阵子为了写 iOS App 研究 Facebook 的时候听说的GraphQLRelay,于是又看了半天。倒是很快就把 GraphQL 和 Flask 接起来了,但凡是 Relay 涉足的地方,所有 API 和 documentation 都变得异常难懂..

于是在转了一圈之后,决定放弃 Relay 全家桶,投奔 documentation 无论怎么看都更友好的Apollo。可能是因为用Redux的原因,Apollo 的整个套路看起来都非常眼熟,大概就是 query -> fetch -> store -> update (render)这样的感觉(API doc 还没仔细看,具体词汇可能不是很准确,但大概就是这个意思【…】

因为时间原因没有做过多尝试,只接了一个 test query。看看明天能不能试试看接一个数据库,再写一个简单的个人验证什么的。

最后补几张截图好了,这样以后更新了还有机会回顾一下。

昨天的惨不忍睹的 api 界面: Hello There

今天接上了flask-graphql…用 GraphiQL 假装自己有 UI GraphiQL

然而首页现在还是一副惨不忍睹的模样… Home Page

啥?你问这个首页和create-react-app自动生成的那页有什么区别?

实际上我最后一行的署名是用 GraphQL 趴下来的。【一本正经】

哦还用 React Router 做了一个 about 和 404 页,就是还没加入 Navigation 而已。【继续一本正经】

好吧其实没什么区别。

折腾了这么几天也主要是娱乐为主,真正写东西的进度实际上还没多少,再加上本来基础就薄弱,感觉更多的是靠瞎折腾来学习吧。

…虽然按照这个现况来看,我的博客大概是一年都写不好了【逃

06/28/2017

第一次接触数据库,先是纠结了半天SQLiteMySQLPostgreSQL应该用哪个,后来因为Graphene-SQLAlchemy的教程里用的是 SQLite3,所以就决定跟教程走了。

然而在跟着 Graphene-SQLAlchemy 给的那个例子走的时候,发现它用了 Relay 的 Node…昨天就是因为这个奇怪的 Node 和 Edge 结构放弃了 Relay,于是看到这里的时候果断把 Graphene-SQLAlchemy 删了(因为剩下的教程都看不懂【…】),然后想用简单的GrapheneFlask-SQLAlchemy配合着一起写。然后写着写着…又发现要把 Flask-SQLAlchemy 返回的结构直接通过 Graphene 发出去的话,似乎要重复很多没有意义的内容…

于是又把 Flask-SQLAlchemy 给删了【虽然 Flask-SQLAlchemy 真的蛮好用的】,把 Graphene-SQLAlchemy 装了回来,照着并不是教程的另一个首页的例子写了一个 User model 和返回 users 的 schema。

照着 Flask 给的教程,试着把数据库弄起来了,然后加了两个以后肯定会删掉的所谓用户。虽然没接触过别的 ORM 所以没法做对比,但真心觉得 SQLAlchemy 蛮好用的…(’ー’)

为了方便以后查找,所以把代码在这里稍微整理一下好了:

先是数据库方面

# database/__init__.py
from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy.orm import scoped_session, sessionmaker

# 因为不知道自己会从哪个目录下运行服务器,用这个方式获取当前文件的绝对路径之后
# 可以避免数据库出现在奇怪的地方...
# 之前没用绝对路径,结果在别的目录下跑的时候一直报错orz
import os
dir_path = os.path.dirname(os.path.realpath(__file__))
engine = create_engine(
    'sqlite:///{}/db.sqlite3'.format(dir_path), convert_unicode=True)

db_session = scoped_session(sessionmaker(autocommit=False,
                                         autoflush=False,
                                         bind=engine))
Base = declarative_base()
Base.query = db_session.query_property()

然后是一个非常简单的 User Model..

# models.py
from sqlalchemy import Column, Integer, String
from sqlalchemy.orm import relationship
from sqlalchemy.ext.declarative import declarative_base
from database import Base

class User(Base):
    __tablename__ = 'users'
    id = Column(Integer, primary_key=True)
    name = Column(String)
    last_name = Column(String)

    def __init__(self, name=None, last_name=None):
        self.name = name
        self.last_name = last_name

    def __repr__(self):
        return '<User %r>' % (self.name)

有了上面这两个文件之后,就可以在 Python Shell 里往数据库里加东西了

>>> from database import engine, db_session, Base
>>> from models import User
>>> Base.metadata.create_all(bind=engine) # 一开始忘了这个,结果commit的时候一直跟我说table不存在
>>> horizon = User('Horizon', 'Blue')
>>> guest = User('guest')
>>> db_session.add(horizon)
>>> db_session.add(guest)
>>> db_session.commit()

然后就可以直接用 User 来进行 query 了

>>> User.query.all()
[<User 'Horizon'>, <User 'guest'>]

最后就是把 SQLAlchemy 和 Graphene 接上,写一个简单的 schema【突然想起来我是不是忘记介绍了…Graphene 是 Python 的 GraphQL 框架】

import graphene
import models
from graphene_sqlalchemy import SQLAlchemyObjectType

class User(SQLAlchemyObjectType):
    class Meta:
        model = models.User

class Query(graphene.ObjectType):
    users = graphene.List(User)

    def resolve_users(self, args, context, info):
        query = User.get_query(context)  # SQLAlchemy query
        return query.all()

schema = graphene.Schema(query=Query)

然后就好了。

虽然折腾了很长时间,但折腾好之后,发现还是要比想象中的简单很多,感觉像是直接把 GraphQL 和数据库连接起来了一样…【虽然不知道这样的处理方式是不是对的,会不会有安全问题什么的】

最后是 Flask 本身,没什么特别之处…主要用到的就是Flask-GraphQL的 GraphQLView

# app.py
from flask import Flask
from flask_graphql import GraphQLView
from flask_cors import CORS
from database import db_session

app = Flask(__name__)
# Enable cross domain fetch
CORS(app)

# For graphiql interface
from schema import schema
app.add_url_rule(
    '/', view_func=GraphQLView.as_view('graphiql', schema=schema, graphiql=True))

@app.teardown_appcontext
def shutdown_session(exception=None):
    db_session.remove()

if __name__ == '__main__':
    app.run(port=2333, debug=True)

然后就可以直接进行 query 了..比如查看所有的 users

Query Users

感觉 GraphQL 的一个优势就是在结构写好了的情况下,可以根据自己需要的信息来进行 query,不需要写额外的 API。假设现在除了 id 之外,还需要知道 name 和 lastName,只需要在 query 里加上这两个 field

Query User Name and LastNames

关于 GraphQL 今天就到这里了。明天要和教授 Skype,所以晚上还是得留点时间做些事情。听说 GraphiQL 只适合在 test 和 develop 的时候使用,最好不要直接挂出来,但我觉得留着也无妨 hhh,反正个人小网站嘛,应该也不会有谁看…【小声

刚才在查怎么给文章加目录的时候,发现现在一直在用的这个Minimal Mistakes Theme早就已经更新到完全不认识了…估计以后即便写好了新博客,这边也会一直使用(因为之前不知道怎么想的,买了十年的域名 orz),所以最近可以抽空更新一下..

那就这样吧,看 paper 去了(つ ´ω`)つ

06/29/2017

昨天还是没忍住,在睡觉前把 Minimal Mistakes 更新到目前最新版了。不过因为 Github Page 的引擎稍微有一些闲置,所以在配置上折腾了一点时间。装好了jekyll-paginate-v2,在本地也跑得好好的,结果 push 上去之后发现所有 pagination 的页面(主页和隐街)都是空白的。查了一下才知道 Github Page 只支持少量的 jekyll 插件(比如jekyll-paginate),所以想要用新插件的话只能在本地 build 好再传上去…可是如果这样的话我用 Jekyll 的意义在哪里??直接用 React 写一个 single page app 不就好了…

然后因为一些结构的变化又花了一些时间…Pagination 本身不支持按照 tag 来分类,再加上在新的主题里 archive 又是一个保留词,所以我就把原来用 archive 标记为隐藏的文章全都换成了 hidden(所有 hidden: true 的文章都会默认被 pagination 忽视),然后把隐街这里的 paginator 删了,换成了一个按年份排序的,按照 hidden 这个 tag 来过滤的一整页…好在文章也不多,所以全部摆在一页也不至于太乱。

rb-fsevent不知道为什么又有一些 bug,本来在用bundle exec jekyll serve进行本地测试的时候,保存应该立即 rebuild,但不知道为什么每次一保存就直接崩,说 arguments 的数量不对…这个直到刚刚在Gemfile里加上了gem "rb-fsevent", "0.9.8"才修好。

新版的 Minimal Mistakes 主题默认是没有上面的 header 的,所以为了找回原来的画风,又花了些时间…还有文件结构迁移和部分文章时间错乱什么的…总之在一番折腾下总算是好了,变成了下面这个样子:

image-center

那个网站的链接放到右上角了,这样平时自己点进去也方便【….】。

今天这个时间其实算蛮奇怪的,因为之前下午四五点和教授 Skype 完才睡,刚才到晚上十一点才醒,所以现在处于一个不知道应该睡觉还是应该继续干活的状态。那个网站那边还没添加什么新内容,之前看到Anime.js,觉得酷炫极了,应该会拿来用一下。

另外现在在首页加了一个菜单,按 ↑ ↑ ↓ ↓ ← → ← → b a enter 会跳转到about 页(虽然还什么都没有)。是用Mousetrap实现的。目前的想法是以后直接把入口藏起来,需要按一定的组合键,才可以打开一个输入窗口,然后输入指定信息之后(也可以是登录一类的),才可以看到网站的内容。然后为了避免每次打开都要重复这个过程,可以用 cookie 记录下来状态(某种意义上相当于就是登陆了)。然后网站的切换过程想写的酷炫一些…(为此昨天看了一圈动画效果,什么Velocity.js, Animate.css, Bounce.js,AniJS, Two.js(第一次听到这个库的时候我都惊呆了..因为之前只听说过three.js),Move.js, Dynamics.js, GreenSock-JSPixiJS…后面看中 Anime.js 主要是因为整个网站的配色都酷炫极了【…】)

…果然我的网站一年都写不好了。

临走之前说一句,在首页按 ↑ ↓ ← → 可以跳到隐街…不过如果是能看到这个文章的人,大概也不需要这个彩蛋了吧( • ̀ω•́ )

06/30/2017

本来想睡到中午就起来的,结果一觉睡到了晚上。八点钟起来收拾了一下,九点钟出门买了点吃的。因为吃了太久泡面和速冻包子,在思考了一下之后给自己买了块肉。回家简单地处理了一下,盐放的有点多,但是还是把自己感动的不要不要的。

看了一下好久没看的 React Native,再一次试着加上自定义键盘,结果折腾了半天,发现似乎是可以自己手动画键盘的,但是没法默认弹出这个手动画的键盘,再加上 app 的上传功能好像也不是非要手动画一个键盘,因此想了想还是把改的文件都 revert 回去了。也不知道是第几次做这个事情了。思考了一下之后决定转战论坛,在社区上面加了一个 swiper,然后做了一个假的按钮,点进去跳转到文章页。然而跳转进去的内容还没写,就在最下面加了个可以根据键盘浮动位置的输入框…嗯,说到底还是觉得折腾了这么久键盘的时间不能白费,所以把之前发现的功能放在了这里。还有一些要修的内容,输入框的高度也应该随着输入的内容而增高,不过这个后面再修好了。

前几天就有点想去芝加哥找人玩的冲动,但又觉得自己去的话总会给人添麻烦。“想来找你们玩”这种话在聊天窗口里写了好几次又删掉了。结果到最后还是没忍住说了出来,然后定了明天中午的车。希望不会睡过。

在首页里用react-anime加了一个动画效果。这个库大概是 Anime.js 的 React 迁移版,看上去还蛮酷炫的,但因为 Documentation 和 Example 现在全部炸裂,首页也还没写好,所以没有更多的参考..如果 API 太复杂的话,可能会考虑直接用 Anime.js 配合 ref 使用..

另外把首页的组合键改了一下,现在变成 ↑ ↓ ← → ↑ ↓ ← → 了…虽然也没什么区别【

今天时间不早了,那就这样了吧。

Categories:

Updated:

Comments