[前端日报]阿里的 echarts 来了 – G2 一套图形语法

G2(The Grammar Of Graphics) 是蚂蚁金服-体验技术部-数据图形组的开源项目,是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。

74AE98CB-4BED-46AA-B9B0-79A9BEE6950B

类似于百度的echarts ,提供了比echarts更多的扩展。

简单、易用便于扩展

G2 的图形语法为我们提供了一套非常自由简洁的创建图表过程,可以说是一句话画图;并且 G2 提供了更简单的可视化改变形式,对于使用者来说,用户仅仅改变非常少的配置就可以实现不同图表之间的切换。可视化形式的轻松改变可以帮助数据分析人员更佳容易的找到适用于他的数据的形式,进而发现数据中的规律。 继续阅读

2016年度 JavaScript 展望(下)

本地移动 apps

在2015年,出现了一种新的基于 JavaScript 的移动应用开发类别:JavaScript Native。与基于 Cordova 或 PhoneGap 的应用不同,JavaScript 本地应用使用平台的本地控制与范型建立用户界面,无需涉及浏览器或 web 视图。

JavaScript Native 框架试图提供一种两全其美的方式建立 iOS 与 Android 应用:使用 JavaScript 编写程序逻辑(而不是 Java,Swift等),使用平台的本地用户界面 API 建立适应原生 OS 的应用,从而实现可能的最佳性能。

使用 JavaScript 打造的移动 apps 举例,点此获得源代码

React NativeNativeScript是2015年最早公开发布的两个 JavaScript Native 框架,后来者还包括 Fusetabris.js。自然,不同的框架提供了不同的功能。比如说,React Native 允许重用 React JavaScript 框架,而 NativeScript 允许直接调用 iOS 与 Android APIs。但是,他们都具备使用 JavaScript 搭建真正本地 apps 的高级方法。
继续阅读

2016年度 JavaScript 展望(上) 

在过去的几年间,JavaScript 这种原本用于 Web 浏览器端的脚本语言,越来越多地出现在更广泛的软件应用中。现在,JavaScript 可用作服务器端代码,运行 iOS 与 Android 应用,甚至控制机器人。很难想象还有什么软件生态系统是 JavaScript 没有影响到的。

JavaScript 之所以能在这些新领域长驱直入,很重要的一个原因就是性能。然而,几年以前,在服务器端运行 JavaScript 还是完全不可想像的。在2008年,谷歌开始开发浏览器,并进军 JavaScript 引擎世界,继而触发了一场性能大战,最终极大地提升了该语言的速度。最近的一些努力,诸如 asm.js 只是锦上添花罢了。

本文将会介绍,除了用 JavaScript 框架运行服务器端 JavaScript、创建移动 apps 以及桌面应用之外,未来将何去何从?文中将直接引述许多 JavaScript 解决方案的开发者之观点。让我们首先了解 Node.js 的发展,这或许是 JavaScript 的首个新领域。

Node.js

Node.js 是一款基于谷歌 V8 JavaScript 引擎的开源式运行时环境。尽管许多公司与框架都试图在服务器端运行 JavaScript,Node.js 却是首个大规模成功做到这一点的运行时环境。

从2009年首次推出开始,Node.js 的流行度可谓突飞猛进。使用 Ndoe.js 的公司数不胜数,而此前新近建立的 Node.js 基金会则包括 IBM,Intel,PayPal 以及 Microsoft 等巨头。Node.js 包管理器——npm,更是成为2014年软件世界中规模最大的包管理器,现在其包含的模块数是 Java 与 Ruby 等相似包管理器的两倍左右。

npm 包管理器的增长情况。图片来源:modulecounts.com 继续阅读

2015 年 JavaScript 开发者调查报告

年底将至,JavaScript 开发者调查也已经结束,此次调查总共有 5000 份回复,我真的迫不及待要分享这次调查的细节,感谢所有的参与者,这是 JavaScript 社区伟大的时刻。

你写什么类型的 JavaScript?

97.4% 的受访者写 JavaScript 的 Web 浏览器,其中有 37% 写移动 Web 应用。

