肥客泉

5 月 6 日，InfoQ 主办的QCon 2019 全球软件开发大会在北京举行。W3C Web 技术总负责人 Philippe Le Hégaret 在大会上做了《Now and the Future: An Overview of the Web in 2019》的分享，介绍了 Web 技术当前关注的技术方向。

Web 技术在过去的标准制订方面进展比较缓慢，因此在移动互联网时代受到一些质疑，不过这一情况已经在 HTML5 和 ES6 等新标准的推出下有所好转。

我们根据演讲整理如下：

声明：本文为整理而成，非直接引用部分不代表 Philippe...

这是一篇译文，原文在 Hacker News 上获得接近 500 个点赞。

每过几年都有类似的文章出现，然而程序员却依然疲于学习新的框架，看完此文希望对你有所启示。

Update:

1. 本文已经翻译了「正反双方的观点」，不知有什么好驳的哦。

2. 有人说不相信有「框架很熟基础却不会」的人，其实这种人挺多的，参考一下这个

   • 面试一个5年的前端，却连原型链也搞不清楚，满口都是Vue，React之类的实现，这样的人该用吗？

我们是程序员，每天都在了解最新的技术，每天都在学习编程语言、框架和库。
因为我们知道的现代编程工具越多越好，对吧？

不停地追随 Angular...

前言

ECMAScript 6.0（简称ES6），作为下一代JavaScript的语言标准正式发布于2015 年 6 月，至今已经发布3年多了，但是因为蕴含的语法之广，完全消化需要一定的时间，这里我总结了绝大部分ES6，以及ES6以后新语法的知识点，使用场景，希望对各位有所帮助

本文讲着重解释一下ES6语法特性的补充，不会讲解一些API层面的语法，更多的是发掘背后的原理，以及ES6到底解决了什么问题

如有错误,欢迎指出,将在第一时间修改,欢迎提出修改意见和建议

话不多说开始ES6之旅吧~~~

let,const用于声明变量，用来替代老语法的var关键字，与var...

马上春节就要到了，应该有不少人正在准备踏上回家的旅程。在漫漫旅途中，看剧是一个打发时间的好方式，按照旅程时间长短，我们特意为你准备了一份「春节补剧清单」，为你推荐一些过去一年里值得在路上一口气看完的好剧。

每集时间：30 分钟
集数: 6
豆瓣评分：9.1
IMDb 评分：8.1

《少年犯》是由 BBC 推出的一部青春喜剧，改编自 2016 年的同名电影。剧集讲述了两个爱尔兰「锅盖头」中二青年调皮捣蛋的故事。

两位主人公 Conor 和 Jock 因为类似的家庭境遇而志趣相投，Conor 擅长出各种馊主意，常常给两人挖坑。Jock 聪明...

You Don't Need jQuery

前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。

1. Translations

2. Query Selector

3. CSS & Style

4. DOM Manipulation

5. Ajax

6. Events

7. Utilities...

数据可视化之初级篇

零编程工具

1. Tableau

Tableau 是一款企业级的大数据可视化工具。Tableau 可以让你轻松创建图形，表格和地图。 它不仅提供了PC桌面版，还提供了服务器解决方案，可以让您在线生成可视化报告。服务器解决方案可以提供了云托管服务。Tableau的客户包括巴克莱银行，Pandora和Citrix等企业

2. Infogram

Infogram的最大优势在于，让您的可视化信息图表与实时大数据相链接。只须三个简单步骤，您可以选择在众多图表，地图，甚至是视频可视化模板中进行选择。 Infogram支持团队账号。

3. ChartBlocks...

随着显卡性能的发展，以及类似 Humble Bundle 等游戏促销活动经常出现，如今已经越来越多人在 PC 电脑上享受到画面华丽的正版游戏了。

但如果在手机上也能玩到画质逆天的 PC 游戏大作，那就更有意思了！异次元曾介绍过 Steam 串流功能以及 MoonLight 游戏串流软件可实现类似功能。而由官方推出的 Steam Link APP 免费游戏串流应用终于也能让你的手机秒变掌上游戏机，随意玩转 Steam 电脑游戏了……

所谓“串流游戏”，是指通过有线或无线 WiFi 

memcached 可以用来做什么，不可以用来做什么?

Memcached是什么？

    Memcached是danga.com（运营LiveJournal的技术团队）开发的一套分布式内存对象缓存系统，用于在动态系统中减少数据库负载，提升性能。很多人都把它当作和SharedMemory那种形式的存储载体来使用，虽然memcached使用了同样的“Key=>Value”方式组织数据，但是它和共享内存、APC等本地缓存有非常大的区别。Memcached是分布式的，也就是说它不是本地的。它基于网络连接（当然它也可以使用localhost）方式完成服务，它...

