当前位置: 首页 > 编程日记 > 正文

自己动手,做一款抬头显示的「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 已经是我能想到的最理想的组合了。

最后做出来的效果是这样:

  • 用户注册

Images

  • Todo List

Images

这个项目的所有代码都放在 github/syncus 上了,大家可以自行获取,然后在 LeanCloud 中去部署自己的 web 应用。不过对于想直接试一试的朋友来讲,大家也可以使用这个地址 https://syncus.leanapp.cn/todos 来访问这一在线的 Todo List。

让 TodoList 抬头显示

TodoList 做完了,现在我们要想办法让它能够做到「抬头显示」,否则对我来说也没啥帮助,不过是又造了一个轮子而已。

我做了一个 Chrome 插件,但是因为无法发布到 Chrome Web Store,所以只能放在 github 上共享给大家了:todo_ntp,有兴趣的同学把它下载到本地,然后在开发者模式下加入 chrome extension 就可以了。

不过也可以使用别人写好的插件,以下内容引自 How to Have the New Tab Open a Specific Website Automatically in Chrome and Firefox:

Chrome 设置

Chrome 上设置稍微有点复杂,需要借助其他插件,其步骤如下:

  1. 从 Chrome Web Store 下载安装 Replace New Tab Page。

  2. 打开 Chrome 插件管理器(你也可以在地址栏直接输入 chrome://extensions/)
    Images

  3. 点击 Replace New Tab Page 的 Options 链接.
    Images

  4. 在地址栏中输入 https://syncus.leanapp.cn/todos
    Images

OK,一切都好了,从现在开始,你每次打开一个新的 Tab 页,都会首先看到你自己的待办事项。

Firefox 设置

  1. 在 Firefox 上我们也需要安装插件 NewTabURL。

  2. 重启浏览器,可以通过 Ctrl+Shift+A 来打开插件管理页面,找到 NewTabURL 并点击 Options 按钮。
    Images

  3. 选择 URL 并输入 https://syncus.leanapp.cn/todos
    Images

Safari 设置

  1. 进入 Safari 的设置页面。

  2. Homepage 框中输入 https://syncus.leanapp.cn/todos,然后把 New tabs open with 中选定 Homepage
    Images

使用中可能的问题

  • Chrome 中 CSS 文件加载不了,页面显示异常

这可能是因为 LeanCloud 文件托管的域名导致的,可以参考这篇文章解决Fix Your Connection is not private error in Chrome.

相关文章:

微软语音扩展全球语言支持,发布160个新声音

导语:全世界有数千种语言,最具语言天赋的人也只能说数十种,普通人能够学会两三种语言已属不易。然而,在科技日新月异的今天,具备自然语言对话能力的AI已经能够掌握上百种语言,扩展人类自身能力,…

P4269 [USACO18FEB]Snow Boots G

思维题。 以地板为序构造链表&#xff0c;再排序&#xff0c;然后删除走不过去的地面。 删除的时候顺便维护最大的跨度&#xff0c;以此判断可行性。 总的来说利用了答案的单调性。 #include <cstdio> #include <cstring> #include <iostream> #include <…

GPT-3:现实版的“贾维斯”?还是真「人工」智能?

整理 | 章雨铭 责编 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;GPT-3&#xff08;Generative Pre-trained Transformer 3&#xff09;自2020年推出以来就备受热议&#xff0c;它是一种由OpenAI开发的AI工具。发布的两年来&#xff0c;外媒The Verg…

SVN更换修改用户名

如果装了TortoiseSVN&#xff1a; Settings -> Saved Data -> Authentication Data -> clear。即可清除保存的上个用户登录信息&#xff1b;当再次用到svn时&#xff0c;会提示输入用户名密码&#xff0c;输入新的用户名密码即可。 或者&#xff0c;手动删除下面目录下…

启用CORS实现Ajax跨域请求

2019独角兽企业重金招聘Python工程师标准>>> 应用场景&#xff1a;想从a.com请求b.com上的资源&#xff0c;由于同源策略不允许请求。 解决办法&#xff1a;在请求的php文件中加入 header("Access-Control-Allow-Origin: http://b.com"); 这种比较安全&am…

Python机器学习实践指南pdf (中文版带书签)、原书代码、数据集

Python机器学习实践指南 目 录 第1章Python机器学习的生态系统 1 1&#xff0e;1 数据科学/机器学习的工作 流程 2 1&#xff0e;1&#xff0e;1 获取 2 1&#xff0e;1&#xff0e;2 检查和探索 2 1&#xff0e;1&#xff0e;3 清理和准备 3 1&#xff0e;1&#xff0e;4 建模…

虚拟机安装CentOS以及SecureCRT设置【完美无错版】

一、CentOS简介CentOS是Linux的发行版之一&#xff0c;它安全、稳定、高效&#xff0c;是我最喜欢的Linux发行版之一。CentOS根据Red Hat Enterprise Linux开放源代码编译而成&#xff0c;与RedHat Linux并没有什么本质上的差别。但Red Hat Enterprise Linux是商业软件&#xf…

Python 实现机器学习前后端页面的交互

作者 | 俊欣来源丨关于数据分析与可视化对于机器学习爱好者而言&#xff0c;很多时候我们需要将建好的模型部署在线上&#xff0c;实现前后端的交互&#xff0c;今天小编就通过Flask以及Streamlit这两个框架实现机器学习模型的前后端交互。模型的建立首先是模型的建立&#xff…

webpack入门(二)what is webpack

webpack is a module bundler.webpack是一个模块打包工具&#xff0c;为了解决上篇一提到的各种模块加载或者转换的问题。 webpack takes modules with dependencies and generates static assets representing those modules. webpack以依赖模块和生成 静态的资源来代表这些模…

vSAN读者交流之1-要为不同时间的服务器选择合适的系统版本

近期在我的虚拟化群中&#xff0c;有两个问题比较典型&#xff1a;在比较老的服务器安装新的VMware ESXi 6.7或vCenter Server 6.7出错。在比较新的服务器安装比较旧的ESXi版本5.5出错。因为每个人的实验环境不同、条件不同&#xff0c;用不同的服务器做实验&#xff0c;或者为…

ecshop中ajax的调用原理

1:首先ecshop是如何定义ajax对象的。ecshop中的ajax对象是在js/transport.js文件中定义的。里面是ajax对象文件。声明了一个var Ajax Transport;对象和一个方法Ajax.call Transport.run;2:ecshop中ajax可以使用两种方式传递数据&#xff0e;一种是get方式&#xff0c;一种是p…

IOS7原生API进行二维码条形码的扫描

2019独角兽企业重金招聘Python工程师标准>>> //需要真机 #import "ViewController.h" #import <AVFoundation/AVFoundation.h>interface ViewController ()<AVCaptureMetadataOutputObjectsDelegate>//用于处理采集信息的代理 {AVCaptureSess…

元宇宙中可跨语种交流,Meta 发布新语音模型,支持128种语言无障碍对话

编译 | 禾木木 出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09; 语言交流是人类互动一种自然的方式&#xff0c;随着语音技术的发展&#xff0c;我们可以与设备以及未来的虚拟世界进行互动&#xff0c;由此虚拟体验将于我们的现实世界融为一体。 然而&#xff0c;…

sql server几种读写分离方案的比较

原文:sql server几种读写分离方案的比较在生产环境中我们经常会遇到这种情况&#xff1a; 前端的oltp业务很繁忙&#xff0c;但是需要对这些运营数据进行olap&#xff0c;为了不影响前端正常业务&#xff0c;所以需要将数据库进行读写分离。 这里我将几种可以用来进行读写分离的…

Jquery和javascript常用技巧

var objSel document.getElementById("selOp"); //这是获取值 alert("当前值: " objSel.value); //这是获取文本 alert("当前文本: " objSel.options(objSel.selectedIndex).text);…

LeetCode刷题-1

数组-1.两数之和题目描述题目样例Java方法&#xff1a;暴力枚举思路及算法代码执行结果复杂度Java方法&#xff1a;哈希表思路及算法代码执行结果复杂度题目描述 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出和为目标值 target 的那两个整数…

测试驱动开发与行为驱动开发中的测试先行方法

Gil Zilberfeld将在 Agile Practitioners会议上举办小型研讨会&#xff0c;讨论测试先行&#xff08;test first&#xff09;方法&#xff0c;测试驱动开发&#xff08;TDD&#xff09;和行为驱动开发&#xff08;BDD&#xff09;的基础。 \\\ Test-First是一个很优秀的工具。它…

在jupyter notebook中同时安装python2和python3

环境 win10 已安装anaconda3 How 1.安装python27> conda create -n py27 python2.72. conda install --prefixD:\pyenv\py27 ipykernel(python27 指定路径&#xff1a;D:\pyenv\py27)3. activate py27(查看 conda info --envs)4. python -m ipykernel install --user5.启动j…

简化代码的微小修改

可选参数和命名实参 可选参数如果操作需要多个值&#xff0c;而有些值在每次调用的时候又相同&#xff0c;这时可以使用可选参数声明可选参数并在调用时省略它们#region 13-1声明包含可选参数的方法并调用static void Dump(int x, int y 20, int z 30)//声明包含了可选参数的…

windows版本下使用xdebug

下载xdebug: http://www.xdebug.org/download.php 这个版本&#xff1a; http://www.xdebug.org/files/php_xdebug-2.2.0-5.3-vc9.dll拷贝到php的ext目录 配置php.ini extensionphp_xdebug-2.2.0-5.3-vc9.dll;xdebug.profiler_enable1;xdebug.profiler_output_dir"E:\PHPn…

LeetCode刷题-2

数组-26.删除有序数组中的重复项题目描述题目样例Java方法&#xff1a;双指针思路及算法代码执行结果复杂度题目描述 给你一个有序数组 nums &#xff0c;请你原地删除重复出现的元素&#xff0c;使每个元素只出现一次 &#xff0c;返回删除后数组的新长度。不要使用额外的数组…

[设计模式]外观模式

1. 定义 外观模式 提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。外观定义了一个高层接口&#xff0c;让子系统更加容易使用。 外观不仅简化了系统内接口的使用&#xff0c;也将客户从组件中的子系统中解耦&#xff0c;外观和适配器都可以包装很多类&#xff0…

Oralce中的to_date()函数

Oralce中的to_date()函数to_date( ".$params[ORDER_TIME].",YYYY-MM-DD) TO_DATE(:BEGIN_DATE,yyyy-mm-dd hh24:mi:ss)Oralce中的to_date()函数用于将字符串转换为日期对象&#xff0c;具体使用格式为&#xff1a;to_date( string, [ format_mask ] , [ nls_lan…

LeetCode刷题-3

数组-27. 移除元素题目描述题目样例Java方法&#xff1a;双指针思路及算法代码执行结果复杂度Java方法&#xff1a;双指针优化思路及算法代码执行结果复杂度题目描述 给你一个数组 nums 和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;并返回移除…

Ubuntu下ssh免password登录安装

1、首先在本机安装openssh-server和openssh-client. 命令&#xff1a;sudo apt-get install openssh-server openssh-client 2、在检查当前的文件夹下有没有.ssh这个文件。没有的话就mkdir下。 3、生成公钥与私钥。命令&#xff1a;ssh-keygen -t rsa 4、将.ssh文件里的id_isa_…

npm中package-lock.json的作用:npm install安装时使用

简单理解: XYZ 的格式 对应为: 主版本号.次版本号.修订号&#xff0c;版本号递增规则如下&#xff1a; 主版本号&#xff1a;当你做了不兼容的 API 修改&#xff0c; 次版本号&#xff1a;当你做了向下兼容的功能性新增&#xff0c; 修订号&#xff1a;当你做了向下兼容的问题修…

win7中Android开发环境搭建超详细(百度)

Android系统如火如荼&#xff0c;Android软件开发也相当流行&#xff0c;这里介绍如何一步步完成Android软件开发环境的搭建。 工具/原料 能联网的计算机Java环境搭建 1Android软建开发用的是Java语言&#xff0c;所以第一步当然要完成Java环境的搭建&#xff0c; Java环境搭建…

LeetCode刷题-4

数组-35. 搜索插入位置题目描述题目样例Java方法&#xff1a;二分查找思路及算法代码执行结果复杂度题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请…

Jquery和PHP Ajax JSON

无缓存&#xff0c;无错版$.ajax({ type: "GET", url: "index.php", cache: false, data: "conAdd&act_search&key" key"&id"id, dataType:"json", success: function(msg){ bindGroupList(msg)…

Web应用配置虚拟主机(www.baidu.com)

最终效果:浏览器地址栏输入www.baidu.com访问时,会显示自己的网页 1、创建文件 任意盘新建一个www.baidu.com文件,在该文件夹下新建WEB-INF文件、自己写的一个html文件,一张图片,然后在WEB-INF下新建一个classes文件、lib文件以及一个web.xml文件&#xff0c;在web.xml文件中输…