ckinmind / frontend-read Goto Github PK
View Code? Open in Web Editor NEW前端阅读,整理在Issues中
前端阅读,整理在Issues中
Ghost 是一套基于 Node.js 构建的开源博客平台(Open source blogging platform),具有易用的书写界面和体验,博客内容默认采用 Markdown 语法书写
HTML 5.2规范的制定工作才刚刚开始,所以此时此刻还没办法猜测出很多东西。最重要的特性之一就是<script type="module">和对于模块如何分解、获取和评估,这也是制定HTML 5.2将要讨论的一部分。这个特性加入了对于加载JavaScript模块的支持,以及分解、获取、解析、评估模块所必须的依赖
Mozilla VR团队正致力于在浏览器中支持在线创作及显示VR内容,并于本周获得重大突破。通过与Google Chrome团队Brandon Jones的密切合作,Mozilla团队发布了WebVR API 1.0版本
MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法。应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们。消息传递指的是程序之间通过在消息中发送数据进行通信,而不是通过直接调用彼此来通信,直接调用通常是用于诸如远程过程调用的技术
PostCSS 可以直观的理解为:它就是一个平台、平台、平台,重要的事情来三遍比较爽,哈哈, PostCSS 提供了一个解析器,它能够将 CSS 解析成抽象语法树(AST)
关于 js 中的 this 的文章
Gist的多种用法
shim就是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现,Shim有时候也称为shiv,比如著名的HTML5兼容库html5shiv。一个polyfill就是一个用在浏览器API上的shim,我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill,然后新旧浏览器就都可以使用这个API了
本文主要是两方面内容:浅析浏览器内核的工作原理(以 WebKit 2 为例)。浅析由浏览器内核想到的前端优化,或者说前端优化规则是从哪儿来的
Athena是由京东用户体验设计部 凹凸实验室 推出的一套项目流程工具,不仅包括了csslint/jshint代码检测、images压缩、csssprite雪碧图、css/js合并压缩等常用基本功能,还拥有独立的管理后台能够对资源进行实时监控,让你对项目情况一目了然!
最近被分配到移动端开发组,支持某活动的页面页面制作。这算是我第一次真正接触移动端页面制作,下面就谈谈个人总结和思考。
,这里将结合自己对 RxJS 理解,通过 RxJS 的实现原理、基础实现及实例来一步步分析,提供 RxJS 较为全面的指引,感受下使用 RxJS 编码是怎样的体验
webPack的一些使用流程和配置方法
详细介绍了CommonJS规范
异步模块定义
Browserify本身不是模块管理器,只是让服务器端的CommonJS格式的模块可以运行在浏览器端。这意味着通过它,我们可以使用Node.js的npm模块管理器。所以,实际上,它等于间接为浏览器提供了npm的功能
这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知
简单的一句话描述 React Web 就是:它帮你把 React Native 的组件做了一个 Web 端的实现,并提供相关打包工具,让你可以直接打包出一份可以跑在 Web 端的代码
Mobx创建单例模式的方法
Three.js是构建3d场景的框架,它封装了WebGL函数,简化了创建场景的代码成本,利用three.js我们可以更优雅地创建出三维场景和三维动画
为了获得更好的用户体验,Chrome 从 56 开始,开启了一个叫做“滚动锚定(Scroll Anchoring)”的优化,效果就是,当页面在视口上方的部分突然变高了 x 像素,那么浏览器会为你自动向下滚动 x 像素,从而保证视口内容完全不变:
阅读:2017 年 3 月:15 个有趣的 JS 和 CSS 库
- Whitestorm 是基于 Three.js 引擎用来开发 3D Web APPS 和游戏的框架
- args 是使用 Node.js 构建功能齐全的命令行应用程序的框架
- Store.js 是用于本地存储的跨浏览器解决方案
- Neurojs 是一款用于在浏览器中进行深度学习 JavaScript 框架,它具备可以通过加强学习训练的全栈神经网络
在开始「批斗」fetch之前,大家需要明确 fetch 的定位:fetch 是一个 low-level 的 API,它注定不会像你习惯的 $.ajax 或是 axios 等库帮你封装各种各样的功能或实现。也正是因为这个定位,在学习或使用 fetch API 时,你会遇到不少的挫折
阅读:10个关于Node.js REST API 的最佳实践
在这篇文章里,我们将介绍Node.js REST API的最佳实践,包括关于路由命名,身份认证,黑盒测试,使用恰当的网络缓存等内容
据官网所说, Flint 是一个前端的编译器,它连接了编辑器和浏览器,多种特性让开发 Web 应用更加高效、快捷。它其实包含了服务器、命令行、工作流等等多种东西,所以综合来说, Flint 是一个智能的前端开发环境
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015
Ember.js是一个MVC的JavaScript框架
JSX 是 Facebook 团队提出的一个语法方案,可以在 JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。其使用的是 XML-like 语法,这种语法方案需要通过 JSXTransformer 来进行编译转换成真实可用的 JavaScript 代码
CLI(command-line interface,命令行界面)是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行
polyfill 是 shim 的一种。shim 是将不同 api 封装成一种,比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象
上github的时候经常在翻别人源码的时候特别苦恼,特别是你的网络不给力的时候,简直想死,Octotree 帮助你整理出来项目文件列表
号称最全的资源教程-前端涉及的所有知识体系
分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者
A modern, open source text editor that understands web design. Adobe新出的前端代码编辑器,很有意思
这个就是Twitter推出的postcss,以一种原生CSS的书写方式, 然后还可以帮你解决浏览器前缀、IE兼容、以下一代CSS书写方式兼容现在浏览器
阅读:在 ES6中 改良的5个 JavaScript “缺陷”
ECMAScript 6 (ES6) 新特性可以分为新增语法(例如:class),增强 JavaScript 功能(例如:import),以及改良 JS “缺陷” (例如:let关键字)。大部分博客将这三类新特性混在一起介绍,往往让 ES6 新手晕菜。因此我决定写下这篇文章仅仅介绍改良 JS “缺陷”的这部分特性。我希望通过这篇文章介绍,能让你明白只要使用一小部分 ES6 新特新,例如 let、箭头函数等,你就能获得巨大的回报
TypeScript是由微软开发的一个能够在Node.js上运行的开源语言和编译器。这个语言是在ECMAScript6基础上演化并吸收了生成Javascript类别和接口的一些特性。Typescript 的编译器使用TypeScript语言编写,并且能够在任何兼容Javascript的程序内运行,同时它也是作为node.js的一个工具包发布的。所以该语言最终生成的仍然是Javascript脚本
lovefield 是建立在 IndexedDB 上的关系查询引擎。它提供了类似 SQL 的语法,并且可以跨浏览器工作(目前支持 Chrome 37 及以上版本,Firefox 31 及以上版本,IE 10 及以上版本)
为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了@import和@extend可以使你的代码更加具有重复利用性,@mixin指令也同样能提高你代码的重复使用率并简化你的代码@extend指令通过继承从而简化了代码,但是它也有缺陷之处,首先是不够灵活,其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数,因此比'@extend'更加灵活和强大
NodeBB 是一个更好的论坛平台,专门为现代网络打造。它是免费的,易于使用。 NodeBB 论坛软件是基于 Node.js 开发,支持 Redis 或 MongoDB 的数据库。它利用 Web Socket 实现即时交互和实时通知。NodeBB 向下兼容到 IE8 ,有许多现代化的开箱即用功能:如社交网络集成和流媒体的讨论
cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples
Laracasts:在线Laravel视频课程教学网是一个由杰弗里程序开发者创办的PHP编程教学网站,定期发布教学视频,有免费和收费教程,如果你精通英语的话,不妨多关注这个教学播客网站
深入浅出ES6(七):箭头函数 Arrow Functions
介绍ES6的箭头函数
- Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现,但没有被默认放到 React 工具集里
- Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象
- Immutable 本身就是函数式编程中的概念,纯函数式编程比面向对象更适用于前端开发。因为只要输入一致,输出必然一致,这样开发的组件更易于调试和组装
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果
单个GitHub帐号下添加多个GitHub Pages的相关问题
关于一个github账号如何添加多个github page的问题
FP全名是Functional Programming函数式程序设计
另外OOP面向对象编程(Object Oriented Programming)
前端干货聚集地
EnjoyCSS 能够通过图形化的界面帮助你在线生成 CSS3 代码,可谓前端开发者的一大利器
非常酷,有源码,已加入练手项目Project
一个构建虚拟现实的web框架,封装了threejs 实现web VR功能
Polyfill-实现某个特征的兼容性处理方案,所以有JS Polyfill为了某个JS的特性
也会有CSS Polyfill
构建一个应用程序总是会面对异步调用,不论是在 Web 前端界面,还是 Node.js 服务端都是如此,JavaScript 里面处理异步调用一直是非常恶心的一件事情。以前只能通过回调函数,后来渐渐又演化出来很多方案,最后 Promise 以简单、易用、兼容性好取胜,但是仍然有非常多的问题。其实 JavaScript 一直想在语言层面彻底解决这个问题,在 ES6 中就已经支持原生的 Promise,还引入了 Generator 函数,终于在 ES7 中决定支持 async 和 await, 解决异步调用问题
一个 gist 用于移动端 html 5 页面的 flexbox 效果
blink内核是由谷歌开发,chromium/chrome浏览器的内核,实际上也是由webkit衍生而来。因为webkit本来是个通用内核,适合各种各样的平台,chromium只是其中一个。但webkit也有专门的团队来维护,当然由于是开源项目,google实际也是代码提供者之一。另外苹果的safari浏览器也脱自webkit内核,所以苹果在webkit方面相当有话语权。所以webkit算是多方博弈的平台
V8 是 Google 发布的开源 JavaScript 引擎,采用 C++ 编写,在 Google 的 Chrome 浏览器中被使用。V8 引擎可以独立运行,也可以用来嵌入到 C++ 应用程序中执行
Chromium 是 Google 的chrome浏览器背后的引擎,其目的是为了创建一个安全、稳定和快速的通用浏览器。
Chromium是一个由Google主导开发的网页浏览器。以BSD许可证等多重自由版权发行并开放源代码。Chromium的开发可能早自2006年即开始,设计**基于简单、高速、稳定、安全等理念,在架构上使用了Apple发展出来的WebKit排版引擎、Safari的部份源代码与Firefox的成果,并采用Google独家开发出的V8引擎以提升解译JavaScript的效率,而且设计了“沙盒”、“黑名单”、“无痕浏览”等功能来实现稳定与安全的网页浏览环境。Chromium是Google为发展自家的浏览器Google Chrome(以下简称Chrome)而开启的计划,所以Chromium相当于Chrome的工程版或称实验版(尽管Chrome自身也有β版阶段),新功能会率先在Chromium上实现,待验证后才会应用在Chrome上,故Chrome的功能会相对落后但较稳定。Chromium的更新速度很快,每隔数小时即有新的开发版本发布,而且可以免安装,下载zip封装版后解压缩即可使用(Windows下也有安装版)。Chrome虽然理论上也可以免安装,但Google仅提供安装版
阅读:在 ES6 大行其道的今天,还有必要使用 lodash 之类的库吗
lodash/fp 下面的所有方法,都是 Immutable 的。就是说所有的方法都不会改变传入参数的原始对象,只会返回一个新的对象
阅读:ECharts图表好不好用,Highcharts好用还是ECharts好用?
各有支持,半斤八两
阅读:react闲谈——在react中封装echarts组件
echarts是个好东西,很强大的配置功能,很多开发者都在使用它。那么在react里面如何去调用echarts?如何封装echarts呢?
server-mock 最简单好用的mock 工具
Puer + Mock.js = A configurable mock server with configurable mock(random) data
阐述了浏览器缓存发展的路线,以及最终浏览器缓存的策略
原型继承相关
实现了较完美的毛玻璃与背景渐变同步的效果
可以看看
不用任何框架、预编译,用最笨的办法造轮子,有tab, 分页,轮换,fullpage等
前端与设计协同工作专用工具
Blockly 是一个基于 Web 的可视化编程工具,只需要拖动几个图形就可以编程, 完全不需要打字
介绍了react-css-modules,不同于css modules
介绍 CSS Modules
介绍了CSS Modules的用法
如果只是为了使用jQuery的Ajax方法就引入整个jQuery库,既是一种浪费又加大了整个应用的体积。那我们还有什么其他的选择吗?事实上是有很多的: fetch() 、 fetch polyfill 、 axios ...其中最需要我们关注的是 window.fetch() ,它是一个简洁、标准化的javascript的Ajax API。在Chrome和Firefox中已经可以使用,如果需要兼容其他浏览器,可以使用fetch polyfill
阅读:React 最佳实践——那些 React 没告诉你但很重要的事
前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码。用谷歌搜中文“ React 最佳实践”发现前两页几乎全都是同一篇国外文章的译文...所以我总结了下自己过去那个项目使用 React 踩过的一些坑,也整理了一些别人的观点,希望对部分 react 使用者有帮助
StrongLoop 是 IBM 的一家子公司,StrongLoop API Platform 构建于开源的 LoopBack.io 之上,后者是一个高度可扩展的 Node.js API 框架。借助 LoopBack,您可以快速创建可扩展的 API 和数据库映射。StrongLoop 还拥有内置的移动后端即服务 (MBaaS) 特性,比如推送和离线同步,而且拥有一些图形工具,可用来集群化、分析和监视 Node 应用程序。StrongLoop 在 Express Node.js Web 应用程序框架之上运行,而且符合 Swagger 2.0 规范
一个很漂亮的适合主页的彩条
当你在浏览器中输入 baidu.com 并且按下回车后发生了什么?
如题
介绍了一个开源react组件的注意事项
Auto Responsive Layout Library For React
一个自适应的react布局组件
知乎:StackBlitz - 针对 Web 开发者的在线 IDE
试了下感觉还不错,不用再费劲在本地搭建开发环境依赖环境了
知乎: 如何编写Web前端配置: 一个小痛点的解决思路与技术沉淀
有很大的参考价值
随着HTML5和CSS3加入越来越多的模块,检查各种浏览器是否支持这些模块,成了一大难题。Modernizr就是用来解决这个问题的一个JavaScript库
阮一峰的博文,讲解了CSS3中的transition和animation,transition我知道,但是animation没用过,确实很强大,可以用CSS3做动画效果,比js要方便很多
简单说,Compass是Sass的工具库(toolkit)。Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系
阅读:[知乎]个有 15 个页面的项目怎么规范 css 样式?
就是如何css工程化,大多提到了用sass等
高效的设计稿标注、测量工具
React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化, 利用 props 形成单向的数据流,根据 state 的变化来更新 view, 利用虚拟 DOM 来提升渲染性能; Flux 是一种应用架构,或者说是一种**,它跟 React 本身没什么关系,它可以用在 React 上,也可以用在别的框架上; Redux 的作用跟 Flux 是一样的,它可以看作是 Flux 的一种实现,但是又有点不同
Material design for Vue.js
leetcode 是一个美国的在线编程网站,上面主要收集了各大IT公司的笔试面试题,对于应届毕业生找工作是一个不可多得的好帮手
因为很多服务是和google绑定的,所以很多服务用不了
firebase**的模仿者
不可变数据,方便拷贝数据
redux的中间件实现
目前流行的 Immutable 库有两个:
- immutable.js: Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现
- seamless-immutable: Immutable.js 学院派的风格不同,seamless-immutable 并没有实现完整的 Persistent Data Structure,而是使用
Object.defineProperty
(因此只能在 IE9 及以上使用)扩展了 JavaScript 的 Array 和 Object 对象来实现,只支持 Array 和 Object 两种数据类型
和var声明的变量有诸多的不同,需要看一下文档
NativeScript是一款使用JavaScript来构建跨平台原生移动应用的开源框架,支持iOS、Android和Windows Phone。它的使用没有繁杂的要求,只需利用已经掌握的JavaScript和CSS技能就能开发出真正具有原生用户体验的应用
APICloud是**领先的“云端一体”的移动应用云服务提供商。[1] APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。基于APICloud提供的“云API”和“端API”,开发者甚至可以忘记繁杂的服务端编码,也可以忘记复杂的Objective-C和Java,更可以忘记那数不清的屏幕适配
官方支持iOS、Android、HTML5.Write Once, Run Everywhere。一次编写可生成三平台代码。DSL模板学习超简单,直接写HTML、CSS、JS。这意味着可以直接用现有编辑器和IDE的代码补全、提示、检查等功能。轻量级、可扩展、高性能。集成花样多,可在HTML5页面嵌入,也可嵌在原生UI中
源于 Node.js 的 HTML 模板引擎
为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本**是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件
- 停止对 IE6-8 浏览器的支持
- 提供了精简版,gzipped 压缩的版本仅仅 6k
一个用来进行复杂重复的web自动化测试的工具
A high-level browser automation library.
本文将介绍我们组件化开发的实践过程
知乎:介绍组件化开发的历史
慕课网:本课程是腾讯前端团队Alloyteam参与主办的AC2016前端技术大会现场实录。大会分享议题涉及最近流行的ReactNative、Node.js、Angular.js、RXjs等技术。精彩分享不容错过!
原子设计
在这一章,我们将会看到如何在下面的场景中使用React,桌面应用/游戏/电子邮件/绘图
fibjs 是一个建立在 Google v8 Javascript 引擎基础上的应用服务器开发框架,不同于 node.js,fibjs 采用 fiber 解决 v8 引擎的多路复用,并通过大量 c++ 组件,将重负荷运算委托给后台线程,释放 v8 线程,争取更大的并发时间
- Redux是一个比较薄的数据层。同时,把View同步刷新也做了(redux-react)
- 在传统MVC中,还是有一个controller来做业务逻辑。但Redux硬生生的把一个controller切成二部分:action, reducer
- Redux应用最大的挑战更多来自设计层面,如何设计action
- React当中的数据流是单向的:数据只能从父组件传向子组件,反过来则不行
- 组件的state同样也能被传入到子组件中作为子组件prop的值
- 你需要明确的就是在React当中整个数据流都是向下传递的,包括路由、数据层、各个组件等等,从整个应用的state中来并汇聚到一起
- 我们可以通过一个叫setState的方法来修改state,一般我们都会在事件处理的方法中调用它
- 一般React应用当中的绝大多数数据都是prop,只有当用户输入内容时才会使用state来处理
- 在Class中我们还可以申明一个组件的许多其他方法,而在更多的情况下我们可以写一种函数式组件
- 人们在实践过程中开始将组件分为两种角色,一种关注UI逻辑,用来展示或隐藏内容;另一种关注数据交互,例如加载服务器端的数据。这两种组件被称作容器组件和展示组件
小程序中的标签更像是传统客户端开发中的组件(或者叫控件),每个组件都有自己背后的职能和使用方式。比如:如果需要展示图片,就只能用标签,其他的都无法承载。而如果需要提供可选的文本,则只能使用标签等
Scrollytelling is the best, 随着滚动页面的交互发生变化,信息自动滚动之类的意思
console.table好用
TAU CHARTS基于d3, CHARTIST.JS基于svg, 有参考价值
可视化的方式学习算法
一些flex布局中的知识点
react 16的新功能
如果你想让一个元素「贴住」另一个元素,那么用这个库吧。Bootstrap 的 Tooltip 依赖了这个库
某些地方和我想写的aboutjs很像,mark收藏
别人收集整理的好的前端博客
D3 是目前为止最好的、功能最齐全的可视化库,但是说它是画图表的库并不准确。它是一个可用于生成图表和其他可视化形式的底层工具。如果你只需要一些图表,选择更高层级(high-level)工具会使你的工作变得轻松得多。你应该选择一些基于 D3 的工具——有 D3 作为基础,可以更容易地从生成可视化图形,如我们用到的热图(heatmap)。一些推荐工具如下:NVD3, C3, Plotly.js,Vega,我们用的是 NVD3。 这是个不错的选择:因为 NVD3 的默认样式很棒,图表种类也不少
RactiveJS是一个模板驱动的UI库,融入了很多Backbone的元素(看了下和vue很像,和Ng很像)
React DnD 是一组 React 高阶组件,可以用来帮你构建复杂的拖拽接口,同时解耦你的组件。React DnD 非常适合像 Trello 和 Storify 这样的应用,在不同地方通过拖拽转移数据,而组件会改变它们的外观和应用的状态来响应拖拽事件
W3C提出Web Animation API,它致力于集合CSS3动画的性能,JavaScript的灵活,动画库的丰富等各家所长,将尽可能多的动画控制由原生浏览器实现,并添加许多CSS不具备的变量、控制以及调试选项等
我经历过许多 CSS 代码的调试工作,有别人写的也有自己写的,有移动端平台的也有标准桌面浏览器的,从陈旧的 IE 到最新的基于 Webkit 的每日构建。经验告诉我,很多人并没有一个标准的 CSS 调试流程。我发现在大多数情况下,拥有专业的解决问题的方法,能够节省花在 bug 上的时间。下面是我总结的经验
2016 很可能成为网络弹性(network resilience)元年。网络连接很可能不靠谱(flakey),或者根本就连不上,这也是为什么在 渐进式 Web App(译者注:Progressive Web App,以下简称 PWA) 中,支持离线和性能可靠都很重要。本文总结了关于 PWA 离线数据存储的一些创意。想想那些提供有意义的离线体验所需要的 JSON 数据、图片以及其他的静态数据
我觉着你是看了题目点进来的。前端和 docker 这俩八竿子打不着的有毛关系?那接下来我们就扯一扯,看看能不能把它俩扯一块。首先得达成共识,现在的前端已经不是以前的狭义的前端,如果指狭义的前端,那真是半毛钱关系都没有。但你我不可否认的是,现在是大前端的时代
IoC 全称 Inversion of Control,中文术语为依赖倒置(反转),其背后的核心**还是:面向接口编程
当我们使用Node.js原生开发命令行程序时或许会有一定的门槛,但通过依赖一些开源模块却能够帮助我们简化命令行开发,从而达到事半功倍的效果。本文主要通过一些示例来演示commander.js、inquirer.js的一些基本玩法。下面老司机将带着我,我带着大家一起来玩转Node命令行吧
本文并非教大家如何取代设计的工作,而是讲解前端如何更快更便捷的实现一些简单的设计任务,在没有设计师的情况下如何利用工具解决UI呈现的问题,让工作事半功倍
感谢这个快速发展的环境,给了页面狗,一个偷懒的机会:依靠新工具,新技术,极大的提高生产力
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试
Adobe Brackets 是Adobe公司推出的一款编辑器
提供用户在线压缩图片,智能转换图片格式,在线生成webP格式图片等功能
Demoo是基于web设计搭建的一款在浏览器内进行可视化操作的工具。通过上传平面稿件,用手势或触点热区的方式把界面关系连接起来,加入连接转场特效,输出一份仿真APP的、可体验操作的设计方案,满足在电脑、会议投影现场及手机上体验操作
Fuse.js是一个轻量级实现模糊搜索零依赖的JavaScript库。
Canvas是使用JavaScript程序绘图(动态生成),SVG是使用XML文档描述来绘图,Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制,SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景
Electron 是一个能让你通过 JavaScript、HTML 和 CSS 构建桌面应用的库。这些应用能打包到 Mac、Windows 和 Linux 电脑上运行,当然它们也能上架到 Mac 和 Windows 的 app stores
PhoneGap 被 Adobe 收购了,但是剥离了核心代码贡献给 Apache Software Foundation,Apache 将这个项目命名为Cordova ,也就是说 PhoneGap 是基于 Cordova 的,直接用Cordova
普及ES7 的 decorator 概念和简单用法
普及ES7 的 decorator 概念和简单用法
普及ES7 的 decorator 概念和简单用法
非d3实现的图表库,但是结构极具参考价值
看看别的团队的技术选型
学习单页路由的原理
网站里有很多很酷的特效,而且看到它们的源代码,也可以看到效果图
大名鼎鼎的js1K,1K字节以内的Javascript代码,实现一个酷炫的动画、特效、小游戏之类的。官网从2010年开始征集参赛作品,现在已经办了7年了,还在办
前端的练手项目,项目有很详细的解说,非常棒
很好的写css的网站
关于移动H5前端性能优化注意点的文章
在 2 年前,我面试别人的时候,会问一些有没有接触NodeJS、 Grunt、gulp、ES6、Babel 这类技能的问题,超过半数的面试者会回答『没有』,或者说『只是刚刚接触,并不是很深入』。迫于招人急迫,我并不会直接说 NO,然后继续问一些 HTML、CSS、JS 前端三板斧的知识。 然而今年,如果应聘者不会这些技能,那真的很抱歉, 我不会接受一个没有走在前沿的开发者 。任何面试者都不会喜欢一个墨守成规的人。难道没人告诉你,外面的世界已经变了吗
HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验,你可以将这些经验运用在你的项目中, 可定制
介绍了一些前端资源网站,包括:配色,icon图标,js插件,ui库,素材库等
Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。这并不意味着Electron是一个绑定图形用户界面(GUI)的JavaScript库。取而代之的是,Electron使用Web页面作为它的图形界面,所以你也可以将它看作是一个由JavaScript控制的迷你的Chrominum浏览器
代表的例子就是 Facebook 的 GraphQL,它是在 Facebook 内部应用多年的一套数据查询语言和 runtime。原本为了请求一个用户及其好友信息的请求,需要发起多个 API 请求。现在,我们只需要在客户端拼装好对应的 Query语句,在这个语句里将大部分需要查询的东西写好,即 JSON 格式的数据,然后发给服务端来处理。而在我们客户端上,我们所获取到的结果都是我们所需要的,不需要再做特殊处理了
Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的AngularIonic扩展
我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境。同时,我们也提供开源库源接入的入口,让所有人都可以提交开源库,包括 JavaScript、CSS、图片和 swf 等静态文件
SS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码,SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS
Big Pipe 是Facebook所采用的一项加速首屏加载的技术,Big Pipe 背后所用的到的技术其实并不复杂, 服务器传给浏览器一个没有闭合的 , 此时浏览器会把已经接收到的dom渲染出来(如果还有css, 也渲染上). 但是, 此时由于TCP连接还没有断开, 还没有闭合, 服务器可以继续推送更多的dom到浏览器, 甚至 <script>
分享了一些经常使用的前端开发工具
redux是为了解决react中组件与组件之间数据传递的问题
本文仅仅是对前几个月使用React重构百度新闻webapp项目的一个总结和思考,不会泄露任何项目代码(文章中的代码都是fis3或其他开源产品的配置代码,fis3是百度开源产品),因此“伸手党”可绕行
如何自己实现一个mobx,有很多的学习点
这个ui组件库只专注于样式,没有js代码,所以很容易改成react组件,很容易复用
和我们的oner-cli很像,可以对比一下
看懂了一个地方js中不小心将变量写成全局的就可能会造成内存泄漏
里面很多装饰器的实战用法可以参考,分享里也可以用到
响应式脑电波 — 如何使用 RxJS、Angular、Web 蓝牙以及脑电波头戴设备来让我们的大脑做一些更酷的事
蓝牙和脑电波的脑洞
Google Developers **网站是特别为**开发者而建立的
测试结果很多连接还是要指向.com, 还是会被墙
Webpack 基本做了下面这些事情:
- 从 context 对应的文件夹开始…
- …寻找 entry 里所有的文件名…
- …然后读取它们的内容。在解析代码时,每一个通过 import (ES6) 或 require() (Node) 引入的依赖都会被打包到最终的构建结果当中。它会接着搜索 那些 依赖,以及那些依赖的依赖,直到“依赖树”的叶子节点 — 只打包它所需要的依赖,没有其他的东西。
- 接着,Webpack 将所有东西打包到 output.path 对应的文件夹里,使用 output.filename 对应的命名模板来命名( [name] 被 entry 里的对象键值所替代)
Preact的常用api基本跟React一致,这使得对React熟悉的开发者,完全没有上手的难度
个针对于 iOS 和 Android(后来才支持的)全方位自动化流程的工具
mobx 是基于原生的 JavaScript 对象、数组和 Class 实现的。所以修改数据不需要额外语法成本,也不需要始终返回一个新的数据,而是直接操作数据
MobX 不是一个状态容器;很多人把 MobX 当作另外一个 Redux,但是它仅仅是一个库,不是一个什么架构
这是一个用来在 Web 网页端设计流程图的 UI 组件,在线流程设计器,基于 jQuery 开发
快速生成项目文档
Jest 是Facebook的一个专门进行Javascript单元测试的工具
阿里开源的企业级Node框架Egg
知乎:Chromeless | 让 Chrome 自动化变得简单
使用 Chromeless,开发者可以通过 elegant API 来控制 Chrome(打开网站、点击元素、填写表单等……),这对于集成测试和爬虫都更方便了
React 15.4.0 介绍了一个新的性能timeline特性,你能通过该特性看到组件的整个生命周期,如挂载(mounted),更新(updated),卸载(unmounted)等等。同时也提供了相关组件的生命周期可视化
介绍了Atom这个编辑器
针对大型的商业项目,技术已经足够成熟。 Canvas 已经相当快,WebGL 支持情况在快速改善。 大型的 专业游戏引擎 如 Unreal 和 Unity 已经能够利用 asm.js 导出项目到 WebGL。先进的 Web 应用是游戏的完美方式。Web Assembly 是要寻找的东西。 WebVR 将会是下一个大事件
HTTP 协议中的很多坑,自己都遇到过,我就针对自己遇到的几种 HTTP 常见的数据格式,来做一个总结
这篇文章主要是整理了国外两场有关于CSS分享大会分享的相关主题,前面一部分是@chris Coyier在CSS Dev Conf大会上做的相关笔记。最后在文章末尾附上了2016年CSS Conf分享的相关主题。如果你对CSS相关话题感兴趣的话,可以关注2016年12月17日在**广州举办的第三届CSS Conf大会相关主题
ECMAScript 2016已经完成标准化。这篇博客将探寻哪些特性会被包含进ES2017
Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本(npm scripts)
装饰模式经典的应用是 AOP 编程,比如“日志系统”,日志系统的作用是记录系统的行为操作,它在不影响原有系统的功能的基础上增加记录环节 —— 好比你佩戴了一个智能手环,并不影响你日常的作息起居,但你现在却有了自己每天的行为记录;更加抽象的理解,可以理解为给数据流做一层filter,因此 AOP 的典型应用包括 安全检查、缓存、调试、持久化等等
它们通常被称为 ES7,ES2016 或者 ES.Next 的特性(这三个是一回事)
Mobx 最关键的函数在于 autoRun,我们发现这个函数非常智能,用到了什么属性,就会和这个属性挂上钩,从此一旦这个属性发生了改变,就会触发回调,通知你可以拿到新值了。没有用到的属性,无论你怎么修改,它都不会触发回调,这就是神奇的地方
在上一个例子中,父组件可以通过传递 props 的方式,自顶而下向子组件进行通讯。而子组件向父组件通讯,同样也需要父组件向子组件传递 props 进行通讯,只是父组件传递的,是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中
styled-components 是一个能够让你在React或React-native组件里面编写css的库,它的写法可以让css混合在js里面
那么……什么是自定义属性呢?简单来说就是一种开发者可以自主命名和使用的 CSS 属性。浏览器在处理像 color 、position 这样的属性时,需要接收特定的属性值,而自定义属性,在开发者赋予它属性值之前,它是没有意义的
市场不是缺少前端,而是缺少优秀的前端工程师
在我看来,每一位 Web 开发者最应该学习的三个 JavaScript 库就是 jQuery、Underscore 和 D3。在学习它们的过程中,你将会从新的角度去思考如何写代码:jQuery 让你知道如何用尽量少的代码,尽可能多地操作 DOM;Underscore (或者称之为 lodash)用函数式的工具改变你写程序的方式;而 D3 给了你大量的操作数据的工具,以及图形化编程的**
如题
Weekly FEX技术周刊值得一看
超级推荐这个,JavaScript秘密花园是一个不断更新的文档,主要关心JavaScript一些古怪用法。 对于如何避免常见的错误,难以发现的问题,以及性能问题和不好的实践给出建议, 初学者可以籍此深入了解JavaScript的语言特性
主要你可以用它来练习你的JavaScript,对于提高你的JavaScript编程能力是很重要的。同时对于你英语能力的提高是很重要的
一个前端网址导航,很好
Giuhub issue 阅读
背后有近一百个前端来写文章,精选出来的才能发
此标准定义了 ECMAScript 脚本语言
一个兼容性检测网站,提供几乎现在所有浏览器及不同版本的兼容性情况,并针对各种情况有一一不同的解决方案提供
当教程整理一下
Github上一套开源的关于js的书,部分已中文翻译
XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信, 使ajax可以跨域
jq1.5版本以上,ajax可以链式调用,指定同一操作的多个回调函数,deferred对象的最大优点,就是它把这一套回调函数接口,从ajax操作扩展到了所有操作
实质是伪造成请求一个js文件,js文件是可以跨域请求的
本质是字符串替换,剥离出JavaScript语句,然后利用新的字符串构造函数,返回结果
fb的designer的文章视频和资源等(页面html很漂亮,干净整洁)
MixItUp是一种重量轻但功能强大的 jQuery插件,提供美丽的动画过滤和分类 排序内容。它起着很好的与现有的HTML和CSS,使其成为一个伟大的选择流体,响应布局。这是完美的组合,画廊,博客,或任何分类或排序内容!(官网里的html有很多svg)
首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性 你可能不知道的事,希望能为各位同学 正确使用 ES6,提供一些指导
clip 属性剪裁绝对定位元素,这个属性用于定义一个剪裁矩形
clip的加强版,可以进行任意边形的裁剪,但是注意浏览器的兼容性
貌似前端圈一直以来流传着一种误解:前端用不到算法知识,长久以来,我也曾受这种说法的影响。直到前阵子遇到一个产品需求,回过头来看,发现事实并非如此
大家肯定遇到过,当后端 API 没有编写完成时,前端无法进行调试,这就导致了前端会被后端阻塞的情况。而我所说的 Mock Server 是相当于构建假数据,然后把这些假数据存到 JSON 文件上,Mock Server 可以响应请求或者生成页面,当然也可以顺便生成 API 文档
当我们沉浸在旺盛的需求之中时,整个人便会成为一台工作的机器,切着类似的页面,写着同样的逻辑,重复着昨天或者上个月做的事情,时间久了,觉得腻味,没有什么创新,也没有明显的成长。用一句通俗的话来讲:工作五年,后面四年重复着第一年的活儿很多人尝试跳出这个怪圈,不过基于环境压力和思维受阻,最后又不得不选择放弃。今天想通过介绍如何高效有保障地开发一个无线页面来帮助大家找到突破口
Babun,一个 Windows 上的开箱即用的壳程序,如果你想在 Windows 下拥有像 Linux 一样的控制台,那么就试试 Babun 吧
一个远程的js开发调试工具,可以从任意网页发送日志debug或者测试信息,然后远程调试,可以做手机debug工具
a React UI toolkit for the web
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型
基于REST的API测试/文档类插件
NEI 是网易杭研前端技术部推出的一款产品,旨在帮助项目团队更好的管理 API 接口。 NEI 是杭研前端团队多年的技术沉淀,是很多位资深工程师的丰富经验总结,之前一直只对网易内部用户使用,今年 9 月初正式对外开放,NEI 按项目来管理所有资源,资源的创建和维护可由团队成员协作完成,目前它已经提供了以下功能: 项目管理:动态、团队管理、权限管理、项目文档等;页面管理:项目中的页面定义;异步接口:即本文所说的 API;接口测试和用例管理:方便回归测试和生成测试代码;数据模型: NEI 中最强大的功能之一,对应数据库中的实体对象等
koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手
Async ES6 HTTP microservices
JavaScript 的 Reactive 扩展 RxJS,RxJS/Cycle.js解决的是数据流的问题
一款很完整的图表配置工具
konph是一个简易轻量的Web前端配置读取工具, 用来在网页中读取前端全局配置项.
konph将url参数、js全局变量、以及默认值按照优先级从高到低统一起来, 同名配置项, 高优先级配置值会覆盖低优先级配置值
和上一条相关
docute 让你无需编译文件享受到无缝的文档撰写、发布体验
前端每周清单半年盘点之 React 与 ReactNative 篇
专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目
Real-time, responsive HTML/CSS/JS code editor(在线的代码编辑器)
Firebase能让你的App从零到一。也就是说它可以帮助手机以及网页应用的开发者轻松构建App。通过Firebase背后负载的框架就可以简单地开发一个App,无需服务器以及基础设施
全称叫Backend as a Service(后端作为一种服务), 怎么说呢,为移动应用开发者提供后端服务; 作为一个移动应用开发者(Android & iPhone),除了开发应用程序,还要做后台的服务器端,当然,大多移动应用开发者并非都懂后端开发, 这让一个应用应用开发者开发一款应用不容易,然而有了Baas,开发者就可以不用管后端开发了,Baas 提供商,提供了我们最常用的功能,比如数据存储,应用分析,IM 等功能,让开发者把主要精力放在应用本身,大大提高了效率
前后端的分离是系统级的分离,前端要有一整套完整的技术体系以更好地支持产品在终端形态上的快速演进,同时实现技术资源的横向复用。技术体系的线下层重点关注开发效率,基础设施层重点关注稳定性,保障层重点关注质量与可用性,业务层重点关注服务的全面性和可复用性。
A lightweight toolset for writing styles in JavaScript.可以在js中写css样式,支持scss,less等各种
Next.js 是一个基于 React 的通用 JavaScript 框架。它提供了一种便利的方式来创建新的 JavaScript Web 应用程序。开发人员不必在搭建 Webpack 或 Babel 的配置上花费太多的时间了
- React Trend: 用于创建展示趋势与活动指标的优雅的线型图
- React Overdrive: React Overdrive 是一个为 React 应用程序打造的简单、神奇的过渡动画制作组件
Async/Await 的优点:
语法简洁清晰,节省了很多不必要的匿名函数
直接使用 try...catch... 进行异常处理
添加条件判断更符合直觉
减少不必要的中间变量
更清晰明确的错误堆栈
调试时可以轻松给每个异步调用加断点
A Storytelling Timeline built in JavaScript
学习github的更多用法
了解 CSS 外边距与内填充的差异,以及它们是如何影响网页各个元素之间的空间
一个有意思的制作程序员表白页的教程
两个框架的一些对比
CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式,最终使开发人员能高度控制我们眼前屏幕上页面的显示效果
介绍了一些常见解决跨域问题的方案
介绍了JavaScript 机器学习库
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象,在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上
ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具
在装逼成本越来越高的JS圈,是时候充值一下了
前端周刊是一份专为前端从业人员,以及对前端、设计领域感兴趣的朋友们打造的技术周刊。程小狮会精选出前端、设计领域近期相关的资讯、热点以及技术干货,与大家一同分享
那么,到底2016年javascript开发方向是什么(或者2017年又会有什么新的动向)?
在web开发越来越复杂的今天,前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。开发者们如果使用得当,这些存储可以帮助我们提升网页的性能与灵活度。本文不讲个中的细节,只讲各种前端存储的利弊,与各类存储的应用场景。毕竟这些技术的细节在网上随处可见,如果读者你决定使用的话,再去细查也不迟。我们前端人手里都有哪些存储武器,都用在什么地方
Code Splitting 其实就是把代码分成很多很多块( chunk )
Prepack 是一种优化js源代码的工具: 将一些静态计算提前放到编译时执行,从而提高其执行效率从而提高应用的启动速度
实现垂直居中最好的方法是什么呢?这里有不止一种方法可以实现
前端和AR结合
30 天学习 30 种新技术, 很有意思
查看某一个npm包压缩后的大小,下载需要的时间,包的依赖深度
phantomjs实现了一个无界面的webkit浏览器。虽然没有界面,但dom渲染、js运行、网络访问、canvas/svg绘制等功能都很完备,在页面抓取、页面输出、自动化测试等方面有广泛的应用g
简单对象访问协议是交换数据的一种协议规范,是一种轻量的、简单的、基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WEB上交换结构化的和固化的信息
GraphQL 是一个由Facebook提出的 应用层查询语言. 使用 GraphQL, 你可以基于图模式定义你的后端. 然后客户端就可以请求所需要的数据集
Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能
一个高效、强大、跨平台的 Web 前端开发工作流工具,工作流将项目和流程分离,所有项目共用一份工作流任务 和 node_modules 依赖,通过插件的逻辑进行功能差异特效定制
前端实现的很炫的3D动画场景
知乎:面试一个5年的前端,却连原型链也搞不清楚,满口都是Vue,React之类的实现,这样的人该用吗
一个很有意思的问题,比较认可58前端团队的回答
介绍了蚂蚁的可视化图标库g2
很好的正则教程
介绍了一些前端调试的方法
知乎:docsify 4.0 发布,支持服务端渲染(SSR)
docsify 是一个无需编译轻量级的文档生成工具
SPA
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序
Yeoman
Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流
Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化
BEM
源自Yandex的CSS 命名方法论
marionetteJS
Backbone.Marionette 是 Backbone.js 的一个组合应用库,简化了大规模 JavaScript 应用的开发。包含一组常用的设计模式
Backbone.js
一个早期的前端mvc框架
Zepto.js
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto
Meteor.js
是一个新鲜出炉的现代网站开发平台,基础构架是 Node.JS + MongoDB,它把这个基础构架同时延伸到了浏览器端,可以同时在服务器端和客户端无差异地调用,本地和远程数据通过 DDP(Distributed Data Protocol)协议传输
Ember.js
Ember.js是一个MVC的JavaScript框架
Sea.js
SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机
淘宝FED对GraphQL的探索
一个非常酷炫的基于d3的图表库,可以实现非常酷的图表联动
An online code editor tailored for web application development
通过 canvas 重画图片,显示倒影效果
这也是框架取名 regular = react(ractive) + angular的由来
一个顶部加载进度条插件
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.据codemix创始人Charles Pick介绍,Babel是所有ES6转换编译器中与ES6规范兼容度最高的,甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性,而且不会影响与老版本浏览器的兼容性。此外,它还支持许多不同的构建&测试系统,使开发者很容易将它集成到自己的工具链中。
Charles认为,Babel从根本上讲是一个平台
Socket.IO 实现了实时双向的基于事件的通讯机制。旨在让各种浏览器与移动设备上实现实时app功能,模糊化各种传输机制。Socket.IO 是跨平台,多种连接方式自动切换,做即时通讯方面的开发很方便,而且能和expressjs提供的传统请求方式很好的结合,即可以 在同一个域名,同一个端口提供两种连接方式:request/response, websocket(flashsocket,ajax…).
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成
Webhook就是用户通过自定义回调函数的方式来改变Web应用的一种行为,这些回调函数可以由不是该Web应用官方的第三方用户或者开发人员来维护,修改。通过Webhook,你可以自定义一些行为通知到指定的URL去。Webhook的“自定义回调函数”通常是由一些事件触发的,比如推送代码到代码库或者博客下新增一个评论,源站点会为Webhook进行HTTP请求的URI配置。用户通过配置,就可以使一个网站上的事件调用在另一个网站上表现出来,这些事件调用可以是任何事件,但通常应用的是系统集成和消息通知
CommonJs 是服务器端模块的规范,Node.js采用了这个规范,AMD 是 RequireJS 在推广过程中对模块定义的规范化产出 ,AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块,CMD是SeaJS 在推广过程中对模块定义的规范化产出
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置
将fetch 和 react component结合,很有意思
由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise
阅读:下一代 Web 应用模型 — Progressive Web
尤其是 Web 客户端技术,迎来了爆发式的发展。包括但不限于基于 Node.js 的前端工程化方案;诸如 Webpack、Rollup 这样的打包工具;Babel、PostCSS 这样的转译工具;TypeScript、Elm 这样转译至 JavaScript 的编程语言;React、Angular、Vue 这样面向现代 web 应用需求的前端框架及其生态,也涌现出了像同构 JavaScript与通用 JavaScript 应用这样将服务器端渲染(Server-side Rendering)与单页面应用模型(Single-page App)结合的 web 应用架构方式,可以说是百花齐放
同构 JavaScript 应用基于 JavaScript 编写,可以在客户端和服务端运行。正因为此,你只需要写一次代码,就可以在服务端渲染静态页面,还可以在客户端完成复杂的交互
篇非常优秀的 React 教程,这篇文章对 React 组件、React Router 以及 Node 做了很好的梳理
阅读:React Server Side Rendering 解决 SPA 应用的 SEO 问题
解释了一下react的服务器渲染问题
1.手机类型判断; 2.返回字符串长度,汉子计数为2; 3.获取url中的参数;4.js绑定事件适用于任何浏览器的元素绑定; 5.获得当前浏览器JS的版本; 6.获取当前点击事件的Object对象; 7.字符串截取方法; 8.JS弹出新窗口全屏; 9. 全选/全不选 ; 14.回车提交;
前端文章的集合
关于一个图片网站ffffound.com
underscore / Bootstrap / Backbone等
很好的例子,可以参考
需要细度
Processing是一个为开发面向图形的应用(visually oriented application)而生的简单易用的编程语言和编程环境。Processing的创造者将它看作是一个代码素描本。它尤其擅长算法动画和即时交互反馈,所以近年来在交互动画,复杂数据可视化,视觉设计,原型开发和制作方向越发流行,大家都喜欢这个可爱贴心,简洁好用的编程工具。Processing基于Java,其语法规则和Java是一致的,但是即使你熟悉Java编程,也请暂时忘记这一点,因为Processing不同于Java,它更为简单,并且已经演化出了它自己的一套"工作习惯"
Processing.js 把 Processing 代码转变成能够在浏览器端运行的javascript代码,实质是通过标签来实现绘图的
本文旨在对那些已经是BEM的爱好者或是想要去更有效率的使用它或是非常好奇并且想去学习它的人有所帮助。现在,我对BEM是一个优雅的命名方式已经不报有任何幻想。它完全不是。我曾经很长一段时间放弃接受它的原因之一就是它的语法看起来非常丑陋。我心中的设计因子不希望我优雅的html结构被丑陋的双下划线和连字符弄得一团糟
在 ECMAScript 2015 之前,JavaScript 里的对象字面量(也叫对象初始化器)功能很弱。它只能定义两种属性
在双12结束之后,将开始部署IE8覆盖全屏的浮层进行用户引导,浮层也将不能关闭
在JavaScript中“创建对象”是一个复杂的话题。这门语言提供了很多种创建对象的方式,不论新手还是老手都可能对此感到无所适从,不知道应该选择哪一种。不过,尽管创建对象的方法很多,看上去语法差异也很大,但实际上它们的相似性可能比你所以为的要多。本文将带领你踏上一段梳理对象创建方法的旅程,为你揭示不同方法之间的依赖与递进关系
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.