CSS魔法
# 实战中踩到的 JSON 小坑 前端工程师对 JSON 是再熟悉不过了。它语法简单，表现力强，常用于前后端的数据交换。 在实战中，我也遇到过跟 JSON 有关的小坑。 ## JSON 数据中的 tab 字符 ### 背景 某日在手机版的商品详情页发现了一个隐蔽的 bug，在 iOS 5 下并不会触发，但在当前最新版的 Chrome、Firefox 和 iOS 6+ 下可以重现。故障表现为个别详情页的脚本会挂掉，无法工作。 ### 分析 经过简单的隔离分析之后，把疑点定位到某个...
# WebStorm，你一直在寻找的前端开发 IDE > 人生苦短，用 IDE 吧。 * 我不是屌丝，也不是高富帅，我是一个正常的普通人。 * 我成家了，我有自己的小日子，我想过更好的生活，我的时间很宝贵。 * 我是一个前端工程师，大多数时候我靠写代码挣钱，最终，我决定用 IDE 来干活。 * 我觉得你——我的战友——时间同样很宝贵，所以我推荐你用 WebStorm。  ## 简介 WebStorm 是一款前端开发 IDE（集成开发环境），可以简单理解为，它是一个智能的、强大的代码编辑器。 语法着色、代码补全、代码分析、代码导航、格式化、快捷键、就地参考文档、实时纠错提示、代码重构、脚本调试、版本控制、单元测试、工程管理、收藏夹、Zen Coding、文件模板、代码片断、语言混编……你听说过的、你想到过的、你渴望的、你想像不出来的……所有的跟干活有关的功能，WebStorm 都可以做到，而且做得漂亮、简单快捷。 前端技术日新月异，WebStorm 紧跟前沿技术，贴进开发者的实际需求。全面原生支持...
# [幻灯片] 重拾 CSS 的乐趣（上） > #### 前言 > > 我在第二届 CSS Conf（2015 中国 CSS 开发者大会）上的演讲广受好评，很多网友向我索取现场视频。条件所限，这个演讲并没有留下视频存档。因此，本文尝试在静态幻灯片的基础上，以文字的方式还原现场讲解，尽可能为不能去现场的朋友呈现最完整的体验。 > > 我在每幅图片之间补充了讲解文字。你不用分辨每段文字是配合上图还是下图的，只管顺序阅读即可。 ***  大家看到封面的画风，应该可以看出我今天走的不是技术路线，而是娱乐路线。如果说前面几位讲师的分享是烧脑的悬疑推理大片，我这个环节就是轻松愉快的爆米花电影了，大家可以放松一下。  接下来，接照惯例，需要介绍一下 “这个人”。有两个标签可以描述这个人。...
# [译] jQuery 3 有哪些新东西 > * Original: [What’s New in jQuery 3](http://developer.telerik.com/featured/whats-new-in-jquery-3/) > * Translated by: [cssmagic](https://github.com/cssmagic) It’s been ten years since jQuery started rocking the web and it...
# [译] ScrollFix.js：一个 iOS5 溢出滚动的（有限）修复方案 > * Original: [A (partial) fix for iOS5 overflow scrolling (ScrollFix.js)](http://blog.joelambert.co.uk/2011/10/14/a-fix-for-ios5-overflow-scrolling-scrollfix-js/) > * Translated by: [cssmagic](https://github.com/cssmagic) **Update**: *Unfortunately this does not 100% solve the problem,...
# [译] 如何做到一秒渲染一个移动页面（原名：使用 PageSpeed Insights 分析移动网站） > * Original: [Mobile Analysis in PageSpeed Insights - PageSpeed Insights - Google Developers](https://developers.google.com/speed/docs/insights/mobile) > * Translated by: [cssmagic](https://github.com/cssmagic) > **声明**：原文版权属于 Google，原文以 CC BY...
# StuQ 专访：CSS魔法畅聊前端人生 > 本文由 “StuQ” 微信公众号约稿并首发，由 **CSS魔法** 撰稿。 ### 魔法哥，请先介绍一下自己吧！ 大家好，很荣幸接受 StuQ 的专访。我叫 “CSS魔法”，熟悉我的朋友都叫我 “魔法哥”。我目前在百姓网担任手机站的前端架构师。 似乎 “前端架构师” 这个头衔经常会遭遇嘲讽——“前端居然也需要架构” 或者 “真会吹，拉大旗作虎皮吧” 等等。以前面对这种质疑，总会尴尬一番，不过时间长了也就坦然了：毕竟任何一项严肃的、长期的、大规模的工程，都是需要有人来设计架构的嘛！ 百姓网的前端架构目标很明确：随着业务规模的扩张和团队的壮大，整个网站系统的复杂度也随之迅速上升；如何化繁为简、帮助业务工程师高效高质完成开发任务，这正是前端架构师的职责和挑战所在。 因此，简单概括一下，我在百姓网的日常工作包括： * 调研新技术、新工具，适时应用到团队中。 * 制定代码规范，并通过工具来确保规范的执行。 * 填补基础类库和业务开发之间的断层，提供工具库和...
# 关于“从网页分享到微信”的实现 公司的手机版网站是与微信公众账号配合运营的，有相当大的一部分流量来自微信用户。手机版的商品详情页提供了“分享到微博”功能，那么很自然地，老板希望也可以分享到微信。 在接到这个需求之后，我搜了一下相关资料，针对这个问题做了一些研究，简单小结如下。 ## 官方文档 微信开放平台的介绍： 可以看出微信提供了“分享给好友”和“分享到朋友圈”官方接口，效果看起来也很不错。但是，这个接口只适用于 iOS/Android App，并不适用于网页。 除此以外，微信没有公开任何相关资料，也就是说，微信官方没有提供任何从**网页分享到微信**的解决方案。当然这也可以理解，毕竟微信的整个生态都是建立在手机客户端之上的，目前对网页端缺乏支持也是情理之中。 ## 民间传说 官方不给力，还是求助于民间高人吧。很快，找到了这篇文章：[《36氪：如何在网页中添加“分享到朋友圈”按钮》](http://www.36kr.com/p/161946.html) （下图摘自该文章）  有图有真相，36氪自己的网站就是这么做的。当用户使用微信浏览网站时，可以将当前页面分享至朋友圈。 其中的技术原理可以参考[“我爱水煮鱼”的一篇教程](http://blog.wpjam.com/m/weixinjsbridge/)。简单来说，微信在自己的浏览器（WebView）中埋了一个桥变量 `WeixinJSBridge`，可以实现 WebView 中的 JavaScript 对外层原生应用的功能调用。显然这是一个私有接口，而很多网站利用了这个未公开的桥变量实现了“分享给好友”、“分享到朋友圈”甚至是“关注微信”这样的功能。 既然如此，开工！ ## 残酷真相 很快在详情页部署了相关脚本，并且确实可以获取到这个桥变量及其 `.invoke()` 方法，心中不禁一阵窃喜！ ...
# [译] Yarn 官方介绍：一款新的 JavaScript 包管理器 > * Original: [Yarn: A new package manager for JavaScript](https://code.facebook.com/posts/1840075619545360/yarn-a-new-package-manager-for-javascript/) > * Translated by: [cssmagic](https://github.com/cssmagic) > #### 译者前言 > > 这两天被 Yarn 刷屏了？对于新工具，范范地道听途说或浅尝辄止，不如静下心来听听作者的心路历程。我读了多篇文章，感觉说得最清楚的还是 Facebook...
# [译] Webpack 2 有哪些新东西 > * Original: [What's new in webpack 2](https://gist.github.com/sokra/27b24881210b56bbaff7) > * Translated by: [cssmagic](https://github.com/cssmagic) Work in progress... This reflects stuff until 2.0.5-beta+ 仍在开发中……本文只反映截至 2.0.5-beta+ 版本的情况。 ##...