一些参与者回复,他们会在其他地方用 JavaScript,特别是在开发中的 CLI 和桌面应用。有少部分还会在 Pebble 和 Apple TV 上开发。这些归类到其他类别上,占总选票的 2.2%。

An screenshot of the percentages for the first question 继续阅读

[转载]2011回顾:20个将JavaScript推到极致的网站

转载至:http://www.webapptrend.com/2011/12/1123.html

对于浏览器上的开发者来说,2011年又是相当精彩的一年。web开发者Phil Hawksworth在这篇文章中总结了web 上经典的JavaScript用法。

那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大,上面有各种丰富的功能可以供开发者选择,一些在几年前几乎难以想象的功能都已经一一实现。有了这些新功能,开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍,网站能够拥有让人惊喜的用户界面了。

有时候,这种技术的运用是非常精妙的,它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖,悄悄地给人们带来惊喜。

这里有20个特别突出的网站,他们在定位、技巧或者是JavaScript的使用上有各自的独到之处。

演示网站

先看一些有趣的东西。这些网站利用JavaScript将Canvas,WebGL,CSS3和HTML5元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户,或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错,但有些会占用大量的处理器或是显卡,所以笔记本电脑用户常常需要关注他们的笔记本温度,以免温度过高而出现异常。

1. Baroque.me

Baroque.me是一个简单,但是能够催眠的网站,它就用到了HTML5 Canvas元素,并使用JavaScript巧妙地控制了一个简单的虚拟巴赫大提琴设备的渲染工作。网站的声音是由Flash提供的,并且使用JavaScript控制。你可以控制页面上那些跳动的圆点,但是却很难控制大提琴的时间节奏。

它的开发者Alexander Chen来自Google Creative Labs,也参与了非常受欢迎的Les Paul Google Doodle开发,在早些时候,还开发了一个非常棒的可视化NY地铁系统

2. Beercamp

Beercamp 2011的界面非常有趣,可以自由缩放,它非常巧妙地使用了CSS3和JavaScript技术,这一点吸引了许多人的关注。网站大量采用了CSS3转换和变形效果,你还会发现它劫持了浏览器的滚动事件用来控制网页的缩放效果。今年的早些时候David DeSandro分享了相关效果实现的技术细节

 

3. Three.js

Canvas和WebGL这些技术为浏览器带来了强大的渲染功能。Mr. Doob开发的Three.js项目是一个3D JavaScript引擎,能够利用浏览器上的这些新功能渲染页面。下面是一个利用Three.js渲染动画或是3D模型的例子。

4. Windows Phone Demo

最新消息:web将覆盖移动设备!老实说,这个消息确实对使用JavaScript技术的移动市场来说是一个好消息。这还只是推动移动市场发展的第一步。

为了演示新的Windows移动设备界面,Microsoft开发了一个Windows mobile上的演示示例。用户确实能够发现它的界面播放的动画非常流畅,并且响应相当及时。这也是CSS和JavaScript的功劳(最好是通过iPhone或是Android设备访问——目前还不支持Windows Phone!)。

工具

这一节介绍的技术可能不会直接给用户带来惊艳的感觉(虽然有些可能可以做到),但他们确实非常重要。其中有些是开发者可能会频繁使用的JavaScript资源,而有些是人们开发浏览器应用时的首选工具。

5. Workflowy

Workflowy可以帮助人们整理自己的想法。在2010年十一月推出了他们的测试版本,仅仅用了30天的时间,它就拥有了一百万条记录了。它是由 Jesse PatelMike Turitzin共同开发的,Workflowy使用JavaScript处理DOM操作和存储,并且能够在大量的本地记录中快速查找目标记录。如果你需要整理自己的记录或是想查找新的GTD 工具,Workflowy会是一个不错的选择。最近它还增加了对移动设备和平板电脑的支持,方便用户分享文档。

6. jQuery Mobile

