个人分类:待整理(55)

前端的书架【书单放送】

前端的书架【书单放送】

这张图是我在鹅厂拍的。去年换工作,发了些简历,收到那边的面试邀请。应该是部门直聘,面试哥哥直接给我安排到旁边的一个空工位上做题。题做得马马虎虎,聊得也马马虎虎,后来自然就等通知了。我看了一眼工位上的书架,忍不住拍了一张图。这面试值了。在此感谢那位邀我面试的哥哥。毕竟是未经允许拍的,如果这张图跟你有关系,并且你介意的话,请联系我。当然我最希望你不要介意啦:)我自己家里的书架对比一下,这就是距离啊。从此我深刻的相信,程序员的待遇是和所读书籍的厚度有关系的。晚上跑出来打笔记,主要是因为刚刚有个刚入行的小妹妹突然问我:有什么书可以推荐的?就把两张图发给她了。我大学学的是心理学,做前端开

技术的规范和不规范

鼓励:清晰,高效,方便沟通,开放共享,方便自己和同事(早点下班)。避免:杂乱,隐匿信息,封闭,效率低下,拖累自己和同事(加班熬夜)。1.命名规范:鼓励具名,避免匿名。影响:变量/常量/代码块/闭包/函数/方法/参数/类/接口/命名空间/模块/文件(夹)名鼓励长,避免短。鼓励全称,避免简写。鼓励英文

Reliable message communication within WebSocket.

##WebSocketlookspretty,butIdon'tuseitnow.Totransfermessagesbetweenclientsandserver,WebSocketismoreefficientandfasterthannormalHTTP.But,WebSocketisunreliable,youdon'tknowanythingiftheclientsmissedsomemessagesbecausetheconnectionwasbrokeninawhile.Howaboutifthemessagesarecriticalforyourclients.Youcan'tstandwithanymistakemaybeappearedinyouapplicationsystem.So,youuseHTTPPoolingstrategy.It'ssorrowfulthatwhenyouknowanewandbettertechnologybutcan'tuseitwithenoughconfidence:(##HowtomakeWebSocketreliab

前端工程化,是个啥?

1.MODULEBUNDLER/模块打包前端需要模块化。从前:浏览器端javascript没有import,没有include,没有require。总之,前端javascript,不支持模块化。那,怎么着?全局变量+<script></script>+人为约定然而:项目大了,全局变量越发不可控,人为约定不靠谱。文件千百行,Bug找半天。那么:预编译吧,造一个require语法,再造一个解释器。2.IDE/集成开发环境前端需要一个集成的,高度自动化的开发环境。从前:文本编辑器一个+浏览器一个。改两句,刷一下浏览器,点两下看看效果。写好了,发布测试环境,测试,再发,再测。联调测试基本靠喊”帮我再发一下测试“。然而:开发环境分散,各种开发依赖

Webpack 一个工程输出任意页面

问题场景:Webpack+Vue用来做APP内嵌H5项目,碎片化比较严重,每次输出都是一个html(css、javascript都用htmlone打包在html中),数据全部来自后端接口。尴尬:每做一个html,都要新建一个项目,npminstall一次,自己开发的组件都拷贝一次。目标:可以把多页面代码放在一个工程里面,既可以共享公共组件,又相对独立。可以通过命令行参数分开打包输出。方案https://github.com/yuanoook/pageshop就像汽车厂一样。可以为每一个车型,新建一座工厂,调度物资然后开始生产。当然也可以在一个工厂,根据不同的指令,生产不同的车型。我更偏向与后一种方案。思路NPMCLIParams>Webpack.config.js行为>页面输出命令行参

Vue React Zepto Jquery Angular UI 组件搜了一大堆

FrontendUIComponents比较懒,不写UI组件,搜了一大堆,点星星的是推荐的★★★★★Vue2.x:pchttp://element.eleme.io/#/en-UShttps://github.com/elemefemobilehttp://mint-ui.github.io/#!/en★★★★★https://github.com/ElemeFE/mint-uihttps://github.com/wangdahoo/vonicReact+material:http://www.material-ui.com★★★★★&n

发表于 2016-11-17 19:22:03

打开APP或者去下载 Open or download

打开APP或者去下载 Open or download

