文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

学无止境 — 特别是在网页开发当中. 我们的行业在不断地更新和完善自己,我们也应该这样! 不幸的是,坚持会使人精疲力尽,但其实并一定是这样。 在本文中我将告诉你如何将小实验变成一种有趣的和有效的方式来学习新的东西,并确保学习和保持最新的乐趣。

保持实验的乐趣

这位作者的更多内容

你做业余项目吗?如果你做,我相信你曾经做过一个一开始充满乐趣,但是很快变成一团乱麻的项目。 陷入困境不是一件很有趣的事情,而且会对双方的项目和你的工作造成很大的伤害。主要原因往往是范围蔓延或压力,而你应该在你的业余时间放松一下。通过执行一些规则,可以确保我们不会遇到不愉快的意外:

第 1 段(可获 2.21 积分)
  1. 准备好你的工作。确保你知道你的实验到底有多大,它包括什么。 如果它太多了,把它分成可管理的块,每一个块要有开始和结束,或终止它。
  2. 计划任务。 每天晚上不要熬夜。只要安排一个或两个小时,每周一次或两次。
  3. 没有截止日期。每个人,包括你在内,都需要放松。设置目标是好的,没有完成也没有关系。
  4. 给自己一些娱乐时间. 虽然你不应该拖延,但生活不仅仅是在代办事项列表上打上一个个对勾。花点时间好好享受你的劳动果实吧。
第 2 段(可获 1.35 积分)

做小实验不代表它们不能成为大项目的一部分。拿一个数据可视化项目为例,完成它需要一定的时间,但是可以很容易地把它分成一个个小任务:

  • 设立一个构建工作流程
  • 获取有趣的数据(这是个能激发你的灵感的APIs列表)
  • 用Node.js获取和处理数据,利用 ES2015 的特性
  • 对比和选择一项技术 (canvas, WebGL, DOM/SVG) 或者库 (d3.js, p5.js, THREE.js) 使数据可视化
  • 用你选择的工具可视化数据

我使用Trello 模板跟踪我所有的实验。在那里我列出它们并为它们做计划,并添加相关信息直到实验开始。对于比较大的项目,我倾向于为它创建新的模板并为每项任务添加卡片。其他的替代工具也可以满足需求。将事情写入文档可以排除干扰。

 

第 3 段(可获 2 积分)

回顾实验

除了通过实际做新东西进行学习,实验也是一个很好的机会提升自己。回顾你的实验,问问自己以下问题:

  1. 通过更好的准备,执行过程中的问题可以避免么? 如果是的话,该怎么做?
  2. 执行工作的质量是什么,我能做什么来改善?
  3. 我能更有效的准备我的实验么?

回顾和改进我们所做的事情给我们提供了经验— 这对我们的行业也是非常有价值的。许多实验评价造就了好的博客文章。

第 4 段(可获 1.19 积分)

我一个特别有趣的实验是编写了Sass中的矢量图形 这本书(虽然和JavaScript不是很相关)。书中我将一系列坐标转化为路径并将其栅格化到单像素 box-shadow。我不仅学到了之前不大熟悉的Sass功能,还必须研究一些算法。

A boy doing experiments in the laboratory. Explosion in the laboratory.

寻找灵感

如果你不确定下一步该学什么,有些资源在手对于灵感激发总是好的。

如果你喜欢视觉艺术, CodePen是一个很好起步的网站。网站上通常有很多神奇的笔,值得你拆开去看它们是如何工作的。 如果你想感受更多冒险,尝试 Dribbble或者Behance

 

第 5 段(可获 1.48 积分)

SitePoint的力量之源在于很多作者来自不同的背景。因此,里面的 JavaScript Channel 充满了各种各样关于 JavaScript 的好东西。

运行环境

你大概已经知道 JavaScript 在浏览器里工作,但是你知道还可以在浏览器外运行JavaScript 程序吗?

  • Node.js 是目前为止最流行的不需要浏览器运行的 JavaScript 。有了它,你可以写脚本、命令行界面、桌面应用或者其他东西。它可以在Windows、 OS X 和Linux 上运行。
  • Electron 允许你用老式的 HTML 、CSS、和 JavaScript 构建跨平台桌面应用。
  • Cordova 允许你用 HTML、CSS、和 JavaScript 构建移动软件。
  • React Native 允许你用 React 框架构建移动软件。