虽然现在移动web开发正变得越来越热,但是移动设备的开发工作还是相当困难的。jQuery JavaScript库的目标就是想在浏览器上实现一个通用的JavaScript开发方法。而 jQuery Mobile的目标则更加远大:简化各种移动设备平台上的web开发工作。这个库已经推出了1.0版本,jQuery Mobile网站就是一个很好的示例,展示了如何使用jQuery Mobile开发一个能够在各种移动设备和传统浏览器设备上运行的网站。

7. Spritecow

Spritecow是由Jake Archibald开发的,它能够帮助用户解决许多繁琐费时的问题。前台开发人员都知道,创建spritesheets的目标就是使得界面响应更加及时并尽量减少HTTP请求的次数。Spritecow将JavaScript,Canvas和一些数学逻辑算法融合在一起,为用户提供了一个好用的CSS生成工具。

8. Cloud 9 IDE

将整个开发环境整合到云和浏览器里面已经成为了我们这个时代的标志。在过去的几年里面,Cloud 9一直在开发他们的集成开发工具(IDE),但是今年,它变成一个令人期待的项目并且成为一个可用的web开发资源。创始人兼CTO Rik Arends表示,与其他类似项目(如Bespin)相比,使用JavaScript来管理DOM,在编辑环境中控制文档性能更好。 通过配置和扩展JavaScript,还可以为这个开发环境带来更多的提升和功能。都相当值得期待。

 

9. Reveal.JS

Reveal.JSHakim El Hattab开发的一个演示文稿制作工具,能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。它使用了CSS3变换功能和JavaScript,这个工具大受web开发者的青睐。

10. Pusher

Pusher是一个很棒的工具,在此不得不提。虽然它已经推出一年多了,但最近提升了Web Sockets对浏览器的支持,Node使得Pusher受到了更多的关注。

Pusher提供了一组API用来提升实时apps和服务。有许多非常棒的网站都使用了Pusher。

Pusher最初是由New Bamboo的几个员工开发的,虽然规模不大,但是做的工作却相当了不起,New Bamboo需要实现实时通讯来提升web游戏和工具,所以Pusher自身用到了Node。

11. Speakerdeck

来自Ordered ListSpeakerdeck最近被收录到Github上,它利用JavaScript和web技术在web上展示演示文稿。虽然许多其他类似的服务都利用了大量的Flash技术,Speakerdeck相比之下则较少用到Flash,而是利用JavaScript实现幻灯片预览功能。这里有许多丰富的功能和技术。

12. Gauges

既然已经提到了Speakerdeck,就不得不提一下Ordered List的另一个精彩服务——Gauges。它是一个分析工具,有点类似于Google Analytics,使用了常用的JavaScript插件获取用户的访问数据。Gauges有丰富的API,并且能够很好地渲染实时数据。JavaScripty相当的精彩。

改进界面

13. BBC主页

最近关于BBC更新的主页有一些争论。有些人喜欢它,而有些则对它感到反感。就个人而言,作者开始觉得新的主页看起来有点疯狂,但慢慢地也觉得它其实也挺可爱的。它的交互看起来非常酷,并且有许多的改进。即使在不支持JavaScript的环境中,这个主页也考虑得非常周到。但是,它还是显得有点拥挤和正正方方了。

14. BBC iPlayer

虽然已经介绍过BBC了,但是BBC iPlayer的确值得拿出来再说一说。它有一个非常了不起的JavaScript驱动界面,能够非常有效地呈现丰富的内容信息(不仅仅是视频信息,还包括图片信息)。使用BBC的主页和开源的Glow JavaScript库能够做许多新颖的工作。

15. Facebook

必须承认,Facebook在界面设计上做了大量复杂、精细的工作,使得它真实。上面有丰富的实时资讯,通知和聊天功能,虽然它的风格可能无法迎合所有人的口味,但是它的确对web设计产生了影响,并且影响了许多人。

背后的美丽

虽然作者非常关注视觉效果和代码库(代码库确实相当重要),但他最关心的其实是如何巧妙地利用这些技术。最后几个例子很好地展示了如何灵活地使用现有的技术。

16. Github

