Blog
Blog copied to clipboard
abeet
github写博客，博客文章见本项目Issues
基于ace的brace在输入中文时前面有个框，这个问题也存在于有道云笔记6.x。 brace.js官网的bug更严重，输入中文不光前面有框，汉字还会重复。 http://thlorenz.com/brace/ 而ace最新版 https://ace.c9.io/ 没有这个问题 然后在ace的issues里搜索 chinese 发现了一个issue说汉字输入有问题 https://github.com/ajaxorg/ace/issues/3099 我推断是brace.js里面的修改版ace editor版本太低有bug， 花了好多时间去将ace最新版合并到brace.js里。 合并后问题没有解决， 才考虑是不是字符的显示问题。 brace它是修改版的ace中用到的占位字符 \x01 在 electron 1.6 chrome 56 下 显示成了 " ...
# Vue兼容IE的研究、实践 ## 背景 公司前端框架使用的Vue.js，因为它基于`Object.defineProperties`来监听数据变化，而IE8是不支持`Object.defineProperties`的，所以注定不能兼容IE8。 Vue作者尤雨溪也无意让Vue支持IE8，见 https://github.com/vuejs/vuejs.org/issues/50 目前Vue.js我们只用在后台界面，网站前台由于要兼容IE8，使用的是jQuery或Backbone，造成技术栈不统一，工程化不够。 为此想寻求Vue.js兼容IE8的方案。 ## 可行性调研 github上搜索"vue IE8" 找到一个项目 https://github.com/wcflmy/VM4IE8 这个项目的数据监听是通过一个把一个model的数据，附加到一个dom元素上， 然后ie8下使用`Object.defineProperty`来监听dom上属性的改变 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Internet_Explorer_8_specific_notes 从Mozilla的资料上来看，有两大问题， 一个问题：因为model是附在dom上的，会有很多的dom属性，不能再用for遍历， 二个问题：数据键名要避开所有的dom属性名， 综上：基本等于没有用 另外一个未完成的项目，如 https://github.com/wusfen/vm https://github.com/wusfen/vue-ie 发邮件问了作者，他用的类似Angular的检测机制，对所有的异步的函数、方法，进行复写、注入 $foceUpdate ，如 ajax, setTimeout,...
## 目的 在ZCMS中专题可视化制作，原来的截图用的是html2canvas，其原理是解析html和css，在Canvas上绘制截图，相当于实现了浏览器的css解析部分的功能，不但无法正确还实际的界面效果，绘制的的速度还很慢，甚至会因为脚本错误导致无法返回截图。 现在的思路是用C#在本地跑一个http服务器，并响应js请求对网页截屏，然后上传图像到远程服务器。 ## 实现过程 - 在baidu 里搜索“C#截图”找到一些文章 如 https://blog.csdn.net/weixin_36381867/article/details/79434143 - 为了写C#，找一下相关的文档 https://www.asp.net/get-started - 查 .netcore的api手册，没有找到与http通讯有关的内容，在microsofe全站搜索“CopyFromScreen”找到了 https://docs.microsoft.com/zh-cn/dotnet/api/system.drawing.graphics.copyfromscreen?view=netframework-4.7.2#System_Drawing_Graphics_CopyFromScreen_System_Int32_System_Int32_System_Int32_System_Int32_System_Drawing_Size_ 看来 .net core里没有CopyFromScreen，.net framework里有 CopyFromScreen。 怎么办？ 先尝试一下在.net core里用.net framework里的功能 在google里搜索“.net core Bitmap”...
插件都在目录 C:\Users\abeet\\.vscode\extensions 下， 找到vetur插件目录，在目录下搜索 vue中`v-for`属性的说明 “`Renders the element or template block`” 在文件这两个文件中有这两文件 C:\Users\abeet\\.vscode\extensions\octref.vetur-0.12.6\server\src\modes\template\tagProviders\vueTags.ts C:\Users\abeet\\.vscode\extensions\octref.vetur-0.12.6\server\dist\modes\template\tagProviders\vueTags.js 发现目录中带有server字样 server目录下的`package.json`里找找依赖 发现`vscode-languageserver` 感觉这是与语言服务有关， 发现`vscode-emmet-helper` 可能与emmet有关， 在代码里搜索这两个库的使用，没有得到很特别的东西，换个插件看看 看一下`minapp-vscode`插件 这个插件的注释是中文的，看到可能 自动补全相关的是 ``` vscode_1.languages.registerCompletionItemProvider('wxml', autoCompletionWxml, '
在2006年有一部电影《穿普拉达的女王》女主角觉得同事拿出的两条腰带没有什么区别，她的主编上司说了一段话印象很深刻 “你身上挑选的那件蓝色的毛衣，你以为是按你的意思认真地选出这件衣服。并不是，首先你都不明白那件衣服不是蓝色也不是青绿色或琉璃色，实际上它是天蓝色。你也不知道，从2002年Oscar de la Rent 的发布会第一次出现了天蓝色礼服后，天蓝色就出现在随后的8个设计师的发布会里，然后才风行于全世界各大高级卖场，最后大面积的流行到街头，这样你才能在廉价的卖场里买了它……你觉得你穿的这件衣服是你自己选择的，以为你的选择是在时尚产业之外，但实际上不是这样的，你穿的衣服实际上就是这间屋子里的人，替你选的……” 所以对于设计中图标用了哪种风格、背景用了哪个颜色，我期望也有一个追根溯源的说法，例如 在平面设计中认为紫色_____________，但______显的沉闷，所以很少被使用。 在显示器上紫色可以显示的秀通透，_______________ 甚至_____________带有科技感…… 设计师们在dribble上发布各种风格的设计作品，一些传统的设计风格被设计师们重新演绎，从_______风格到_______风格到_______风格，其中_______工作室在近年创作的一些设计作品中，偏好使用紫色、蓝色，波浪形状、液化形状。随后使用紫色、蓝色的_______风格的设计也被其他设计师也大量使用。在2017年又夹杂着________风格的兴起________延续到现在。 受到设计潮流的影响，在的设计中尝试使用_____紫色，来表达_____诉求——科技感、潮流感_______ 所以对于设计中图标用了哪种风格、背景用了哪个颜色，我期望也有一个追根溯源的说法，例如 在平面设计中认为紫色带来的观感是高贵，因为材料原因，紫色显的沉闷，紫色很少被使用。 在显示器上紫色可以用的通透，而被UI设计师使用，甚至紫色给人的印象除了高贵之外还带有科技感…… 2012年开始dribble的影响力越来越大，设计师们在这个网站上发布各种风格的设计作品，一些传统的设计风格被设计师们重新演绎，从波普风格（Pop）到孟菲斯风格（Memphis）到蒸汽波风格（Vaporwave），其中JQ工作室在16年创作的一些设计作品中，偏好使用大块的紫色、蓝色，波浪形状、液化形状。随后其他设计师也大量地使用。在2017年蒸汽波风格（Vaporwave）更是大行其道。 受到设计潮流的影响，在近期的设计中尝试使用紫色也是很自然的，但考虑到受众对设计潮流的接触有一定的滞后，在本作品仍然想使用更纯粹的扁平风格，并没有使用流行的渐变色。
## 目的 在ZCMS中的文章编辑器是UEditor，我曾经在写了一个UEditor插件叫uploadLocalImage，作用是自动上传粘贴到文章编辑器中的本地图片到服务器。在从word文档中copy内容到编辑器中就可以自动上传其中的图片了。 在之前的笔记 https://github.com/abeet/Blog/issues/16 中有记录，在chrome插件中是通过NPAPI调用本地dll文件去读取本地文件，chrome45及以后的版本，加强了安全限制，禁止了NPAPI，所以chrome插件不能再访问本地文件了。 现在的思路是要求客户安装一个可执行程序，这个程序在本地启一个httpserver，编辑器中用js通过ajax和本地的httpserver通讯，通知这个本地服务上传本地硬盘上的文件到cms后台去。从而解决js不能访问本地文件的限制。而且这种方式与浏览器无关，不用为不同的浏览器开发插件了。 ## 实现过程 - 在github上搜索“http server”在c#语言里找项目，发现项目的代码量都比较多 - 进.net的官网看看，https://www.asp.net/get-started 在asp.net的官网发现asp .net core的入门特别简单，并且明显是用到了webserver的，于是安装.net core sdk，并试运行一个示例，成功 - 查看示例源码，关键的一个组件是，实例化一个`WebHostBuilder` - 在百度搜索 `WebHostBuilder`，发现这篇文章，http://www.cnblogs.com/artech/p/net-core-hello-world.html 文中附有源码，将源码下下来，运行之 - 第5个示例运行有误，开始认为是配置文件的版本不匹配，反复尝试，调整配置，花了两个小时，终于发现问题在于index.cshtml里head标签没有正常结束 期间还在github上找了一个简单示例，并根据这个示例尝试调整配置 https://github.com/SunKD/practice-portfolio/blob/master/Program.cs -...
https://github.com/lehoangduc/node-registrify 基于hapi和redis的服务注册，同时提供命令行操作 被设计为一个注册中心， 注册服务和服务发现由客户端通过RESTAPI去获取 优点：代码逻辑比较清晰，接口比较全 问题： github星：22颗 参考价值：4分 接口全 https://github.com/samuelkitazume/nodeservices 基于express和nedb，包括服务注册与服务发现，提供命令行操作。被设计为一个注册中心。 优点：代码简洁， 问题：没有健康检查 github星：1颗 参考价值：5分 https://github.com/Digipolitan/yemma-discovery https://github.com/Digipolitan/yemma 基于express、mongoDB、socket.io， 被设计为子应用（客户端）调用，通过token鉴权。 优点：有心跳机制，有服务token鉴权，注册服务非常简单。 问题：要配合yemma框架，代码不直观 github星：1颗 参考价值：3分 https://github.com/ParthaBoocha/service-registry 基于glue（glue）基于hapi，看代码迁移到express也很容易，用的json文件存储数据 对跨域有处理，被设计为一个注册中心。 优点：代码简洁 问题：对微服务没有特别的处理，例如没有心跳机制，只是一个简单的数据存储读取 github星：0颗 参考价值：5分...
VIM下载地址为 http://www.vim.org/download.php 网上有一个neovim，说是vim的分支上作了很多改进，但也有人说不成熟就不用了。 下载window下的安装包，安装完后打开界面空空的，当然要去找插件了， 在github上搜索 vim distribution 会发现有一个标星非常多的项目 https://github.com/spf13/spf13-vim 安装起来要费点工夫， http://msysgit.github.io/ 先安装git的命令行工具msysgit， 下载msysgit2.x老不成功，在另外一个网站上找到 Git-1.9.2-preview20140411.exe 的下载地址，也许是因为镜像多，用迅雷下载成功。 安装过程中记得勾选安装命令行工具集。 还要装curl.exe，但我发现命令行里已经有curl.exe了，不知道是msysgit带的还是windows自带的。 按https://github.com/spf13/spf13-vim 里的说明在 git\cmd目录下新建了 curl.cmd。 执行`curl https://j.mp/spf13-vim3 -L -o - | sh` 没有成功，说 HOME...
根据对屏幕分辨率调研和本项目的实际要求，建议提供页宽为1200像素的设计稿psd文件供前端切图。 具体注意以下几点 设计需要向前端制作人员提供图层未合并的psd源文件供前端制作切图。提供png格式的尺寸、颜色标注文件。 psd文件使用“像素”作为尺寸单位，psd画布为1600px宽，页面主体内容为1200px宽（两边留白），以便网页在 1366、1440、1920这几个常见分辨率的显示器下没有横向滚动条 有多个通栏图片或通栏背景图，需要单独提供宽为1920px的通栏图片。psd文件画布设为1920亦可。 竖向分栏宽度以页宽的n/12 为佳，以便使用12分栏栅格系统进行响应式布局。 设计稿中文字以“像素”为尺寸单位，文字大小需大于12px，小于12px的汉字太小看不清。 除logo及首页中的大标题外，其他文字都要使用“微软雅黑”字体，因大部分用户的机器上只有很少的几种汉字字体——微软雅黑、黑体、宋体。 默认隐藏的页面元素，如下拉菜单、弹出框，也要设计出展开后的效果，以便前端切图 链接、按钮等在鼠标移入时要有外观上（文字颜色或背景色等效果）变化的元素，需要在设计稿空白处，设计鼠标移入后的效果，以便前端制作完成hover状态样式定义。 请向项目负责人了解本网站项目是否要适应手机、平板等设备。分别提供页宽360px（手机）、页宽750px（平板）、页宽960px（平板横放或窄屏PC）、页宽1200px（宽1280以上屏），四种尺寸下的设计稿。
一个网页的尺寸和浏览器及显示器的尺寸大为相关，我们不可能满足所有用户的显示器尺寸，我们能做的是让绝大多数用户在访问网站时没有横向滚动条。 需要统计客户的显示器分辨率，以百度近六个月的浏览器统计数据为例： ``` 1920x1080 41.23% 1366x768 22.00% 1440x900 15.77% 1024x768 11.20% 1600x900 8.30% 1280x800 0.73% 2560x1440 0.10% 其他 0.63% ``` 从统计来看 -要让绝大多数（约99%）的PC用户浏览网站没有横向滚动条，网页宽在1024以下，可以是960像素，960是2、3、4、5、6的公约数，980是2、4、5、6、7的公约数。 -要页面美观大气，兼顾大部分（约80%）PC用户浏览网站没有横向滚动条，网页宽在1366以下为佳，可以是1170/1200/1260像素。1170是2、3、5、6的公约数。1200是2、3、4、5、6的公约数。1260是2、3、4、5、6、7的公约数。 建议 -在不做响应式设计的情况下，提供宽1200分辨率的设计稿，并以像素为单位标注尺寸 -在做响应式设计的情况下，分别提供宽360（手机）、宽750（平板）、宽960（横向平板或窄屏PC）、宽1200（PC），四种尺寸下的设计稿。并以像素为单位标注尺寸 -以上宽指的是页面主体内容宽，在PS里设计时画布要更宽一些用于示意两侧留白效果 360/400 750/800 960/1260...