Open ufologist opened 7 years ago
技术
CodePen是前端开发者们约“码”的天堂. 年终盘点向来是各大网站、社区的重头戏。当然，与往年一样 CodePen 也出了期名为《The Most Hearted of 2016》的专题。专题中盘点了 2016 年 100 个最受欢迎的 Pens，让我们在惊叹前端开发者创造力的同时，也能够学习一些新的技术，捕捉一些新的想法。 Flexbox 游乐场
CodePen是前端开发者们约“码”的天堂. 年终盘点向来是各大网站、社区的重头戏。当然，与往年一样 CodePen 也出了期名为《The Most Hearted of 2016》的专题。专题中盘点了 2016 年 100 个最受欢迎的 Pens，让我们在惊叹前端开发者创造力的同时，也能够学习一些新的技术，捕捉一些新的想法。
Flexbox 游乐场
单个页面内容不能过多 设计常用尺寸：750 1334 / 640 1134，包含了手机顶部信号栏的高度。 移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ等。 使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。 标题简短 移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。 二维码图片使用 img 标签引入/二维码图片记得扫描测试 有时候扫描二维码之后，会跳转至某个地址，不幸的话QQ或者微信会对这个地址进行温馨提醒，如下图所示： 关于链接的分享-QQ <title>QQ中链接的标题由此处获取</title> <meta name="description" content="QQ中链接的描述由此处获取"> <!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 --> <meta itemprop="image" content="http://*.*.com/static/images/share.png" /> 可参考 手机QQ接口文档：setShareInfo
单个页面内容不能过多
设计常用尺寸：750 1334 / 640 1134，包含了手机顶部信号栏的高度。
移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ等。
使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。
标题简短
移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。
二维码图片使用 img 标签引入/二维码图片记得扫描测试
有时候扫描二维码之后，会跳转至某个地址，不幸的话QQ或者微信会对这个地址进行温馨提醒，如下图所示：
关于链接的分享-QQ
<title>QQ中链接的标题由此处获取</title> <meta name="description" content="QQ中链接的描述由此处获取"> <!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 --> <meta itemprop="image" content="http://*.*.com/static/images/share.png" />
可参考 手机QQ接口文档：setShareInfo
前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。 我们最开始就面临2个问题 如何唤起本地app ios与Android都支持一种叫做schema协议的链接, 例如: newsapp://xxxxx. 我们只需要将协议放在a标签的href属性里，或者使用location.href与iframe来实现激活这个链接。而location.href与iframe是解决这个需求的关键 在ios中，还支持通过smart app banner来唤起app 我们还需要知道的一点是，微信里屏蔽了schema协议。除非你是微信的合作伙伴之类的，他们专门给你配置进白名单。否则我们就没办法通过这个协议在微信中直接唤起app。因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。 如何判断浏览器是否安装了对应app 很无奈的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。 我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，第一时间尝试唤起app，如果200ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。当本地app被唤起，则页面会隐藏掉，就会触发pagehide与visibilitychange事件 Universal links: Apple为iOS 9发布了一个所谓的通用链接的深层链接特性, 一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。 微信没有屏蔽这个协议。因此如果我们的app注册了这个协议，那么我们就能够从微信中直接唤起app。 实际上实现这个功能要考虑许多上下文细节，比如已安装app和未安装app时的不同情况，微信里ios9以上需要使用universal link，没有实现的话，需要提示浏览器打开，如果下载地址是应用宝，又不应该让他在浏览器打开等等等等，包括android成千上万台机型的兼容性。所以最好一家第三方做deeplink工具的公司，直接用他们的产品，国外的有branch metrics,国内的有魔窗
前段时间遇到一个小需求：要求在分享出来的h5页面中，有一个立即打开的按钮，如果本地安装了我们的app，那么点击就直接唤起本地app，如果没有安装，则跳转到下载。
我们最开始就面临2个问题
如何唤起本地app
ios与Android都支持一种叫做schema协议的链接, 例如: newsapp://xxxxx. 我们只需要将协议放在a标签的href属性里，或者使用location.href与iframe来实现激活这个链接。而location.href与iframe是解决这个需求的关键
newsapp://xxxxx
在ios中，还支持通过smart app banner来唤起app
我们还需要知道的一点是，微信里屏蔽了schema协议。除非你是微信的合作伙伴之类的，他们专门给你配置进白名单。否则我们就没办法通过这个协议在微信中直接唤起app。因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。
如何判断浏览器是否安装了对应app
很无奈的是，在浏览器中无法明确的判断本地是否安装了app。因此我们必须采取一些取巧的思路来解决这个问题。
我们能够很容易想到，采用设置一个延迟定时器setTimeout的方式，第一时间尝试唤起app，如果200ms没有唤起成功，则默认本地没有安装app，200ms以后，将会触发下载行为。当本地app被唤起，则页面会隐藏掉，就会触发pagehide与visibilitychange事件
Universal links: Apple为iOS 9发布了一个所谓的通用链接的深层链接特性, 一种能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。
微信没有屏蔽这个协议。因此如果我们的app注册了这个协议，那么我们就能够从微信中直接唤起app。
实际上实现这个功能要考虑许多上下文细节，比如已安装app和未安装app时的不同情况，微信里ios9以上需要使用universal link，没有实现的话，需要提示浏览器打开，如果下载地址是应用宝，又不应该让他在浏览器打开等等等等，包括android成千上万台机型的兼容性。所以最好一家第三方做deeplink工具的公司，直接用他们的产品，国外的有branch metrics,国内的有魔窗
流行的JavaScript模块和资源打包工具webpack 2最终版本已经发布，该版本可以实现对ES2015的本地支持，并大大改善了文档内容。但是，新版本是否能显著改进构建时间和文件大小还有待观察。 Webpack2 升级指南和特性摘要: 整理和翻译了由webpack1升级到2所需要了解的API变更和注意事项 webpack2，升还是不升？: 感觉 webpack2 最大的改进是 ES6 modules 和 Tree Shaking，其他都是文档和配置方面的 结论: 暂不升级，等 webpack2 社区完善以及性能提升吧。
流行的JavaScript模块和资源打包工具webpack 2最终版本已经发布，该版本可以实现对ES2015的本地支持，并大大改善了文档内容。但是，新版本是否能显著改进构建时间和文件大小还有待观察。
Webpack2 升级指南和特性摘要: 整理和翻译了由webpack1升级到2所需要了解的API变更和注意事项
webpack2，升还是不升？: 感觉 webpack2 最大的改进是 ES6 modules 和 Tree Shaking，其他都是文档和配置方面的
结论: 暂不升级，等 webpack2 社区完善以及性能提升吧。
基于java开发的android应用由于其语言的特性，所以很容易被反编译，虽然android提供了proguard，但是也只是增加了源码阅读的难度，其中业务逻辑依旧可以分析得出。有些人通过各种破解手段将apk文件破解、反编译，然后加入广告、病毒代码，重新打包投入市场，不明真相的用户将带病毒广告的apk下载下来，甚至因此造成利益损失。 一些个人开发者，小企业等并不会有这么多的资源精力投入在应用的安全方面，因此一些第三方的加固服务也应运而生，它们通过加壳、加密、逻辑混淆、代码隐藏等各类安全加固方法，增加移动安全应用的安全防护等级，防止移动App被逆向分析，反编译，以及防止二次打包潜入各类病毒、广告等恶意代码，并且应用加固是针对移动应用的安装包直接加固，无需开发者修改源代码或进行二次开发。 阿里聚安全 腾讯云应用乐固 360加固保 梆梆加固 爱加密 总结 体积（体积小的为优）：360 > 腾讯 > 爱加密 > 阿里 > 梆梆 兼容性： 阿里 > 腾讯 > 360 = 梆梆 > 爱加密 启动速度（时间短为优）： 阿里 > 爱加密 > 360 = 梆梆 > 腾讯 漏洞： 腾讯 > 爱加密 > 360 > 梆梆 > 阿里 app加固的好处是进一步保护了自己的核心代码，提升了盗版的难度，但同时也影响的应用的兼容性，程序的执行效率，还有部分的市场会拒绝加壳后的应用上架。所以请大家结合自身的情况来选择。
基于java开发的android应用由于其语言的特性，所以很容易被反编译，虽然android提供了proguard，但是也只是增加了源码阅读的难度，其中业务逻辑依旧可以分析得出。有些人通过各种破解手段将apk文件破解、反编译，然后加入广告、病毒代码，重新打包投入市场，不明真相的用户将带病毒广告的apk下载下来，甚至因此造成利益损失。
一些个人开发者，小企业等并不会有这么多的资源精力投入在应用的安全方面，因此一些第三方的加固服务也应运而生，它们通过加壳、加密、逻辑混淆、代码隐藏等各类安全加固方法，增加移动安全应用的安全防护等级，防止移动App被逆向分析，反编译，以及防止二次打包潜入各类病毒、广告等恶意代码，并且应用加固是针对移动应用的安装包直接加固，无需开发者修改源代码或进行二次开发。
总结
app加固的好处是进一步保护了自己的核心代码，提升了盗版的难度，但同时也影响的应用的兼容性，程序的执行效率，还有部分的市场会拒绝加壳后的应用上架。所以请大家结合自身的情况来选择。
产品
Google I/O 2014 发布 Material Design 为用户创造了崭新的视觉设计语言。与此同时，新的设计语言除了遵循经典设计定则，还汲取了最新的科技，秉承了创新的设计理念 动画 样式 布局 组件 模式
Google I/O 2014 发布 Material Design 为用户创造了崭新的视觉设计语言。与此同时，新的设计语言除了遵循经典设计定则，还汲取了最新的科技，秉承了创新的设计理念
技术
产品