Archive for 网站前端

网页豆瓣豆油提醒本来就慢,然后干别的时候还不知道来豆油了。写个油猴子脚本搞定了。 tampermonkey脚本还比较好些,查了一下提醒功能,需要chrome用户进行授权。 本来想写个短时间没处理的话,延长检查时间,后来想想本来时间就不短,没必要加了。 // ==UserScript== // @name 豆瓣豆油提醒脚本 // @namespace http://0x55aa.com/ // @version 0.1 // @description 豆瓣豆油提醒脚本,来豆油后进行弹窗提醒! // @author 0x55aa // @match https://*.douban.com/* // @grant none // ==/UserScript== (function() { 'use strict'; // 检查间隔 var interval_ = 30000; var interval = 30000; var notify_time = 0; // 提醒 if (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; } }); } function notify() { notify_time = new Date().getTime(); var titleText = "豆油来啦"; var options = { dir: "ltr", lang: "utf-8", icon: "https://img3.doubanio.com/favicon.ico", body: "请赶快处理!!!!!" }; if (Notification && Notification.permission === "granted") { var n = new Notification(titleText, options); } } function check() { // console.log(notify_time); // console.log(interval); console.log($('#top-nav-doumail-link').children().text()); if ($('#top-nav-doumail-link').children().text()){ notify(); } } var timer = setInterval(check, interval); })();

Continue

按照官网很简单, 安装 npm install semantic-ui-react --save npm install semantic-ui-css --save 然后在index.js里导入 import 'semantic-ui-css/semantic.min.css'; 就可以用了。

Continue

又重新学习react了,这次按照官网再装一遍。react-native差不多了,react还没搞个东西,hah。 安装 npm install -g create-react-app 创建一个app create-react-app my-app 运行 cd my-app npm start 现在自带Babel监控文件,进行自动编译

Continue

这个开始的时候想解决的,查文档搜索都没有,就没搞。现在有时间了准备搞搞,发现就一行代码就行了。 sql-hint.js文件 CodeMirror.registerHelper("hint", "sql", function(editor, options) {这里边。 addMatches()结果都存在result了,然后对result进行排序就搞定了。 result = result.sort(); 一行代码。

Continue

react大体看了一下,设计的真好啊。没有DOM操作,只需要看stat,刷新只需要改变的组件。 react-navie安装 按照官网教程来就行了。安装xcode,npm install -g react-native-cli 创建一个项目 react-native init TestProject 运行ios 可以直接用xcode打开TestProject/ios/TestProject.xcodeproj ,然后运行。 也可以进到项目根目录运行,react-native run-ios。这个好处就是不用开xcode,用别的编辑器编辑就行了。 改完js文件也不需要重新编译,在模拟器快捷键command+r就能看到结果了。屌屌屌 通过我粗略的查看,每次都是ios应用请求http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true,返回一个js文件,包括了我helloword的代码。有个flow的请求不知道干啥的,返回了404. 安卓安装 下载android-sdk_r24.4.1-macosx.zip,解压,添加到环境变量export ANDROID_HOME=/Users/tools/android-sdk-macosx, 然后运行tools里边的android,启动sdk管理界面,这里被墙了,可以使用翻墙代理,127.0.0.1:8086配置一下。必须选择“Force https://... sources to be fetched using http://...”不然回报证书错误。 SDK Platform Android 6.0, API 23, revision 2这个安装不是大小不对,就是超时。从代理log里找到下载链接http://dl.google.com/android/repository/android-23_r02.zip,直接下载,下载完放到.android/cache目录下。这种方法不好用,开始有些包还没有,我重启了sdk管理工具就都有了,不知道是依赖还是咋回事. 复制错目录了,是安卓sdk的temp目录,不是管理工具那个缓存目录。然后成功,其他也可以这么下载。 安装加速器/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.dmg,检查安装 kextstat | grep intel 163 0 0xffffff7f82e39000 0x14000 0x14000 com.intel.kext.intelhaxm (6.0.1) 8FF2C637-0A5E-367E-B007-5B08655B1E8A <7 5 4 3 1> 运行模拟器emulator -avd 卸载 模拟器,sudo /System/Library/Extensions/intelhaxm.kext/Contents/Resources/uninstall.sh ./emulator -list-avds 没有 ./android avd 点击create创建一个设备,也可以在这里直接点start启动模拟器。 react-native run-android 开始需要安装依赖库,麻痹又是网络不能连接,都是安装网络原因费劲。配置项目,Android目录下的gradle.properties。添加 systemProp.http.proxyHost=127.0.0.1 systemProp.http.proxyPort=8087 systemProp.https.proxyHost=127.0.0.1 systemProp.https.proxyPort=8087 然后提示证书不行,导入代理证书还是不行,, 最后修改vim android/gradle/wrapper/gradle-wrapper.properties,吧下载连接https改成http,然后重新run-android就好了。真曲折,查的过程中发现这个也可以使用离线下载的方式。 卧槽 又报错,日了狗了。 Could not GET 'https://jcenter.bintray.com/com/android/tools/build/gradle/1.3.1/gradle-1.3.1.pom'. > peer not authenticated 发现能直接访问,然后把之前修改的代理配置注释掉就好了。。 然后提示“failed to find Build Tools revision 23.0.1” ,发现是装错版本了,最新23.0.2,必须要23.0.1.。 重新安装好了。 官网说开启Gradle Daemon能加快编译。这个也没太大必要,就不搞了。 然后成功编译运行,模拟器里提示“unable to download js bundle from the dev server”,网上都是实机的问题。 我重启模拟器好了。 麻痹 泪奔 安卓安装个东西好麻烦,需要各种翻墙。

Continue

需要npm安装依赖工具,npm安装方法 mac安装node js 这篇之前安装的。 安装好nodejs之后,安装工具 npm install --global babel-cli npm install babel-preset-react 之后让babel检查源文件目录,有更改自动编译。 babel --presets react src --watch --out-dir build src/hello.js -> build/hello.js html内容,react.js直接在官网下载的编译好的。


    
        test
        
        

    
    
        
hello.js文件。
ReactDOM.render(
    

Hello, world!

, document.getElementById('example') );
然后目录里起一个httpserver,就能看到hello world了。

Continue

用select2 支持搜索,value是拼音,文本是汉字。发现经常不知道输入什么,于是想支持两种方式。官方提供了方法。


function myMatcher(term, text, option) {
    return text.toUpperCase().indexOf(term.toUpperCase()) >= 0 || option.id.toUpperCase().indexOf(term.toUpperCase())>=0;
}

$(document).ready(function() {
    $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
      $("#id_dev_user").select2({ matcher: oldMatcher(myMatcher), placeholder: "选择人员", allowClear: true })
    });
 });