第 6 段(可获 1.46 积分)

浏览器API

在过去的几年中,许多新的API被引入浏览器,可以让你做各种有趣的事情。

  • Service Worker API是一款较大的API,使我们能做各种各样的事情,比如提供离线支持。
  • WebRTC是一款API能让我们创建与另一台计算机的实时连接

有一些API允许我们使用设备连接,来做些类似读取传感器数据的事情或者让设备做事情(比如振动)。

  • Ambient Light Sensor 提供了环境亮度信息,供我们使用来调整网站或者应用的亮度。
  • Battery Status的作用一目了然。我们可以要求获得电池状态。 耗电量较大的程序可以用它来启用省电模式。
  • Geolocation 给我们提供了用户位置的信息。
  • 我们可以利用 网络信息 为客户提供较小的文件。
  • Notifications 对很多应用都非常有用,比如聊天应用。
  • 你正在建立一个用鼠标做输入的游戏么,用Pointer Lock是你所需要的。
  • Proximity 能让你了解用户和设备是多紧密。也许这可以用来检测“拥抱”?
  • Device Orientation 让我们探测到什么时候发生方位变化。
  • Vibration 能让我们振动设备,这在游戏中是很棒的。
第 7 段(可获 2.79 积分)

库和框架

大多数库的目的是更轻松地完成工作,所以它不需要有很多的经验来使用它。许多流行的库和框架(比如Angular和Reacti)甚至被当成职业的必备知识体系。一种或者两种的储备能更好的让你在面试中表现自己。

在了解了库和框架能持续发展这么久之后。 虽然他们是有帮助的,但是你应该了解框架和库解决的问题,并能够在没有这些库和框架帮助下解决这些问题。

框架结构

  • Angular 是一个仍然被许多团队使用的MVC框架。
  • React 是一个用来渲染视图的库。
  • Polymer 是一个用于创建Web组件的库。
  • Lodash.js, Underscore.js 和Ramda.js 都是函数式编程库。 有些团队喜欢使用它们,但很多人不喜欢使用它们。 无论哪种方式, 对functional programming(函数式编程) 的了解都是一个很好的开发技能,对这些框架都应该去了解一下。
第 8 段(可获 1.99 积分)

图像视觉

  • D3.js是一个图形和DOM操作库,如果无论你想用SVG或HTML渲染图形,它的表现效果都很好。
  • p5.js是一个灵感来源于Processing(灵活的软件素描本和一种学习如何在视觉艺术的上下文中编码的语言)的库。 它有一个丰富的函数来绘制形状和计算。
  • Three.js 是一个高级3D API,用于解决WebGL的难点。

现实世界

就我个人而言,当我发现可以通过编写软件在现实世界中做一些事时,我真的很兴奋。可以考虑以下的任意一种:

  • Raspberry Pi (树莓派)是一种信用卡大小的单板计算机,非常适合教学或学习。
  • Arduino类似于Raspberry Pi,但更侧重于电子方面的事情。
  • LEGO® MINDSTORMS® 是一款可控制LEGO硬件的迷你电脑。为什么不选择它呢?
  • Johhny-FiveJohhny-Five是一个用于机器人和物联网的JavaScript框架,可以安装在Arduino或类似的设备上。

以上所有的小型计算机都是可编程,而且都能够通过JavaScript来进行开发。

第 9 段(可获 2.36 积分)

结论

小实验是动手学习新东西很好的方法。另一个益处是小实验能帮你提升你的工作方式以及行业中最有价值的东西。通过执行一些规则,我们可以保持实验的乐趣,激励自己学得更多,变得更好。

对于那些正停滞不前的人,我希望这篇文章已经给你提供开始全新有趣实验的动机。对于那些不确定下一步要解决什么问题的人,我希望这篇文章已经给你提供了一些灵感。或者你可能有一些好的实验想法?又或者我可能漏掉了什么?不管怎样,我真心希望在文章后的评论中听到你的声音。

第 10 段(可获 1.54 积分)

文章评论