自己动手,做一款抬头显示的「Todo Hud」
我用过好多款 TodoList 软件,但事情一多总还是丢三落四,原本计划好要做的事情总是安静地躺在某个角落,等我想起来要去扫一眼的时候,都已快「物是人非」。。。
要是能在桌面上实时显示 TodoList,那该多好!但是 Mac 上做到这一点还真不是一件容易的事,那就退而求其次吧。我想了想,因为公司是使用 Google 办公套件的,自己每天用的最多的软件就是浏览器,要是能在浏览器新开 Tab 页的时候,都能实时显示 TodoList 的话,那就能满足我的需求了。
最简单的 TodoList
说做就做,我要的只是一个简单的 web 页面,在上面:
可以简单展示、创建、关闭待办事项。
为了通用一点,支持用户账号系统(只要最基本的注册、登录、重置密码就够了)。
保证内容的私密性。
所以它不能是一个静态页面,怎么着也要有一个数据库。为了这一点功能,去购买机器、申请域名,甚至还去搞域名备案,实在是不值得,我想 LeanCloud 的 云引擎 应该是最好的选择。
LeanCloud 云引擎提供了多个应用模版,最简单的一个 node-js-getting-started 就已经包括了一个 web app 的基本框架,并且还附带了一个创建 Todo 的简单例子。在它的基础上,再集成了 LeanCloud 自带的账户系统(连重置密码的功能都默认提供,这里不得不说这真是太方便了)。对于内容私密性,我使用了 LeanCloud 数据存储中的「ACL 机制」,让一条待办事项只有它的所有者可以访问,其他人连读取的权限都没有,这样就保证了用户之间的数据隔离。最后,UI 怎么办呢?对于我这样的前端小白来讲,bootstrap-material-design 已经是我能想到的最理想的组合了。
最后做出来的效果是这样:
用户注册
Todo List
这个项目的所有代码都放在 github/syncus 上了,大家可以自行获取,然后在 LeanCloud 中去部署自己的 web 应用。不过对于想直接试一试的朋友来讲,大家也可以使用这个地址 https://syncus.leanapp.cn/todos 来访问这一在线的 Todo List。
让 TodoList 抬头显示
TodoList 做完了,现在我们要想办法让它能够做到「抬头显示」,否则对我来说也没啥帮助,不过是又造了一个轮子而已。
Chrome 设置
Chrome 上设置稍微有点复杂,需要借助其他插件,其步骤如下:
从 Chrome Web Store 下载安装 Replace New Tab Page。
打开 Chrome 插件管理器(你也可以在地址栏直接输入 chrome://extensions/)
点击 Replace New Tab Page 的 Options 链接.
在地址栏中输入 https://syncus.leanapp.cn/todos。
OK,一切都好了,从现在开始,你每次打开一个新的 Tab 页,都会首先看到你自己的待办事项。
Firefox 设置
在 Firefox 上我们也需要安装插件 NewTabURL。
重启浏览器,可以通过 Ctrl+Shift+A 来打开插件管理页面,找到 NewTabURL 并点击 Options 按钮。
选择 URL 并输入 https://syncus.leanapp.cn/todos。
Safari 设置
进入 Safari 的设置页面。
在
Homepage
框中输入 https://syncus.leanapp.cn/todos,然后把New tabs open with
中选定Homepage
。
使用中可能的问题
Chrome 中 CSS 文件加载不了,页面显示异常
这可能是因为 LeanCloud 文件托管的域名导致的,可以参考这篇文章解决Fix Your Connection is not private error in Chrome.
自己动手,做一款抬头显示的「Todo Hud」相关推荐
- 「拼房」你敢吗?这款App这样玩「陌生人社交」
共享经济,全球各地正在如火如荼的进行着,案例可谓是不胜枚举! 用户痛点: 节假日房源紧张?一筹莫展! 高花销豪华酒店?又不想住条件比较差的青年旅社! 见偶像看演唱会一房难求?与偶像擦肩而过! 商务会议 ...
- c语言做简单的水果店程序,「筷赚」案例丨生鲜水果店如何运营
原标题:「筷赚」案例丨生鲜水果店如何运营 线下实体经营难,租金人工成本高,仅仅靠线下获客的话,门店根本难以维持,在互联网的发展下,越来越多的门店选择了在小程序开店,运营小程序店铺. 如何运营小程序? ...
- 自己动手做一款蓝牙小车
1.前期准备 准备好杜邦线.HC-05蓝牙模块.单片机(我用的是粤嵌的51单片机,自己做一个最小系统也行).小车底盘.电源.L298N.螺柱(固定零件用的).如果想做的话请自己买这些零件,做出来的效果 ...
- 腾讯首款战争策略手游「乱世王者」的兼容测试之路
作者:lane,腾讯适配测试负责人.WeTest专家兼容测试负责人 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view ...
- Android逆向之旅---爆破一款资讯类应用「最右」防抓包策略原理分析
一.逆向分析 首先感谢王同学提供的样本,因为王同学那天找到我咨询我说有一个应用Fiddler抓包失败,其实对于这类问题,我一般都会这么回答:第一你是否安装Fiddler证书了,他说他安装了.第二你是否 ...
- html文本显示_「前端开发」HTML入门与实战
[什么是HTML]: HTML: 超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. HTML 是用来描述网页的 ...
- matlab 等高线数值显示_「matlab等高线」matlab中contour 函数的用法(绘制等高线) - seo实验室...
matlab等高线 原文 contour 矩阵的等高线图 全页折叠 语法 contour(Z) contour(Z,n) contour(Z,v) contour(X,Y,Z) contour(X,Y ...
- 告别「佃商」,做拥有独立平台的真「电商」!
随着时代的发展,生意也在顺势变迁,很多商家企业,为了适应互联网经济冲击下的竞争市场,也逐渐开始自我升级,将发展的目光投入线上市场,勇敢地迈出了第一步. 于是乎,天猫,淘宝,京东这些成熟的电商平台,纷纷 ...
- 「司库立方」再获数亿元C轮融资,她们做对了什么?
今日,头部司库玩家「司库立方」宣布成功获得数亿元C轮融资,本轮融资由云晖资本领投.中信建投资本.贵阳创投.神骐资本(58产业基金)跟投,老股东信天创投持续追投.本轮融资资金主要用于迭代产品.加强市场推 ...
最新文章
- java gui 项目解密,java GUI(实例小项目--列出磁盘目录)
- 金融风控实战——生肖属性单变量分析
- CentOS 6 nginx(Tengine2.1.2)源码编译一键部署脚本
- 中国房地产官媒爆乐视投资国贸地产,布局AI智能家居生态
- 疯狂游戏型计算机配置清单,电脑配置清单
- 自动为DEV GridView控件添加SizeChanged事件
- IP地址的定义和含义
- ASP.NET前端解决方案之一:Ext.Net入门随笔1
- 游戏挂机计算机自己保护怎么办,游戏中遇到玩家挂机该如何应对?做好这5件事可以降低输的机率...
- JMeter安装及使用
- 回文数c语言 字符串,力扣 009 回文数 C语言
- k3s 快速入门 - traefix 使用 - 1
- 马克思主义哲学(认识论)
- power designer绘制数据流图操作步骤
- win10资源管理器explorer总是崩溃重启
- java中北大学ppt总结+课后习题第三章(小宇特详解)
- 解决Android Studio配置JPush极光推送错误方案
- fastspeech2复现github项目--数据准备
- 新闻关键字提取和新闻推荐
- 集群学习分享2:pcs+postgresql一主两从集群搭建
热门文章
- c 宏定义用法#define
- php字符串比较函数
- ASP.NET2.0 ReportingServices使用详解
- DataList分页
- 将调用密集型的 COM 组件迁移到托管代码
- Windows客户端C/C++编程规范“建议”——表达式和运算
- 设计模式之适配器模式(Adapter)摘录
- AES(Advanced Encryption Standard) Intrinsics各函数介绍
- python tensor_Python深度学习 2.3 张量运算
- 计算机网络7层协议模型,计算机网络(一) OSI七层模型及TCP/IP dubbo协议