前端工程

GitHub Card 是一个在线工具，能够将 GitHub 用户资料转换为精美的个人名片。通过 OAuth 认证获取用户 GitHub 数据，自动生成包含贡献统计、编程语言分析等信息的可视化卡片。用户可以选择不同模板定制个性化展示，支持一键下载高清图片或者复制分享链接，便于分享到社交平台，并提供了开发者排行榜功能。适合开发者展示个人技术实力和项目成就。

网络视频（Web 视频）是指利用 HTML5 技术在浏览器中播放的视频，这类视频资源通常可以被随意下载，某些行业（比如教培行业）如果希望保护自己的视频资源不被下载，就需要对视频做防盗链处理。

大家都知道，阿里P7前端高级工程师，基本上是一线前端技术人能达到的最高职级，也是很多程序员追求的目标。达到年薪50W+股票的P7级别，不仅要具备优秀的编程能力，在系统设计能力和技术视野方面，也要有较深的积淀。 最近技术大牛廖雪峰邀请他一位在阿里做前端架构师的朋友，整理出一份xmind——“Web全栈架构师所需技术栈”，对于需要提升技术能力的初中级前端程序员们，提供一些学习方向上的借鉴和参考。

一个微信小程序仪表盘组件 最近在一个小程序项目中做了个动态仪表盘效果，感觉有点复用价值，就顺便给组件化了，丰富了几个常用配置，绘制元素根据尺寸自适应，差不多具备了一个自定义组件的基本素质。 开发非常简单没有值得说的点，开发之外却是一步一个坑。

canvas内部元素不能像DOM元素一样方便的添加交互事件监听，因为canvas内不存在“元素”这个概念，他们仅仅是canvas绘制出来的图形。这对于交互开发来说是一个必经障碍，想要监听图形的点击事件思路很简单，只要监听canvas元素本身的点击事件，再判断点击坐标位于哪一个图形内部，就变相实现了图形点击事件。本文将介绍三种方法，判断坐标点是否位于某个canvas图形内部。

蓝牙定位是iBeacon技术最常被应用的方向之一，基于蓝牙定位可以实现诸如寻路、寻车、向导等很多商业需求，觅迹导航的定位系统也是基于iBeacon技术实现的。蓝牙定位又可以分为一维定位和二维定位，本文将介绍两种蓝牙定位技术的实现原理及实现方法。

iBeacon是苹果公司推出的一项低耗能蓝牙技术，由蓝牙设备发射包含指定信息的信号，再由移动设备接收信号，从而实现近场通信。微信小程序2017年开始支持iBeacon，摇一摇附近就是基于iBeacon实现的，此外iBeacon还可以实现距离测量，本文将介绍如何基于微信小程序实现iBeacon测距。

小程序开发框架经过两年左右的迭代，发展的越来越成熟和完善了，无论框架层面还是开发工具层面，体验都上升了一个层次，借《宝贝成长助理》这个项目的契机，总结一下在2019年这个时间点，小程序开发的现状。

苹果手机竖向拍照会为照片添加左旋90度的拍照方向，导致在网页中展示异常。前端解决这个问题需要提取图片的exif信息，并检测照片的拍照方向orientation，再通过canvas绘制图片并纠正旋转方向，最后输出图片的base64。

开发代码兼容 Vue CLI 3初始化的项目，构建时会根据package.json中的browserslist配置自动检测需要转译的语言特性，为构建代码转译JavaScript 并为 CSS 添加浏览器前缀，通常只需要修改browserslist即可兼容目标浏览器，例如兼容IE10可以做如下配置：

最近自己捣鼓了一个好玩的项目觅迹导航，核心功能已经开发完成，后续会抽时间完善一下细节，并开放使用。做这个项目的过程中涉及到本地文件的读写，而且项目的定位不涉及兼容性问题，所以就直接用HTML5实现了，这里将实现过程以及涉及到的知识点整理一下。

混合应用开发作为技术热点的时代已经过去了，但作为一种轻便可靠的开发手段，却早已在前端开发领域落了地。 我四年前就开始从事混合应用开发，从Cordova到Appcan再到APICloud，经年累月的摸索，逐渐形成一套对前端开发者更友好的混合开发最佳实践。对于刚接触混合开发的新人，与其自己摸索文档或者到论坛里发帖求助，最快的学习路径莫过于直接上手一套经过验证的方式方法。

基于Vue实现动态组织结构图

HybridStart v1.2.0 更新日志

AJAX-Cache是什么 Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

了解过前端性能优化的同学应该清楚，给页面加载提速的终极方案就是CDN，这是BS架构本身的特点决定的，无论什么前端提速手段，最终都会回到客户端文件的传输上来；与之相对的CS架构则不存在加载压力，但CS架构的问题是更新不灵活，那么有没有一种方法能结合这两种架构的优点，在加载速度和更新灵活性之间找到一个平衡点呢？这就是本文要探讨的一种方案：前端热更新。

Vue-Access-Control是一套基于 Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。

本文是对Vue官方风格指南的注解，过滤了极少数我认为重要性很低的项目，并将其余项按照作用相关性重新归类，便于读者针对性的选择某一方面进行参考。