Continue

今天django群里的一个程序员问:“django的类试图,虽然代码更为简洁,但是是不是前端的可以定制性也降低了呢?” 不懂神马是类视图,不过只要制定,我就想到自己,从学习django到现在前端是肿么做的。 开始的时候就想用twitter bootstrap整前端,这样方便的多,但问题很明显,与django的前端显示代码不容易整合,特别是forms。因为开始时我只会用{{ form.as_table }}等,后来看了官网的forms的定制。 有了定制,基本的问题都解决了,但是还是有不方便的。像我把admin里的时间插件移动到了前端。这个我没有办法正好,不过我测试过了,用{{from}}在浏览器直接生成的代码放到template里,就管用。哈哈,这次可以方便的使用了。 不过这样的坏处也很明显,以后的维护会很麻烦。 与群里的说的也是这样,不知道对他有没有帮助。他还说还有一个函数视图,这个标记,以后搜索看看什么意思。

Continue

用了一个javascript的插件,json传送过来的时间需要是Date对象类型的开始的思路就错了,以为可以直接返回这种类型的数据。差,天真了。后来又看到直接返回含有js语句的json文本,非常不喜欢。就想能不能转成js中Date能识别的格式,哈哈果然有。方法如下: 我用的 ,用json也行哇。views.py里的代码

from django.utils import simplejson

 li = []
    for a in articles:
        article={}
	article["start"] = a.datetime.strftime('%Y-%m-%dT%H:%M:%S')
        article["content"] = a.content
        li.append(article)
    json = simplejson.dumps(li)
    return HttpResponse(json)
其中strftime('%Y-%m-%dT%H:%M:%S') 是格式化为Date对象格式的字符串,方便在浏览器的javascript中转换为Date对象. html文件比较简单判断json的长度 循环变成Date对象,jsvascript
var i=0;
for(i=0;idjango发送json数据并格式化datetime时间数据风波二

Continue

以后会用到,检查html语法等还是不错的 1. HTML Validator http://validator.w3.org/ 网页结构检测工具,支持HTML, XHTML, SMIL, MathML……. 2. CSS Validator http://jigsaw.w3.org/css-validator/ CSS验证。 3. Links Validator http://validator.w3.org/checklink 检测HTML/XHTML文档中的死链接 。 4. RSS Feed Validator http://validator.w3.org/feed/ W3C的免费Feed验证服务。 5. Free Site Validator http://freesitevalidator.com/ 全面检测你网站的各种验证问题和坏链接,并且提供详细的检测报告。 可访问性检测工具 6. WebAIM Wave http://wave.webaim.org/ Wave是我最喜欢的可访问性检测服务,非常有效率。 7. Functional Accessibility Evaluator http://fae.cita.uiuc.edu/ 这个工具用来评估你网站功能的可访问性。 8. Hera http://www.sidar.org/hera/ HERA (WCAG 1.0)标准来检测。 跨浏览器检测工具 9. Xenocode http://www.xenocode.com/Browsers/ 你可以用Xenocode来运行任何浏览器,包括 IE6, IE7 和IE8 。 10. Browsershots http://browsershots.org/ 一个非常不错的检测网站在各种浏览器和大多数操作系统上的兼容性。 11. IeTester http://www.my-debugbar.com/wiki/IETester/ IE浏览器集合,这个大家都知道。 12. Microsoft Expression SuperPreview http://www.microsoft.com/expression/ 可以同时查看比对网站在IE不同浏览器下的效果。 网站性能检测工具 13. Pingdom Tools http://tools.pingdom.com 分析网站的加载速度,单独显示每个元素加载的进度。、 14. YSlow http://developer.yahoo.com/yslow/ Firefox插件,网站性能检测和优化工具。 15. Web Page Analyzer http://www.websiteoptimization.com/services/analyze/ 一个简便的检测工具,可以帮你生成一份你网站性能的检测报告。

Continue