Markdown 插入表格语法

我们知道默认情况下,Markdown 插入的表格,单元格中的内容默认左对齐;表头单元格中的内容会一直居中对齐(不同的实现可能会有不同表现)。

普通的表格

| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| ------ | ------ | ------ |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

继续阅读

JavaScript中的定时控制-requestAnimationFrame应用

javascript2

这篇文章很短。

在前一篇文章中,我们讨论了在另一篇文章中讨论的几个技术的API实现。

在这篇文章中,我们将看看requestAnimationFrame

当我们有一些重绘任务的时候,我们使用requestAnimationFrame – 这将改变屏幕上的内容。但这只是工作的一般方式。

function render() {
  // do something
  window.requestAnimationFrame(render);
}

window.requestAnimationFrame(render);

HighResTimeStamp

requestAnimationFrame的问题是它不强制一个回调速度 – 只定义了它的上限。正如MDN所说:>回调的数量通常是每秒60次,根据W3C的建议,通常会匹配在大多数浏览器的显示刷新率。 继续阅读

JavaScript中的定时控制-Throttle、Debounce、Immediate的API实现

javascript1

上一篇文章中,我们研究了一些技术用来函数的定时控制(回调),在特定事件发生时触发。这些技术是:

  • Throttle
  • Debounce
  • Immediate

在这篇文章中,我们将看到这些技术如何以高阶函数的形式实现通用的API。

我们首先看看 Debounce 的实现: 继续阅读

JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念

javascript

你可能知道,JavaScript遵循事件驱动的编程范例。这意味着一些行为可以激活一些响应,并且这些响应仅在发生特定的行为时才被激活。我们称这些行为events(事件),和响应callbacks(回调)。连续的事件流被称为event stream(事件流)。

这些行为发生的速度不是我们能手动控制的。但是我们可以控制何时和如何激活正确的响应。有一些技术为我们提供精确的控制。

  • Throttle
  • Debounce
  • Immediate

Throttle

在现代浏览器中,帧速率为60fps是流畅性能的目标,给定我们16.7ms的时间预算用于响应一些事件所有需要的更新。这样可以推断,如果每秒发生n个事件并且回调执行,需要t秒的时间,为了流畅运行, 继续阅读

jQuery 3.0 升级指南

jquery-3-0

概述

在3.0主版本中,jQuery Core团队对API进行更改及清理,并修复某些代码更改引起的bug。这包括删除以前弃用的公开API,更改或删除未记录的API,并更改现有API的记录或未记录的行为用于特定输入。

浏览器支持

jQuery 3.0 支持以下浏览器:

  • Internet Explorer: 9+
  • Chrome, Edge, Firefox, Safari: 当前版本 和 当前版本 – 1
  • Opera: 当前版本
  • Safari Mobile iOS: 7+
  • Android 4.0+

jQuery团队策略是主版本更新只针对这些浏览器,所以这个浏览器列表至少支持到jQuery 4。

jQuery Migrate 插件

与jQuery 1.9 / 2.0中的主要更改一样,我们已经创建了一个新版本的jQuery Migrate插件,以简化旧代码迁移到3.0版本。我们强烈建议您使用这个插件作为升级工具,它将给出 可能影响您的代码的关于大多数主要更改的具体建议。 继续阅读

CSS3 Flexbox解决方案

1df97ee6-992d-4723-aa69-68730625dcc7

长期以来,CSS 一直缺乏合适的布局机制。 变形,动画,滤镜,对这门伟大的语言来说都很有用的补充的,但是都没有解决 Web 开发人员一直抱怨的的主要的看起来似乎是永恒的问题。

终于,感谢Flexbox ,我们有了一个解决方案。查看说明、DEMO及项目源代码:Flexbox解决方案

这个网站不是另一个CSS框架。相反,它的目的是展示曾经很困难甚至无法单独使用 CSS 能解决的问题,而现在使用Flexbox简单易用。随着最近发布的Internet Explorer 11和Safari 6.1,最新的Flexbox规格已经被每一个的现代浏览器支持(愚人码头注:浏览器的支持请客,你可以看 http://caniuse.com/#feat=flexbox)。 继续阅读

JavaScript ES6(ES2015)入门-核心特性概述

JavaScript ES6(ES2015)特性概述

JavaScript在过去几年里发生了很大的变化。这里有12个新功能,您今天开始就可以使用他们!

JavaScript历史

新增加的语言称为ECMAScript 6。它也称为ES6或ES2015 +。

自从 1995年提出的JavaScript构想以来,发展进展非常缓慢。每隔几年新增一次。1997年以来 ECMAScript 一直作为JavaScript实现的基础,引导JavaScript 发展。它已经发布了好几个版本,如ES3,ES5,ES6等。 继续阅读

边玩游戏边学Flexbox 布局

513f757a-9117-4e87-ad86-141b90122a98

Flexbox 布局在很大程度上解决了网页布局问题。但是实际使用的时候还是有一定的难度,因为属性太多,应用非常灵活。

愚人码头注:Flexbox属性具体属性查看 CSS3 Flexbox属性可视化指南这篇文章。

这里给大家介绍一个边玩游戏边学习Flexbox 布局的网站,将枯燥的说明文档瞬间变成有趣、又更易理解的游戏学习。

FLEXBOX FROGGY:http://flexboxfroggy.com/#zh-cn

这里也从github上下了一个,作为镜像网页:http://www.css88.com/tool/flexboxfroggy/#zh-cn

CSS3 Flexbox属性可视化指南

a-vusial-guide-to-css3-flexbox-layout-and-properties

愚人码头注:

Flexbox 布局(国内很多人称为弹性布局)正式的全称为 CSS Flexible Box布局模块,它是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的元素的对齐,方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区,以最优的方式达到兼容不同屏幕大小。

很多设计人员和开发人员发现使用Flexbox来布局很容易,可以使用更少的代码,更简单的方式实现更复杂的布局,也使整个开发过程更为简单。Flexbox布局算法不同于那些基于垂直或水平的块或内联布局。Flexbox布局应该用于小的应用程序组件之中,而新的CSS 网格布局模块正在兴起,来处理大规模布局。

本指南将以可视化的方式重点介绍 flex 属性是如何影响布局的,不是解释 flex 属性是如何工作。 继续阅读

移动前端不得不了解的HTML5 head 头标签(2016最新版)

html5-head

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

HTML基本的头部标签

下面是HTML基本的头部元素:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--具体可以查看本文 为移动设备添加 viewport 部分-->
    <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
    <title>页面标题</title>
    ...
</head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

继续阅读