文章翻译自 Product Hunt，作者为 John Cunningham，是 Remote Rise 的联合创始人，他们的业务就是帮助企业施>行远程工作制度。Product Hunt 也是远程工作的实行者，他们有三分之二的团队成员分布在 9 个时区，日常协作都是>通过 Slack 和 Zoom 来完成。

在 2017 年，已经有像 Automattic，Toptal 和 Github 这样的大公司开始招聘大量远程办公员工，现在慢慢也有越来越多像 Gitlab，Zapier 这样的小型创业公司开始施行远程工作制度。

可以预见的是未来有更多的创业公司会执行远程工作制度...

htttp://www.fk68.net/

http://www.tibiji.com/

点击上面http网址体验https访问

自动将 HTTP 转到 HTTPS

如果您在您的网站上有安全证书 (SSL)，您可以自动重定向到您的网站安全 (HTTPS) 版本的访客，以确保他们的信息域名注册超级。

基于 Linux 的账户使用 .htaccess 处理重定向的文件。

RewriteEngine On

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https:/...

一些对程序员有用的网站

在学习CS的时候有一些你必须知道的有用的站点来获取通知为了你的技术储备和学习新知识。这里是一个你应该访问的不是非常全面的一些站点的列表，这个列表会不断更新，只要我能得到链接，你也可以通过添加你知道的来为此做出贡献

索引

• 当你遇到问题时

• 新闻篇

• 针对新手的代码训练

• 针对那些想开始一个小的项目但是无从下手的人

• 通用编码建议

• 编码风格

• 通用工具

• 面试准备

• 纪录片

• 学习新知识-mooc

• 与你首选的编程语言的站点(对我来说是java)

• AI学习

• 研讨会、研究性写作、会谈等

• Reddit知识汇总

• Youtube...

回顾2016年前端市场，可谓如火如荼。各种前端的框架/库层出不穷，给大家带来方便的同时，也使得前端开发人员面临更多的学习成本。

2017年的前端会有怎样的变化呢？

微信小程序

微信小程序是一种可以媲美原生app的“app”，上市当天便在业内引起较大轰动。其实早在小程序之前也有百度轻应用这样的产品，很遗憾并未做起来。

究竟小程序会爆发多大的威力，我们拭目以待。但是可以肯定的是，一定会催生大量的小程序开发人员。而小程序用到的开发语言，就是我们前端的Javascript。相对于其他开发人员，这也是前端开发的一波红利。

Vue.js

是一个构建数据驱动...

前端技能图谱

• 基础

  • HTML / CSS

  • JavaScript

  • DOM

• 中级篇

  • 数据格式（如JSON、XML）

  • RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX）

  • 正则表达式

  • HTML语义化

  • 命令行

  • Node.js

  • DIV / CSS

  • SCSS / SASS

  • 矢量图形 / 矢量图形动画（如SVG）

  • 单页面应用

• 高级篇

  • ES6 / TypeScript

  • CSS3...

编者按：前两天Google 刚发布了新版Material Design 官方动效指南，今天@平行煎餅 就给大家带来了中文版！全文包括三个部分：为什么说动效很重要？如何制作优秀的Material Design动效及转场动画，动效的意义。新鲜热辣收好不谢！

在Material design的世界中，动效用一种优雅、流动的方式来描述空间关系、功能、和意向。

动效可以向我们展示一个App 是如何构成和用途。

动效可以做到：

1. 不同视图之间的焦点引导。

2. 当用户完成了一个手势后，提示用户将会发生什么

3. 明确元素之间的层级和空间关系

4. 当程序在...

正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。下面是@技匠 整理的，在前端开发中经常使用到的20个正则表达式。

正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：

它的原理就是从数字经过一个加盐(salted)算法产生一个哈希(hash)字符串。这样算法就是通过混淆使结果具有不可预测性，而唯一性依然由数字本身来达成，从而得到(类似 youtube 里的)足够短，不可预测且唯一的 ID。

使用方法也很简单。先设定一个字符串作为 salt。

