link ,除了分享,也是知识管理。 于 1年前发表 3893 1 0
[http://7tszky.com1.z0.glb.clouddn.com/Fsr16Kjav3pmGPgpSDgbtFJH9qaK] 10月17号,IMWeb团队跟广州前端圈合作,在腾大二楼多功能厅,进行了一次十分成功的分享沙龙!一、一句话总结 【影响力范围】 * 听众来自欢聚时代、唯品会、37游戏、迅雷、金山、平安科技、金蝶软件、网易、魅族等 超过70家 珠三角互联网公司。 * 超过160名 同学参加了这次分享沙龙。 * 而本次分享沙龙在腾讯课堂开设的线上直播课程中,报名人数也 超过140人 。【活动效果】 * 会后反馈中 100% 的同学表示自己学到了东西。 * 会后反馈中 超过96% 的同学对本次分享沙龙的组织、通知形式感到满意。 二、沙龙现场
1年前
运营
vienwu 于 2年前发表 3884 2 0
-------------------------------------------------------------------------------- react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下: JUST THE UI 把react只当作一个ui组件就好,等同于传统mvc中的view。 VIRTUAL DOM react在编程模型和传统dom之间添加了一层,称之为虚拟dom。好处非常多,性能更好,可以在node环境下完成渲染(解决seo问题),可以更好的用于开发native apps。 DATA FLOW 反应式的单向数据绑定,比传统数据绑定更简单,简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。 什么是ANGULARJS angularjs是google推出的一个前端js框架,面世已有几年时间,非常成熟,目前已经有非常多的第三方模块,基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多,这里就不做过多介绍。 REACTJS和ANGULARJS
2年前
性能
ouven ,https://ouvens.github.io/ 于 1年前发表 3838 3 2
60%的网站流量来自图片,图片优化可以大幅影响网站流量。 一、现有WEB图片格式 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景 baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景 progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载 gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画 png 支持 不支持 无损 所有 由png色值位数决定 需要透明时 webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知 apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定 需要半透明效果的动画 svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好的放缩体验,需要动态控制图片特效 bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg上需要极限优化的场景几种文件格式的特点 * baseline-jpeg
1年前
性能
link ,除了分享,也是知识管理。 于 1年前发表 3773 6 1
PROTOCOL BUFFER入门教程 PROTOCOL BUFFER是个什么鬼? Protocol Buffer(下文简称protobuf)是Google提供的一种数据序列化协议,下面是我从网上找到的Google官方对protobuf的定义: Protocol Buffers 是一种轻便高效的结构化数据存储格式,可以用于结构化数据序列化,很适合做数据存储或 RPC 数据交换格式。它可用于通讯协议、数据存储等领域的语言无关、平台无关、可扩展的序列化结构数据格式。目前提供了 C++、Java、Python 三种语言的 API。 道理我们都懂,然后并没有什么卵用,看完上面这段定义,对于protobuf是什么我还是一脸懵逼~ 理都懂 [http://img.blog.csdn.net/20160325101815944] NODEJS开发者为何要跟PROTOCOL BUFFER打交道 作为JavaScript开发者,对我们最友好的数据序列化协议当然是大名鼎鼎的JSON啦!我们本能的会想protobuf是什么鬼?还我JSON! 这就要说到protobuf的历史了。
1年前
nodeJS全栈
黎腾 ,如果sea能带走我的哀愁 于 1年前发表 3761 2 2
Nginx那么好,我想去看看。 接连逛了两个书城后,我发现并没有Nginx相关的书籍。 这就很奇怪! [http://7tszky.com1.z0.glb.clouddn.com/Fo05S9wdE4-zdY-OLaOf_maLDJ6V] Nginx,一名 网红 (网络服务器红人…),就算没有自传和回忆录,争着介绍它的花边新闻也该有吧。 后来找到仅有的一两本书籍,也直接深入到“源码剖析”的阶段。写得并不十分满意,况且我还不需要这些。 后来发现了原因,大概是因为 “使用太简单了,都不值得出书” 。 是的,Nginx把纷繁复杂的功能,浓缩成一份简单的配置,极易上手。 当它呈现到你面前时,感觉独具匠心。 NGINX与NODEJS (这里的标题有点歧义。此处的NodeJs,皆引申为NodeJs所搭建的服务器。) 有人说,作为一名前端, 我的真爱是NodeJs 。 同时也认同,抛去性能之类的比较,单纯从实现的角度,NodeJs编写的服务器也能实现Nginx的各种功能。 这些我都赞成,但使用Nginx并不意味着抛弃NodeJs。事实上,它们并不冲突,还可以在一起愉快的玩耍。
1年前
调试
coolriver 于 1年前发表 3756 0 0
前言 提到跨终端应用开发,很容易想到最近很火的React Native。使用React Native开发出的APP本质上是Native APP。在跨端应用开发这一领域内还有另一块:Hybrid APP。本文研究的 inoic framework [http://ionicframework.com/] 就是一种hybrid app的开发框架。 [http://blog.ionic.io/wp-content/uploads/2015/03/ionic-logo-blog.png] 1. IONIC基本组成 在之前, ouven的一篇文章 [http://imweb.io/topic/557fea79c35b19ff46ead229] 介绍了ionic frameword的基本构成,和在windows系统上的环境搭建。本文在此基础了,对ionic frameword(后面简称 ionic)的基本组成作一些补充和总结。下图展示了ionic的基本组成:
1年前
移动开发
吴浩 于 1年前发表 3753 1 0
一、重构的目的 1.URL简化 过长的url不利于传播,比如输入框的字数限制导致分享的url被截断或分享内容无法提交。复制url文本时,短的url也可能使鼠标少拖动一段距离。 2.规范URL http://ke.qq.com/cgi-bin/courseDetail?course_id=36413 [http://ke.qq.com/cgi-bin/courseDetail?course_id=36413] 类似这个课程详情页的url,包含大、小字母、下划线和中划线。我们希望统一下划线做单词间分隔。 3.结构化,语义化 例如: http://ke.qq.com/tupu/3/course [http://ke.qq.com/tupu/3/course]
1年前
运营
coverguo 于 2年前发表 3746 2 0
* 模块化编程 * CommonJS * AMD(Asynchronous Module Definition)规范 * requireJS与seaJS * requireJs 以及 seaJs 的区别 模块化编程: @为了更好的开展话题,首先需了解什么是前端模块化 模块的由来: 其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等,为了更好的管理网页的业务逻辑,产生了模块化编程的理念。 模块的定义:模块就是实现特定功能的相互独立的一组方法。 模块的意义:因为有了模块,我们能更好的管理网页的业务逻辑,以及按照自己的需求去使用各种模块,并且可以让每个开发者都能设计自己想要的模块以及去使用别人的模块代码。 @有了模块的概念,但为了让大家能方便的加载各种模块,因此需要一套编写模块的规范,而目前通行的Javascript的模板规范共有两种:CommonJS 和 AMD COMMONJS CommonJS的历史渊源:
2年前
开发模式
刘志龙 于 1年前发表 3741 1 5
一直对web安全很感兴趣,却一直只是略懂一点。决定从现在开始学起web安全的知识,更新起web安全系列的文章。文章内容为作者自己边学边写的,不对之处多谢各位大大们指出。 web安全比较经典的攻击手段有三种:xss,csrf,界面操作劫持。好吧,都是一知半解的,就从xss开始吧。这篇文章从xss基础讲起,内容比较简单,了解xss的同学可以直接跳过,关注后续笔者继续学习xss的文章就好了~~ XSS简介 XSS 全称(Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞。指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的. 比如获取用户的Cookie,导航到恶意网站,携带木马等。 XSS分类 类型一: 反射型XSS 反射型XSS,又称非持久型XSS。之所以称为反射型XSS,则是因为这种攻击方式的注入代码是从目标服务器通过错误信息、搜索结果等等方式“反射”回来
1年前
Web安全
袁飞翔 于 2年前发表 3724 4 1
从 https://developer.chrome.com/devtools/docs/remote-debugging [https://developer.chrome.com/devtools/docs/remote-debugging] 我们可以知道在android 4.4+可以通过在apk中使用下面的代码开启webview的chrome远程调试 WebView.setWebContentsDebuggingEnabled(true); 但我们开发中接触的apk往往是第三方的,没谁会为我们开启webContentsDebuggingEnabled。而Xposed能强制做到这一点 XPOSED [HTTPS://GITHUB.COM/ROVO89/XPOSEDBRIDGE/WIKI/DEVELOPMENT-TUTORIAL] Xposed能够勾住(Hook) Android应用程序对象的方法,实现AOP,一个简单的例子: publicclass WebViewHook implements IXposedHookLoadPackage {
2年前
调试
江源 ,非常让人头疼…… 于 2年前发表 3685 1 0
本地存储(localStorage)已经不是新鲜的概念,本文并不是本地存储的概念及 API 介绍,而是对本地存储在实际业务场景中的一些问题做些探讨,从而形成一套规范,保证本地存储在提高页面性能、提升用户体验的同时,避免出现莫名其妙的错误。 本文试图回答如下问题: 1. 本地存储满了之后,浏览器是什么样的行为? 2. 本地存储容量有限,因此宝贵,那么就整个站点而言,使用本地存储的策略是什么? 3. 实际编码过程中,本地存储又有那些注意事项? 本地存储的空间(SIZE) 让人意外的是,这一点在各主流浏览器(包含PC、移动端)竟然惊人的一致,都是 5M 的数量级。 值得说明的是,安卓上手 Q 、手机QQ浏览器、微信中则是 2.5M 的数量级,因此在移动端,本地存储的 SIZE 更加珍贵。 IOS 待测试 。 综上,SIZE 在 2 - 5M 的区间。 测试页面: Web Storage Support Test [http://dev-test.nemikor.com/web-storage/support-test/] 超过最大值的行为
2年前
性能
莫卓颖 于 1年前发表 3483 0 2
可视化前端测 背景 相信进行过前端开发的同学都知道,前端测试不仅仅涉及到功能的测试,而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状,并讨论目前流行的测试工具,下篇文章将会介绍工具的使用方法 前端测试分类 前端测试 主要分三大方向测试,而这三大方向也分很多小方向测试,首先简单的介绍每个方向的概念 * 界面样式测试 固定界面样式测试 :主要针对文字内容不变的区域,例如页面的页头,页脚这类结构、内容不变的区域,而测试一般通过截图对比解决。 结构不变界面样式测试 :主要针对结构不变的区域,例如新闻区域这类结构不变,内容变化的区域,这类测试一般通过DOM元素对比解决。 计算样式测试 :主要针对计算样式不变的区域,这类测试一般通过比较计算样式解决,但是这种测试不推荐,因为测试成本比较大。 * 功能测试 服务器数据预期测试 :主要针对用户在前端界面进行某种操作后,提交数据给后台后,测试后台能否返回预期的数据 界面功能测试 :主要针对用户在前端界面进行某种交互性操作后,测试能否获取预期的功能、界面交互 * 多浏览器测试
1年前
调试