Github在用户交互方面做得相当出色并且非常注重细节的设计。在代码导航树中,用户能够在项目的目录树中平滑地切换,网站记录了各个页面的地址信息并且可以对地址进行标记,内嵌了编辑器,可以直接在浏览器中修改代码(使用Cloud 9 editor)。使用Canvas实现网站的可视化工作,包括搜索预览,弹出菜单和界面元素,这个列表还在不断增加。Github做得非常棒。

17. Google Doodle

Google Doodles提供了非常有趣的动画,用户能够与这些动画交互。有时,这些设计会让用户会心一笑,有时也许人们还没发现它们,它们就已经消失了。Marcin Wichary是Google的这个“delighters”项目的负责人之一,为了推广这个项目,必须 扫清JavaScript优化技术中的障碍。这个团队使用了sprite-crunch技术,用来压缩它们在动画中使用的sprites的。处理方法相当妙。这些涂鸦非常巧妙地利用了浏览器API和JavaScript。Google的开发人员太聪明了!

18. Nike Better World

Nike团队的这个网站常常被复制和讨论。这个网页将JavaScript和CSS结合起来,当用户滚动页面时,营造出一种有趣的视觉差。即使浏览器不支持JavaScript,这个网站也能优雅地降级显示,将视觉差效果移除,但并不会影响页面的正常显示,作者建议将导航链接保留下来。可以用JavaScript劫持这个链接,这样无论应用环境是否支持JavaScript,这个导航都能够工作。

19. Mobile Beetle

作者在今年早前曾对Volkswagen Beetle新网站提出了一些批评。在此不会重复这些批评,而只是介绍这个网站在将JavaScript推向极致的几个方面。它也是一个旋转效果做得相当不错的网站。这个网站的移动版本做得相当精巧。当你在iPhone上访问这个网站时,它充分利用了触摸和旋转事件提升服务的用户体验(尽管如果不是使用的WIFI的话,网页中的图片可能显得有点过大)。

20. Twitter移动网站

其实移动设备上已经有许多非常棒的Twitter客户端了,以至于大家可能会忽略今年Twitter推出的移动优化版本的web客户端,尽管它相当不错。Twitter的开发团队采纳了iPhone Twitter apps上的许多UI惯例,并且在自己的web框架中重新设计了一些UI。结果相当不错,在智能手机上访问浏览器中的页面就像是native app一样。在Android和iPhone上的效果都相当出色。真的是一个很棒的工作。

…这就是全部的20个网站

这就是作者挑选出来的20个将JavaScript推到极致的网站。当然,其实应该还有许多其他的网站也有资格出现在这个列表上,但是web太大了,而列举出20个网站只是一个很小的集合。虽然许多其他的网站也有一些突出的特点,但也各有不足。JavaScript让开发者能够在浏览器中做许多了不起的工作,但这里列出的20个网站中,有些为了实现某些特色牺牲了网站的访问性、地址性和其他性能或功能,这是一个优秀的web应用应该克服的。不过,它们确实在今年,给web开发者带来了不少新的想法。

 

文章来源:2011 in review: 20 sites thatpushed JavaScript to the limit

史上最雷人的前端开发面试题

大清早打开QQ,群里有人发的,真的雷到我了。几乎可以号称史上最雷人的前端开发面试题,题目是:
《javascript权威指南》因为封面是一头犀牛,所以这本书通常被业界叫为犀牛书,那么你知道这是什么犀牛吗?请简述一下该犀牛的特点和珍稀程度。

参考答案:
http://home.blueidea.com/space.php?uid=1&do=thread&id=168
http://baike.baidu.com/view/614882.htm

《UCD火花集》电子书版下载

今天网友巧笑倩兮发我一份《UCD火花集》电子书版,这是由“小狐狸”整理的一本电子书完全由来自http://ucdchina.com/的文本整理而成,基本还原了实体《UCD火花集》的内容,当然了还请支持正版:),感谢网友巧笑倩兮,感谢小狐狸。

点击下载DOC格式:http://www.foxygame.cn/upload/UCD火花集.doc

点击下载PDF格式:http://www.foxygame.cn/upload/UCDhuohuaji.pdf

===================UCD火花集电子书目录================================

第一章 用户体验设计在团队中… 5

UED——鱼缸里的水… 5