Vue是目前最流行的前端开发框架之一，与Vue-router和Vuex组成俗称的Vue全家桶，更是开发前端富交互应用的利器。配合webpack等构建工具，开发大型应用也可以得心应手。随着Vue的普及，可能一些老旧项目也希望能“渐进式”的使用Vue，或者有的项目想用Vue来做但不打算引进构建工具，这种情况该怎样愉快的开发Vue全家桶项目呢？本文将提供一种解决方案。

RESTful是什么 RESTful是一种API架构，符合REST设计原则的API都可以被称为RESTful，REST的全称是Representational State Transfer。

最近火爆朋友圈的军装照 H5 大家一定还记忆犹新，其原理是先提取出照片中的面部，然后与模板进行合成，官方的合成处理据说由天天 P 图提供技术支持，后端合成后返回给前端展示，形式很新颖效果也非常好，整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案，因此理论上前端也可以完成人脸识别-提取-合成整个流程，实现纯前端的军装照 H5 效果。

之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中独立出来，实现上倒没什么问题，不过这种做法需要在登录和首页之间通过url跳转，感觉总是不太”优雅”，实际上只要能在登录后动态修改当前实例的路由就行了，之前确实没办法，但vue-router 2.2版本新增了一个router.addRoutes(routes)方法，让动态路由得以实现。

本文中的菜单权限控制方案由于没有使用router.addRoutes()实现动态路由，需要将登录页独立出来单独做，基于相同思路的动态路由方案参见\]用addRoutes实现动态路由。

前段时间基于HybridStart开发了一个公司内部APP，重走了一遍混合应用从开发到发布的整个流程，唤起了很多坑的记忆，也为HybridStart修复了不少细节bug，下面简单回顾一下过程中值得一提的几个点。

我们都知道混合应用的流畅性不如原生应用，除了不能像原生一样轻松驾驭各种狂拽酷炫的效果，混合应用还有一个难以消除的弱点在于页面打开速度上，如果有机会在同一台手机上直接对比的话，这种差距是普通人都能直观感受到的，这主要是由于web页面每次打开前需要初始化，在那一瞬间需要完成DOM创建、资源下载、样式渲染、js执行，这些时间消耗造成了按键按下与页面进场之间短暂的停顿，也造成了混合应用整体“不流畅，不跟手”的印象，HybridStart 1.1.1版本针对性的优化了页面打开速度，下面就介绍一下具体是怎么做的。

这是一门微信小程序入门课程，通过学习本节课程可以使你快速上手小程序开发，在学习这门课之前，需要你先具备基本的前端开发能力，包括html/css/JavaScrip，起码你得会切图，了解js语法。

自混合应用前端开发框架HybridStart v1.0升级计划开始后，经过近一周的开发测试，现已发布预览版，基本实现了最初定下的四个目标：核心易用、UI 可剥离、开发模式清晰、开发体验优秀，这也是我理想中的以 web 前端技术为主的，混合应用开发的正确姿势。在这个过程中将一些笼统的思路细化并落地，也将一些过去思路不对的地方推倒了重构，在通用性方面也做了更多的考量，下面就从核心和 UI 两大部分入手，详细拆解一下升级后的 HybridStart。

前一阵攒了个HybridStart，本来只是自己平时在混合应用项目中用用，后来发现不少前端同行也有这个需求，市面上的同类产品基本都是引擎厂家自己推出的，没办法作为通用框架，于是决定重新整理一下HybridStart，尝试把它做成一个更好用、更通用的混合应用开发框架。

接上一篇对各种混合应用开发方案的探讨，个人觉得现阶段最适合自己的还是以APICloud为代表的混合应用云平台，对于不懂原生开发的前端来说，其他方案的坑真的踩不起，为了让踩过的坑不再坑人，我将自己基于云平台的项目经验总结并封装到了一个混合应用开发框架中去，下面就聊聊这个框架HybridStart。

混合应用的概念是相对于原生应用而来的，也就是部分采用了web前端技术所开发的应用，曾经的混原之争也是相当热闹了一阵，如今已经尘埃落定，他们的各种利弊都经过了充分的讨论和验证，相信大部分开发者都已经清楚自己需要的是什么了，那么2017年的今天，混合应用开发到底是怎样一个状况呢？

贪吃蛇，呵呵。 在开发难度上，贪吃蛇算得上是游戏界的耻辱了，这么简单的东西，我知道你们是拒绝继续往下看的，但是，我这条贪吃蛇不一样，我这条贪吃蛇，更简单。。。

webpack刚出现时gulp如日中天，现在webpack更新到2.x版本，gulp逐渐淡出我们的视线，聊webpack的人越来越多，直到最近发现Vue官方文档里到处都是基于webpack的讲解，仿佛webpack已经成为了打包器的事实标准，作为一个仍然不准备使用webpack的前端，我必须认真打量一下自己的处境了。

从前端的角度看，Vue可以说是目前最理想的前端MVVM框架，一切为界面服务，上手难度低，本文就将记录使用Vue全家桶（Vue+Vue-router+Vuex）重构一个jQuery+template项目的过程，以及期间的收获。

Nodejs将前端开发语言移植到服务器端，如今一个前端开发者使用Nodejs很容易就能实现一个网络爬虫，这在之前是不可想象的，本文介绍一个简单的Nodejs爬虫的开发过程，只想看代码的直接拉到最后。