目的页面元素被点击时,检测是否已经安装app。如果已经安装,尝试打开。如果没有下载安装,提示下载或跳转下载页。方式用事件代理监听监听点击事件,检测到a标签被点击,判断href协议是否是app_protocal,如果是,立即把location.href设置成下载链接。原理浏览器会首先会触发A标签默认行为【尝试打开新链接->发现不是http和https->调用系统行为->[系统发现app(从app返回/拒绝打开)/没有安装app]】,然后触发事件冒泡。整个过程是串行的。注:app_protocal是http和https时测试这个逻辑无效。代码javascript代码/*在页面中使用场景<ahref="hkjoybao://platformapi/xxxx"></a>下面代码包含附

返回上一页,或者回主页 Go back or go home

#问题场景H5页面头部,设置了一个返回键如果设置成a标签,指定链接。对变更则不友好,也不支持当前页面嵌入多个导航入口页面的场景。如果只使用history.back(),在独立打开的情况下,从其他app跳转到浏览器[包括app内置浏览器],history.back()直接失效。#目标当点击返回键:如果(当前页面是从其他地方跳转过来的)跳回上一页;否则跳回备选页面[主页];#思路首先尝试返回,如果成功就不用管了,如果失败则跳转到备选链接。关键点在于检测是否跳转成功。如果跳出成功,当前页面会被关闭,里面所有的js代码都会停止执行。如果跳出失败,当前页面保留,里面的js可以继续执行。这里把备选方案的代码放在跳出代码的后面就行了。

localStorage 构建WEB客户端实时数据库

localStorage 构建WEB客户端实时数据库

缘由:当前实时数据方案比较棒的是FireBasefirebase.google.com.国外的东东,国内访问不能保证稳定。国内的最佳替代就是Wilddog野狗实时云咯wilddog.com,跟firebase简直一模一样的。但是呢,使用他们的服务,数据必须留存到他们的服务器上。用他们的接口同步(当然其实接口设计的超级棒哒)。可是他们不开源呐。于是想自己搞一个,可以灵活更换数据源的实时数据服务。效果就像下面这样:参考:https://github.com/yuanoook/realtimehttps://yuanoook.com/file?hash=7de4746f01ab0880346815bb513c985bhttps://firebase.google.com/https://www.wilddog.com/

HTTP 如何分分钟升级到 HTTPS ?

HTTP 如何分分钟升级到 HTTPS ?

骗人的,根本不可能分分钟好吗第一步:nginx搭配ssl。好消息!好消息!https现在已经有免费的证书资源可用了。参考https://www.baidufe.com/item/ed5324e20e555d938ca8.html,简直良心制作。第二步:处理网站前端细节。把所有的静态文件引用,表单提交指向,统统去掉协议名,改成和特定协议无关(可以保证http和https无痛切换)。引用的第三方的静态资源或者其他服务的,统统也改成和特定协议无关的形式,如果第三方不提供https服务,统统干掉。html代码<stylehref="//yuanoook.com/static/css/main.css"></style><scriptsrc="//fe.yuanoook.com/static/js/jquery.plus.min.js"></script>第三步:后台代吗(如:wordpres

➣ 指南针 [ HTML5+手机传感器 · 第二弹 ]

➣ 指南针 [ HTML5+手机传感器 · 第二弹 ]

骚年,扫一扫,去寻找人生的方向吧三行代码javascript代码window.DeviceOrientationEvent&&window.addEventListener("deviceorientation",function(event){compass.style.transform='rotateZ('+event.alpha+'deg)';});

记两个函数,拉数据,推数据

pullValue(obj,'key.subkey.subsubkey.subsubsubkey');pushValue(obj,'key.subkey.subsubkey.subsubsubkey',value);为什么要做这个?并不是因为「Ican」用字符串来代替.key这种做法,提高了代码的可定制能力。在字符串里面,你甚至可以「自定义表达式」。自己定义语法规则和相应的解析方法,突破现有语法规则的限制。html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>PPDemo</title><style>html{height:100%;}body{margin:0;height:100%;transition:all1s;color:#fff;display:table;width:100%;}div{display:table-cell;text-align:center;v

听说,HTML5和手机传感器更配哦!手机DEMO

一个真的demo但是里面的图片有2-3M,所以咯,要有点耐心才能打开。图片是高清无码,但是效果有点low。原理:监听手机的设备方向传感器,转化为backgroundposition的百分比。蛮好玩,核心代码:javascript代码window.DeviceOrientationEvent&&window.addEventListener("deviceorientation",function(event){document.body.style.backgroundPosition=inRange(event.gamma/.45+50,0,100)+'%'+inRange((event.beta-45)/.45+50,0,100)+'%';});functioninRange(res,min,max){res=res>max?max:res;res=res<min?min:res;returnres;}Demo的全量代码就不附上了,因为pc端的演示也看不

荐文《About face》《 The Guard With Three Questions 》

一直觉得自己不够专注敬业。因为除了倒腾技术,Playwithcodes之外,经常会想一些代码之外,和产品相关的事情。喜欢产品胜过喜欢代码。产品做好了固然开心产品做得不好也要知道原因产品是团队协同合作的结果多了解自己上下游小伙伴的工作方式沟通和协作就会更容易一向谨慎和悲观需求是容易变的产品是容易死的就算需求变了,产品死了也要找到原因,死得明白下一个就会长命一点比起精通这个那个技术,更喜欢简历上这么写:[参与过某某产品,很不错,我自己很喜欢,产品的用户也很喜欢]如果你也喜欢推荐阅读下面两份材料推荐一:《Aboutface》豆瓣专栏by@尚文欢https://read.douban.com/column/257161推荐二:

jquery.Confirm 确认框 第三版【延迟确认 · 防手抖】

jquery.Confirm 确认框 第三版【延迟确认 · 防手抖】

基于第二版本做了功能增强http://www.w3cfuns.com/notes/14332/59906f7251dc2bca46f341f24a36aa4b.html增加的新功能参数:1.bg_cancel:点击背景(escape按钮)触发取消2.delay_seconds:延迟多少秒之后才可以点击确认【防手抖】效果演示html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0"><title>jQueryConfirm2.0</title><scriptsrc="http://yuanoook.com/cdn/jquery.min.js"></script><scriptsrc="http://yuano

Pepper: Define your web components with simple codes.

Pepper: Define your web components with simple codes.

通过自定义标签的形式自定义组件,Scopestyle+数据渲染+方法https://github.com/yuanoook/Pepper/语法示例javascript代码Pepper.defineComponent('myTitle',{less:'color:red',template:'<h1>${title}</h1>',data:{title:'我是标题,点我点我'},main:function(){varthis_dom=$(this).filter(':not(style)');this_dom.on('click',function(){window.alert(this_dom.text());});}});示例:html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Pepper</title><scriptsrc="http://cd

为什么要用 『 table 布局 』

为什么要用 『 table 布局 』

网上随便搜一下:使用table布局html关于Table布局的讨论,意见基本是一边倒的「别用table布局」「为什么我们不建议使用table布局」「div+css和table布局的优缺点,为什么不建议使用table布局」相互鄙视的程序员们,在这一点上,居然达成了高度一致。table布局缺点是显而易见的,甚至有人罗列了table布局的七宗罪,不对,九宗罪->http://phrogz.net/css/WhyTablesAreBadForLayout.html。基本观点都是:tabletrtd一坨一坨的乱七八糟的标签简直太恶心了。很久以前css还很弱鸡的时候,做布局才用table。既然现在css这么强大了,老司机们就建议大家不要用table做布局了。好像还蛮有道理的样子,简直不能

jquery.Confirm 确认框 第二版

jquery.Confirm 确认框 第二版

前面有一个版本http://www.w3cfuns.com/notes/14332/79a4e01d3b9c355a2a845ad0375c7e78.html,现在回头过去看,代码比较乱最近做移动端一个新的项目,又重做了一个。主要改进点如下:1.代码聚合,上一个版本逻辑粒度太小,太分散,很难维护2.居中方式改进,改用table和table-cell,优点是不用设置宽高3.使用了multiline,支持无痛书写大量html模板字符串,爽歪歪。multiline作用很屌,可以在js里面大量书写html,css,甚至less。甚至可以自定义语法,然后用js二次编译后

收集两个 loading 转圈动画,一个来自Google,一个来自 Yahoo

收集两个 loading 转圈动画,一个来自Google,一个来自 Yahoo

Demo:http://fly.yuanoook.com/file?hash=82b7fa5716394ee400a2be623d52e33bGoolge的loading是四色的gif,23kb,Google全站大部分地方都在使用Yahoo的loading动画是svg,从Yahoo首页发现的html代码片段效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0"><title>LoadingDemo</title><style>body{max-width:640px;margin:auto;}.loading:before{content:'';display:block;width:30px;height:30px;background-image:url("data:image/svg+xml;base64

Jquery Desknotice, Chrome 桌面通知

Jquery Desknotice, Chrome 桌面通知

在Chrome中,可以通过JS申请桌面通知的调用权限每个通知可以自定义四个信息:标题,内容,图标,点击回调Demohttp://yuanoook.com/file?hash=1fdebcbcd7763972b089f4da68d8ebaa核心代码javascript代码片段//Editedbyrango@yuanoook.com//Unoriginal,corecodescopiedfromhttp://stackoverflow.com/questions/2271156/chrome-desktop-notification-example$.extend({deskNotice:function(){requestPermission();//注意,这才是真正用到的函数哦returnfunction(msg,url,detail,icon){requestPermission();if(Notification&&Notification.permission===