lichangwei / lichangwei.github.io Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 1.0 8.73 MB

HTML 93.85% CSS 0.90% JavaScript 5.26%

lichangwei.github.io's Introduction

Hi there 👋

lichangwei.github.io's People

Contributors

Stargazers

Watchers

Forkers

george-es

lichangwei.github.io's Issues

如何计算首屏加载时间？ | 飞鹰走码

https://lichangwei.github.io/2014/05/07/first-screen/

在网站开发中，首屏是我们最需要关注的指标之一，它基本代表着用户眼中的网站加载时间。但是如何衡量它呢？在我们公司有这样的一种做法，将以下代码放入需要首屏最后一个元素后面 <script type="text/javascript"> /* <![CDATA[ */ PAGE_TIMING.firstScreenImage = new Image(); PAGE_

网站使用条款的处理 | 飞鹰走码

https://lichangwei.github.io/2014/05/05/terms-of-use/

网站使用条款，Terms Of Use，也有简称为网规（以下都简称网规）的。前段时间有个需求，就是在用户访问量很大的页面的一个页面添加网规，当时因为时间问题就直接放在动态页面中了，最近开始考虑优化该页面时，才开始考虑如何优化网规。我们知道网规有如下特点：① 文本量大，② 非常稳定不易变，并且可能③ 出现在多个页面，且有可能会网站下次改版时就使用链接，点击链接才能看到网规。还有一个很重要的特点，就

【翻译】优秀的用户界面设计 | 飞鹰走码

https://lichangwei.github.io/2013/06/28/Good-UI/

一个好的用户界面不但容易使用，还可以带来很高的转化率。换句话说，它兼顾了商业利益的同时，也让用户更加容易使用。以下是一个不断更新的最佳实践的列表。 ###用一列布局代替多列布局一列布局让你对故事有着更多的控制能力，它能够以你预期的方式引导用户从顶部浏览到底部。然而多列布局却有一定风险让用户忽视了该页面的主要目的。用单一故事和底部一个显眼的 Call To Action 引导用户。 ###回赠礼

通过`Proxy`揭秘`JavaScript`的连续赋值 | 飞鹰走码

https://lichangwei.github.io/2018/12/12/continuous-assignment/

相信很多人都看到过网上流传的各种面试题解析，其中一个便是JavaScript的连续赋值。首先要申明的是，这种题目不应该作为普通前端岗位的面试题目存在，也更不应该编写这样的代码。网上有很多文章都在解析这到题目，题目基本一样，我在下面贴出了最常见的一个。 var a = { n: 1 };var b = a;a.x = a = { n: 2 };console

YouTube 开放 API 中返回数据不一致 | 飞鹰走码

https://lichangwei.github.io/2013/06/09/TotalResults-filed-in-Youtube-Open-API/

在YouTube 的开放 API中，totalResults 字段只是近似值，而不是准确值。比如返回的 totalResults 为 48，但是只返回 46 条记录。所以应用中不能依赖该字段来确定总共有多少页，然后允许用户直接跳到最后一页。因为最后一页很有可能就不存在。为什么会出现这种情况呢？我们从以下几个概念开始说起。 CAP 理论CAP 理论由 Eric Brewer 教授提出：在设计和部署

【翻译】RequireJS的五个有用的小技巧 | 飞鹰走码

https://lichangwei.github.io/2013/09/12/Five-Helpful-Tips-When-Using-RequireJS/

查看原文 RequireJS–Javascript 的文件和模块加载器–是 Web 应用中组织，管理，构建和加载 Javascript 的一种很强大的方式。我已经使用它好几年了，and while it’s admittedly difficult to limit myself to only five, 我要是早点知道这几条提示就好了。注意，该文章假定你了解 RequireJS，或者至少知道

Chrome 开发者工具 - 设备模式 | 飞鹰走码

https://lichangwei.github.io/2017/03/03/chrome-developer-tool-device-mode/

使用 Chrome 开发者工具的设备模式可以大大减低开发移动优先响应式网站的难度，下面我们开始学习如何使用它模拟各种设备以及开发完全响应式的网站。概述使用设备模式的屏幕模拟器测试网站的响应式特性自动保存设置，方便你以后继续使用。设备模式不能代替真实设备，请熟知它的局限性。 1 打开设备模式通过切换“设备模式”按钮或者使用快捷键Command+Shift+M (Mac)或Ctrl+Shi

focus VS scrollIntoView | 飞鹰走码

https://lichangwei.github.io/2014/05/08/scrollIntoView/

将今天遇到的小故障记录一下吧。业务相关的东西就不多说了，