接过用户的绣球… 6

管理者不应直接参与产品的开发与设计… 7

UED应该向产品负责,而不是向PM负责… 8

第二章 用户调查和研究… 12

我要如何了解“她”… 12

贯穿整个产品生命周期的用户研究… 15

隐式挖掘网站用户行为… 17

角色设定——了解我们的用户… 19 继续阅读

前端导读(2009年8月)

前端导读系列文章已经迁移到《前端头条》http://top.css88.com/

1. IE 团队的前端性能优化建议

大家都知道YUI对前端优化的16条建议(目前好像又加了很多),今天看到《IE 团队的前端性能优化建议》,和YUI的那些没什么大的区别。

阅读地址:http://www.99css.com/2009/08/building-high-performance-web.html

==================================

2.有趣的PNG优化

做为一名网页设计师你或许已经对png格式非常熟悉,它提供了完整的透明度,这是一种无损的,功能强大的图像格式。能够很好代替gif图像格式。但是绝大多数人认为它不可被压缩,带着这样的疑问我们来认真看完下面这篇文章。每一种图像格式都有自己的优缺点,如果掌握了相关知识,在进行图像优化时能够针对图像进行相应处理,得到高品质的图像和高压缩率,这是图像优化的关键所在。png被称为开源的gif图像格式,它们之间有很多相同的地方(如:索引色),但png在每一个方面都要强于gif。它介绍了一些非常酷的功能,例如:图像封装和压缩,但对我们网页设计师来说最重要的还是线性过滤(也称为“三角过滤”)。

阅读地址:http://www.csspeople.cn/archives/86以及http://www.csspeople.cn/archives/136

==================================

3.IE与Firefox在JavaScript上的7个不同句法

尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。在这篇文章中,作者介绍了7个在IE和Firefox中不同的JavaScript句法。

阅读地址:http://www.happinesz.cn/archives/1097/

==================================

4.前端开发工程师必备速查手册

http://www.qianduan.net/f2e-must-have-cheat-sheet.html

  1. HTML速查手册
  2. HTML5 速查手册
  3. HTML字符实体速查手册
  4. RGB十六进制手册
  5. 微格式速查手册
  6. CSS 速查手册 (V2)
  7. CSS3 速查手册
  8. javascript速查手册
  9. javascript DOM 速查手册
  10. 正则表达式速查手册V2
  11. jQuery Visual Map
  12. mootools 1.2 速查手册
  13. Prototype 1.6.0.2 速查手册

==================================

5.浮动引起的文本重影

在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题,一般来说这类问题在IE6中表现的比较多,但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题,但此时的页面却是没有任何注释~,持续地测试分析问题变得越来越有趣了…

阅读地址:http://blog.gulu77.com/?p=524

Javascript丛林期待您的加入

关于我们
javascript丛林诞生于2009年7月1日,致力于javascript在前端开发中的应用,是js爱好者自发组建的技术分享小站,依托javascript丛林群(群号:7617538),
进行JS的技术交流,并把精华分享在上。
但,远远不止这些……
我们为了共同的爱好走到一起,在这里,我们时而为几行代码唇枪舌剑,时而为丁点惊喜手舞足蹈,时而为某种遗憾扼腕叹息…..
我们坚信while(!success){way++;effort++;try++;}
我们来自全国各地,在js丛林里却像是坐在一个屋里的一家人
进入javascript丛林,就进入了一个javascript世界
我们期望在将来的的某一天,javascript丛林里的成员都成为IT领域的精英.
$(’javascript丛林>成员’).addclass(’come on!’)

javascript丛林群号:7617538

—————————————————–
入群要求:
1.有扎实的js基础;
2.有js相关的博客或作品;
3.严禁在9:00~17:30之间灌水、讨论js技术无关的话题;

—————————————————–
如何加入js丛林群:
发送入群申请邮件到群管理员:princeb4d[a]qq.com或admin[a]css88.com
入群申请邮件请说明一下你的基本情况,比如联系方式,有博客的写个博客地址,有作品写作品地址。。。。。。

如果给你带来不便,请多见谅!