var Hashids = require("hashids"),

    hashids = new Hashids("this is my salt”);

然后对数字(准确来说是数字数组)进行编码

var hash

估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方便多了，下面我们说说方法。

官方下载地址：http://fortawesome.github.io/Font-Awesome

下载后，将TTF文件安装到系统的字体目录。

一、加强体验舒适度

嗯，就是让用户更加爽更加爽的用你的产品。

具体表现在：

1.表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等，让用户知道这个界面和上一个、下一个的关系。这已经是非常最常见的运用了。

2.与用户手势结合，更自然的动画表现

当用户手势操作的时候，让界面的动态走向更符合手指的运动，从而让用户感觉到是自己控制了界面的动向，而不是机械化的跳转。

City guide app 用手势可以向左向右扔卡片

3.愉快的提示功能

在某些需要提醒的时候能吸引用户的注意，但是又不会生硬，符合预期的出现。

Action button feedback...

01. MaterialUp —— 每日 Material Design 设计案例

阿里的文档是我见过最乱和最不好懂的！简直就不是帮助文档只是阿里码农的debug参考手册。

想解决问题耗尽你耐心和弄得眼花的搜索资料，我解决这个OSS跨域问题要在下面这3个文档中来回切换和1个论坛找帖子还有1个搜索引擎找资料,累觉不爱！

    文档首页 › 开放存储服务OSS › Getting-Started

    文档首页 › 开放存储服务OSS › 产品文档

    文档首页 › 开放存

色彩心理学被广泛地运用到各个设计领域，这早已不是什么秘密。从日常的杂货到LOGO设计，色彩所起到的作用越来越大，它是给用户传递信息的最重要的因素之一。

根据Kissmetrics 的说法，当我们看到一个色彩的时候，信息会传递到大脑的下丘脑的某个区域中。接下来，信号会进一步传递到脑垂体，然后到甲状腺腺体。这也就意味着，色彩会刺激大脑和腺体分泌激素，引发出我们的情绪反应，并影响我们的行为。

科学研究表明，色彩会影响情绪，会招致正面的情绪，也能带来负面的影响，有的时候带来的情绪与实际要的并不匹配。Kissmetrics 接着补充道，网站的访客通常只需要大概90秒就能针对一个网站作出判断和选择...

薪酬体系By LeanCloud Team on Oct 14, 2014
Updated Tuesday, May 05, 2015

简介

我们相信公平和透明的薪酬机制很有益于公司的长期健康发展。我们在设计薪酬体系时重点考虑了几个问题：

• 避免薪酬倒挂：很多公司，尤其是大的互联网公司在人才竞争激烈的年份给出较高的入职薪水，而老员工的薪水因为惯性没有相应提高，所以造成了新员工入职薪酬高于老员工的不公平现象。

• 消除薪酬谈判带来的不公平：在招聘时，很多公司往往会根据候选人之前的薪酬以及他/她的期望值在可接受的范围内确定 offer。这样的方式事实上惩罚了之前薪酬偏低的人和不善于薪酬谈...

iframe属性：
allowtransparency  iframe所载加页的背景颜色设置为transparent(透明)时iframe将透明化。
allowfullscreen 启用 iframe 的内容以在全屏模式下显示。如果缺少，则仅 iframe（而非框架内的内容）可以进入全屏模式。
frameborder 是否显示 iframe 周围的边框。

本测试代码由 FK68.net 提供，作者：废客泉

一般视频播放窗口下方会有分享代码：视频地址、flash地址、html代码、通用代码 等。。  我们用通用代码就能得到iFrame的地址。

优酷视频（只能全

从2012年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计。2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页设计新标准的浪潮。新年补课，从头聊起 >>

两波设计趋势的预测，看看对了多少：

1. 《跟还是不跟？2014年网页设计趋势（附资源推荐）》

2. 《我的征程是未来！带你展望2015年最重要的网页设计趋势》

2010年5月，伊桑.马科特（Ethan Marcotte）在“A List Apart”写了一篇开创性的文章（题为“Responsive...

在CSS2.1里，background属性的简写方式包含五种属性值 –background-color, background-image, background-repeat,background-attachment, and background-position。从CSS3开始，又增加了3个新的属性值，加起来一共8个。下面是按顺序分别代表的意思：

SandijsRuluks，Froont联合创始人、设计师，制作了这样9张Gif来说响应式网页与传统的网页在原则上有何不同。如今，通过响应式设计，各种硬件上的网页哪怕都采用一套系统，都可以达到较好的阅读效果。

虽然看起来这两张图的结果是一样的，但其实它解释了响应式网页和传统网页制作的思路上的不同。如果想进一步地知道区别，请往下读。以下图片均是左栏是“响应式网页”原则，右栏是传统网页原则。

用像素值规定死页面上某个框的大小的时代过去了——你会发现在响应式网页中，会采用“流”这种思路。页面的某一个部分动了，其他的部分会随之动起来。...

你是否经常在办公桌上吃午餐？你是否觉得自己无法离开自己的电脑超过一个小时？你是否担心由于自己将午餐带离了办公桌而错过了电子邮件？以下10个理由告诉你，你该把午餐带离办公桌了……

你不是一台机器。作为一个人类，不管你是否乐意学，你还是有一定生理限制。为了更有效率，你每天需要离开办公桌一小会儿，午餐时间包括在内。

灵光一闪一般出现在工作之余，因为那时候你的大脑从工作中解放了，能够自由地思考新的主意。午餐时间让你的大脑解放一段时间能够让你产生新想法和新灵感。

在办公桌旁吃饭意味着你正在一心多用。你的注意力不在工作上，也不在食物上。...