HTML5应用缓存与百度地图服务 | 飞鹰走码

https://lichangwei.github.io/2013/09/23/HTML5-Application-Cache-and-Baidu-Map-Service/

本文假设你基本了解 HTML5 应用缓存。前几天，一个同事联系到我，说他们项目想使用 HTML5 的应用缓存，但是遇到了脚本执行错误问题，但是如果去掉 manifest 配置，即不使用应用缓存，则一切正常运行。我让他将项目代码简化一下，剥离业务相关部分，然后打包发给我。在浏览器中打开该页面以后，发现如下两个错误： Uncaught ReferenceError: BMap is not def

Javascript编码规范 | 飞鹰走码

https://lichangwei.github.io/2014/06/01/javascript-code-guide/

1 变量如非必要，请不要使用全局变量；局部变量应该尽可能缩小其作用域。声明全局变量必须使用window.前缀；声明局部变量必须使用var关键字。比如 (function() { // 局部变量 var config = {}; // 全局变量 window.global = {};})(); 同时声明多

通过 body 的 error 事件捕获页面中所有图片的 error 事件 | 飞鹰走码

https://lichangwei.github.io/2013/06/06/Events-in-Capture-Phase/

在 BDP 项目中，根据用户输入的关键字搜索视频并显示出来，后端返回的每条记录中有一个数组字段image_urls表示该视频的缩略图地址，它共有三种类型，分别是 small, medium 和 large。 { "image_urls": { "small": "http://...", "medium": "http://...",

CSS编码规范 | 飞鹰走码

https://lichangwei.github.io/2014/06/04/css-code-guide/

为了提高 CSS 的可读性、维护性、扩展性、复用性，制定以下书写规范。 ##1 命名规范 Id 和 Class 全部小写，并用中划线隔开。 ##2 书写规范样式和内容分离，不使用 style 属性定义样式。【建议】属性书写顺序显示属性display, position, float盒模型属性width, max-width, min-width,height, max-height, m

API设计 | 飞鹰走码

https://lichangwei.github.io/2013/07/19/API-Design/

http://www.infoq.com/cn/news/2013/09/mamund-on-api-design 这里谈到的 API 是指应用程序中不同模块之间的接口。它一般包含函数名，若干形参和一个返回值。

设计规范 | 飞鹰走码

https://lichangwei.github.io/2014/06/05/html-code-guide/

一. 命名规则 !important list information //正确list information //错误id 与 class 均采用中划线命名法，不得驼峰命名法二. 合理命名side information //推荐side information //不推荐根据内容而不是表象给 id 和 class 合理命名三. 标签语义化这里是强调文本 //用em标签标识强调文本这

在DOM操作中，如何减少 reflow 或 repaint | 飞鹰走码

https://lichangwei.github.io/2013/05/25/Reduce-reflow-repaint/

在这篇博客中，我们列举一些可以减少 reflow 或者 repaint 的方法。下面先讲述一下这两个概念。reflow，翻译为重排，意为重新布局。当一个元素的形状位置发生改变时，浏览器会对该元素以及子元素（也可能包括同级元素）进行布局和重绘。称之为重排。repaint，翻译为重绘。当一个元素的颜色等发生改变时，浏览器会对该元素进行重绘。为了减少重排和重绘，可以从以下几个方面着手。批量增删节点通过

npm install时连接超时的解决办法 | 飞鹰走码

https://lichangwei.github.io/2013/10/11/Connect-Timeout-When-Npm-Install/

今天在电脑上安装 node-inspector，用于在浏览器中调试 node。但是却遇到了如下连接超时错误。 sudo npm install -g node-inspectornpm http GET https://registry.npmjs.org/node-inspectornpm http GET https://registry.npmjs.org/node-inspectornpm

浏览器缓存模型 | 飞鹰走码

https://lichangwei.github.io/2013/09/23/Browser-Cache/

李长伟的博客

Javascript的坑 | 飞鹰走码

https://lichangwei.github.io/2013/06/20/Javascript-Trick/

以下题目摘自饮水思源。语言基础篇0. this 的指代function getThis() { return this;}console.log(getThis.call(1) === 1);console.log(getThis.call('test') === 'test');console.log(getThis.call() === undefined);con

【翻译】使用 Chrome 开发者工具调试 Canvas | 飞鹰走码

https://lichangwei.github.io/2013/09/20/Canvas-Inspection-using-Chrome-DevTools/

简介使用过 Canvas 元素的人都知道 Canvas 很难调试。使用 Canvas 通常要调用一长串难以跟踪的 API。 function draw() { context.clearRect(0, 0, 258, 258); context.fillStyle = '#EEEEEE'; context.beginPath(); context.arc(129,

【Node系列】回调地狱和异步编程 | 飞鹰走码

https://lichangwei.github.io/2017/06/30/callback-hell-and-async-program/

回调地狱Node中有大量的异步 IO 操作，被封装成基于回调的函数，遇到复杂的业务逻辑很容易形成多级缩进的代码，在左侧形成一个由空格（或 Tab）组成的三角形，代码变得非常难读，被称为回调地狱。 const fs = require('fs');const _ = require('lodash');function compose() { //读取页面模板 fs.readF

使用页面跳转完成登录和认证 | 飞鹰走码

https://lichangwei.github.io/2013/09/06/Using-Redirect-to-Login-and-Authentication/

在上篇文章我们提到如何使用 WWW-Authenticate 实现登录和认证。这一次我们讲一下另一种实现方式。服务器端提供一个登录认证页面，浏览器端需要跳转到该页面，用户输入 PIN 码之后，发送请求，浏览器验证之后跳转当前页面来。以下是更详细的步骤。浏览器端点击认证按钮，然后请求电视机（服务器端，下同）提供的一个认证页面。 GET http://192.168.1.199:7999/web

IIS 的 URL 重写（反向代理） | 飞鹰走码

https://lichangwei.github.io/2018/01/12/iis-url-rewrite/

以前我使用过Apache或Nginx实现反向代理，但是目前后端使用的是.Net语言，服务器操作系统是Windows Server，并且后端应用程序就部署在IIS上，因此不打算再安装Nginx，改为使用IIS。在操作过程中，遇到各种问题也耽误了不少时间，现在将一些操作流程记录下来，以备再用。项目简介项目采用前后端分离方式开发，两个代码仓库，并部署为两个应用。后端接口地址全部以/api打头，方便简

主要CSS3，HTML5特性兼容性调查 | 飞鹰走码

https://lichangwei.github.io/2016/07/04/css3-html5-feature-compatibility-survey/

CSS3 HTML5 部分特性特性组特性 IE8 IE9 IE10 IE11 Edge CH FF SF 参考 values calc × √ √ √ √ √ √ √ caniuse rem × √ √ √ √ √ √ √ caniuse vw,vh × √ √ √ √ √ √ √ caniuse color currentColor × √ √ √ √

IE 浏览器的阻止 XSS 攻击功能 | 飞鹰走码

https://lichangwei.github.io/2015/08/12/ie-prevent-xss/

昨天接到一个专利搜索结果页面的 bug：在某个搜索条件下，IE10 浏览器不能正常显示。 1. 重现问题我们这里没有 IE10 浏览器，一般都是通过 Windows8.1 上的 IE11 浏览器模拟实现，所以我立即在 IE11 上验证，没有想到 IE11 竟然也重现了这个问题，所以我也没有必要去模拟 IE10 了。开发环境：我们组有三台服务器，一台装 Ubuntu 用来做普通服务器用，剩下两台

Knockout简介 | 飞鹰走码

https://lichangwei.github.io/2015/09/06/knockout/

MVVM 的概念1.1 MVVM 的概念MVC 模型示意图 MVVM 模型示意图 1.2 双向绑定的概念页面中每次状态的变化，一般都伴随着多次 DOM 操作，每次 DOM 操作一般都需要先找到该输入框元素，然后修改其相应属性，即便后来有了jQuery这种 DOM 操作神器，仍然非常繁琐。随着前端逻辑的日益复杂，前端越来越难以维护。此时双向绑定应运而生了。双向绑定，简单地说，就是模型（数据）

HTTP缓存头部入门指南 | 飞鹰走码

https://lichangwei.github.io/2013/09/28/A-Beginner's-Guide-to-HTTP-Cache-Headers/

本文结合 CDN 行为，探索 HTTP 缓存头部。如果你正要了解怎么书写缓存头部以适应现代 WEB，或者你很好奇你周围的人都在谈论什么，那么你可以阅读本文。如果你已经了解了缓存头部的好处，并且想了解更多，那么我推荐你去查看W3 文档。缓存头部能做什么？简单地说，缓存能让你将 Web 资源保存在通往用户浏览器的每一个远程节点。当然浏览器本身也维护着一个私有缓存，它让浏览器不用每次都从服务器获取资

Cookie 的共享规则 | 飞鹰走码

https://lichangwei.github.io/2017/10/24/shared-cookie/

今天是 1024 程序猿的节日，今天不加班，回家加俩菜。问题昨天同事报出一个问题，给某家客户部署测试环境时遇到一个问题，他们访问该测试环境时完全正常，但是客户却不能访问。这是为什么呢？原来是这样的，测试环境部署在阿里云上，包括两个系统，称他们分别是系统 A 和系统 B 吧。系统 A 通过https://customer.exmaple.com 访问，系统 B 作为系统 A 的子系统以ifr

透过用户的要求理解用户的关切 | 飞鹰走码

https://lichangwei.github.io/2013/09/16/Why-the-User-Need-this-Feature/

先介绍一下项目背景：公司生产了一些电视机和照相机，同时公开了一些接口，允许开发者基于此开发一些第三方应用。有些开发者可能没有电视机和照相机真机，或者团队中真机不足，为了能够是他们顺利地进行开发，所以我们开发一款软件，让开发者可以申请虚拟设备。该软件中实现了 SSDP 协议让第三方应用发现虚拟设备。前些天，Tony 作为用户又作为项目的负责人提出一个要求：不能让一个账号同时在两个电脑（或者浏览器）

Lodash函数以及常见用法 | 飞鹰走码

https://lichangwei.github.io/2016/09/06/lodash-functions/

1 简介Lodash是一款优秀的 JavaScript 工具库，里面包含了大量的工具函数。在 2015 年就成为被依赖最多的 JavaScript 库，写这篇文档是最新版是 4.17.4，适用于常见浏览器以及 Node.js 等。这里给出其英文文档和中文文档的链接。其中中文文档的版本较低，但是区别不大，可以参考帮助理解。 2 常见用法在这部分我们介绍一些 Lodash 的常见的优雅的用法。主要是

【翻译】React模式 | 飞鹰走码

https://lichangwei.github.io/2017/05/04/react-patterns/

原文链接 1. 无状态函数（Stateless function）无状态函数是一种创建高度可复用组件的牛逼闪闪的方法，它自己不管理状态，他只是函数。 const Greeting = () => <div>Hi there!</div>; 可以传递props和context。 const Greeting = (props, context) => <di

没有后端的应用 | 飞鹰走码

https://lichangwei.github.io/2013/06/30/No-Backend/

在 infoQ 上这篇文章不用后端：noBackend 是什么？有什么好处？，阿里的王涛对这种没有后端的架构做了介绍和探讨。以下是文章引言。在近期举办的前端趋势 2013大会上，Gregor Martynus 做了一场题为“各位快看，不用后端！”的报告，站在前端的视角谈应用开发，服务端组件只退化到实现浏览器尚不支持的特性，这种方式与传统开发方式截然相反，后者首先要关注应用服务端，然后再利用前

HTML5应用缓存基础知识 | 飞鹰走码

https://lichangwei.github.io/2013/09/25/HTML5-Application-Cache-Basic/

下面简单的介绍一下应用缓存的基本知识： 1. 应用缓存的作用让浏览器内 WebApp 像本地应用一样，多数或者全部资源都保存在本地，在没有网络，或者服务器宕掉的情况下，仍然能够使用大多数或者全部功能。有三个特点：离线浏览，更快的速度，以及减轻服务器负担。 2. 使用了应用缓存的页面的加载流程当浏览器访问一个包含了应用缓存的页面时，如果应用缓存已经存在，那么直接使用应用缓存，并且仅仅加载mani

使用WWW-Authenticate实现登录认证 | 飞鹰走码

https://lichangwei.github.io/2013/09/06/Using-WWW-Authenticate-to-Login-Authentication/

在当前的项目中，我们做了虚拟电视机设备，手机应用必须连接并通过认证才能控制电视机。认证步骤如下，首先由手机应用向电视机发送认证请求，电视机收到后会显示 PIN 码，用户在手机应用中输入 PIN 码，再发送请求验证即可。其中一种认证实现，我们采用了 WWW-Authenticate，这种在互联网初期比较常见的认证方式。优点是非常简单，标准化的，浏览器支持完善。缺点是用户名和密码是经 Base64

【翻译】使用SVG | 飞鹰走码

https://lichangwei.github.io/2013/05/18/Using%20SVG/

原文地址：css-tricks.com SVG 是一种矢量图片格式。字面意为可伸缩矢量图形（Scalable Vector Graphics）。也就是你通过 Adobe Illustrator 做出来的东西。在网页中可以很简单地使用 SVG，但是有些东西是你应该了解的。为什么要使用 SVG？压缩量好，文件小高保真伸缩到任意尺寸（除了尺寸很小的情况下会失真）适合视网膜屏（retina）显示

【翻译】优秀的用户界面设计（二） | 飞鹰走码

https://lichangwei.github.io/2013/11/23/Good-UI-2/

译者注：几个月之前翻译了Good UI前 20 个最佳实践【翻译】优秀的用户界面设计。最近又看到有了更多的最佳实践。现在翻译出来，与您分享。渐变而不是立即变化 Try Transitions instead of showing changes instantly. Interface elements often appear, hide, move, shift, and resize

程序员困境 | 飞鹰走码

https://lichangwei.github.io/2013/08/19/Programmer-Dilemma/

这两天有一篇叫做《程序员困境》（英文原文 Programmer’s dilemma，中文解读版本，程序员困境：底层编码能力正逐步丧失）的文章很火，激起了程序员们的一系列讨论。作者讲了他最近经历，面试数十人，发现虽然他们的简历闪亮，但是底层编码能力很差。然后作者尝试分析其原因，提到了两个名词：1）专家陷阱：过于深入研究某些既有代码，成为这一方面的专家，但是这些经验阻挡了他的视野，也限制了他把握大局

【翻译】图片优化工具 | 飞鹰走码

https://lichangwei.github.io/2013/09/27/Tools-for-Image-Optimization/

原文地址 As we saw a few weeks ago, the weight of an average web page is now almost 1.5MB (median ~1MB), with > 50% of this being images. It’s a harsh reminder that many of our pages on the web are sti

软件产品质量不能依靠测试来保证 | 飞鹰走码

https://lichangwei.github.io/2013/09/11/Software-Product-Quality-Cannot-be-rely-on-Test/

李长伟的博客

Backbone中的几个小问题 | 飞鹰走码

https://lichangwei.github.io/2014/05/04/backbone-problems/

Backbone 用起来还行，但是在某些方面还是有不方便之处。比如，需要手动将数据填充到 DOM 中，需要手动从 DOM 中抽取数据 // 手动填充数据this.$el.html(this.template(this.model.toJSON()));// 手动收集用户输入的表单数据var arr = $('form-id').serializeArray(); 需要重复绑定事件，由于其模

跨域的几种方式 | 飞鹰走码

https://lichangwei.github.io/2013/09/01/Ways-to-Cross-Domain/

李长伟的博客

强迫注册和注册强迫症 | 飞鹰走码

https://lichangwei.github.io/2013/06/07/essay/

关于用户体验，我们经常听到这样的言论，除非到了非注册不可的时候，才让用户注册账号。过早地强迫用户注册，只会吓走用户。以今天看到的一个站点孢子社区为例，首页是一张背景图片，一张 LOGO 图标，一个登陆按钮和一个注册按钮，可谓非常简洁。“孢子”这个名字对我来说比较亲切，我挺喜欢玩《植物大战僵尸》，里面有个孢子射手。背景图片也很亲切，是一群光着身子的小孩子欢笑跳跃，对我也说，也非常亲切，我很想知道这个

ES5简介 | 飞鹰走码

https://lichangwei.github.io/2015/09/21/es5/

这是我组织的 ES6 特性分享的预热篇，主要介绍 ES5 的特性。既是入门，又是回顾相信很多人还没有完全在项目中使用 2011年正式发布的IE9实现了几乎所有ES5的特性 ES6，ES7……都已经或将要来了 ES5 中最有用的特性：JSONJSON 简介 Douglas Crockford 在 2002 年创建， JSON JavaScript 对象标记（Notation） JavaS

运行时指定 Webpack 的 publicPath | 飞鹰走码

https://lichangwei.github.io/2018/02/08/webpack-public-path/

问题描述一般情况下，我们在使用Webpack时，都会通过以下方式指定publicPath，它表示静态资源的访问地址。 { output: { path: ${__dirname}/dest, filename: 'app-[hash].js', publicPath: '', }}

一些有意思的交互设计 | 飞鹰走码

https://lichangwei.github.io/2013/06/22/Some-Interesting-Interactive/

网易邮箱当用户在很短的时间内三次点击“收信”按钮之后，如果还没有收到新邮件，系统提示用户注意查看“垃圾邮件”。当用户做出这样的动作时，基本都是用户被其他系统提示给他发送了一封邮件，然后用户急于查看邮件内容。如果该邮箱启动了垃圾邮件过滤功能，那么在多次刷新无果的情况下，就有可能是被当做垃圾邮件处理了，所以给出用户一种提示。这是几年前我注意到的交互行为，但是现在消失了。不知道是网易对自己的垃圾邮

lichangwei / lichangwei.github.io Goto Github PK

lichangwei.github.io's Introduction

Hi there 👋

lichangwei.github.io's People

Contributors

Stargazers

Watchers

Forkers

lichangwei.github.io's Issues

Recommend Projects

Recommend Topics

Recommend Org