发表于 | 阅读次数:

从第3页开始

发表于 | 阅读次数:

发表于 | 阅读次数:

妈妈再也不用担心我的PPT了——PPT神器reveal.js

写PPT比写文档要麻烦一些，需要选择合适的模板，根据内容去调整模板，比如调整字号、间距、背景、动画…那么有没有一种工具可以让我们只专注于PPT的内容本身呢？当然有，答案就是reveal.js

演示

先给大家演示下效果

reveal.js是一个开源的PPT框架，可以帮助你自由地在浏览器生成功能强大且简洁直观的PPT。

它支持了很完整的PPT功能，如嵌套幻灯片、Markdown支持、自动设置动画、PDF导出、演讲者提示、LaTeX支持、代码高亮…

使用

安装

reveal.js有Basic Setup和Full Setup两种安装方式

推荐Full Setup安装(它支持所有功能，比如external Markdown)。

Full Setup的安装步骤如下：

  1. 安装Node.js (>=10.0.0)

  2. 克隆reveal.js仓库

1
git clone https://github.com/hakimel/reveal.js.git
  1. 安装dependencies
1
cd reveal.js && npm install
  1. 启动服务
1
npm start
  1. 打开 http://localhost:8000 就可以查看b并调试你的PPT了。

推荐使用markdown

我使用reveal.js制作过三次PPT。

第1次是在一个小游戏活动环节，使用html+js编写的内容，有随机选成语、倒计时等功能。由于reveal.js是使用前端技术实现的，所以你可以自由地设计一些游戏内容，这个优势是普通PPT所不具备的。

第2次是一次分享，采用html编写的内容。

最后一次还是分享，不过这次使用了markdown来编写内容。

通过第2次和第3次的使用经历，我觉得markdown是最方便的PPT制作方式。它不仅能让你完全专注于内容本身，并且这些内容就是一个个markdown文件，而不会像使用html那样会被一些标签割裂开来。使用markdown制作PPT，就和你写一份普通文档没有区别。

index.html

执行npm start后，打开 http://localhost:8000 就可以看到PPT的内容了。

PPT的所有内容都在根目录下的index.html文件中，你只需要在index.html中填写内容就可以了。每个section标签包裹的就是一页ppt的内容。至于PPT的呈现效果（样式），reveal.js内置的css样式文件里已经都给你实现好了，你不需要关心这个。当然，如果你想修改PPT的呈现效果，也是可以去修改它的css文件的。

选择主题

reveal.js内置了很多主题，满足不同喜好。

你只需要将index.html文件中的link标签的href属性换成相应主题即可。

1
<link rel="stylesheet" href="css/theme/league.css" />

使用markdown

要使用markdown，你需要在index.html中引入插件

1
2
<script src="plugin/markdown/marked.js"></script>
<script src="plugin/markdown/markdown.js"></script>

然后初始化一下

1
2
3
4
5
6
7
8
9
10
11
<script>
  Reveal.initialize({
    dependencies: [
      { src: "plugin/markdown/marked.js" },
      { src: "plugin/markdown/markdown.js" },
      { src: "plugin/notes/notes.js", async: true },
      { src: "plugin/highlight/highlight.js", async: true }
    ],
    hash: true
  });
</script>

这样你就可以编写markdown来制作PPT了。

它支持内联markdown

1
2
3
4
5
6
7
8
9
10
<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](http://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

也支持外部引入markdown

1
2
3
4
5
6
7
8
9
10
11
<div class="slides">
  <section data-markdown="sections/1.md"
    data-separator="^\n\n\n"
    data-separator-vertical="^\n\n"
    data-separator-notes="^Note:"
    data-charset="utf-8">
<!--
  Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
  For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
-->
  </section>
1
2
<!-- sections/1.md -->
## Chrome 插件开发

外部引入markdown这种方式可以让你的markdown内容更纯粹，不用和html标签混杂在一起，所以比较推荐这种方式。

PDF导出

如果我们想把PPT分享给别人，显然不能把一个前端工程发个他，所以reveal.js也支持PDF导出。

只需很简单的几步操作

  1. 访问 http://localhost:8000/?print-pdf
  2. 打开打印窗口(CTRL/CMD+P)
  3. 自定义一些配置项，点击保存即可

总结

以上介绍的内容大概能满足你的需要了，当然reveal.js还有很多强大的功能这里没有介绍，感兴趣的朋友可以查看官网

参考

发表于 | 阅读次数:

分享一些开发中觉得好用的工具

zsh—shell工具

网站

非常好用的shell，支持众多插件和主题。

TODO TREE

VS Code插件，可以显示代码中的TODO。

Postman—接口调试

网站

可以很方便地发送http请求，调试接口。

Charles—抓包工具

网站

抓包工具，抓取页面的http请求。

caniuse—查看兼容性

网站

查询CSS、JS语法在浏览器中的兼容性。

GitBook—编写书籍

网站

使用Git和Markdown来编写你的书籍。

reveal.js—PPT制作

github地址

使用markdown或者写代码的方式高效制作PPT。

Typora—Markdown编辑器

网站

免费的轻量级Markdown编辑器

稿定设计—在线的photoshop

网站

processon—画图工具

网站

在线流程图，UML，原型图等。

iconfont—海量icon

网站

二维码生成工具

网站

ESLint—代码检查

代码规范检查及修复

Prettier—代码格式化

代码格式化

JSONView—json格式化

Chrome插件

json格式化和高亮，看接口数据就很方便了。

json在线格式化

网站

这个网站还有很多其他工具，如网页颜色搭配等

时间戳在线转换工具

网站

base64和图片互转

网站

视频转gif

网站

找了很多都有视频大小的限制，这个没有限制。

图片在线压缩

网站

mdnice-markdown编辑器

地址 https://editor.mdnice.com/

让markdown更美观，自己发公众号文章的时候经常用。

你还有推荐的工具欢迎在下方评论中留言哦~

发表于 | 阅读次数:

团队协作有时会不自觉地陷入五个很普通但却很危险的沼泽之中，这里称其为团队协作的五大障碍。

  1. 缺乏信任

  2. 惧怕冲突

  3. 欠缺投入

  4. 逃避责任

  5. 无视结果

五大障碍

缺乏信任

一般说来，信任是指以过去的经验为根据对一个人的行为作出预测。例如，我们相信一名一贯表现优秀的成员能够高质量地完成任务。

谈到建立企业团队，信任是指团队成员相信同事的言行是出于好意，在团队里不必过分小心或相互戒备。事实上，团队成员必须放心地接受彼此的批评。

当然，这是很理想的情况，只有非常优秀的团队能够建立起这种信任。这需要团队成员敢于承认自己的弱项，而且不用担心别人会以此来攻击自己。这些弱项包括性格弱点、技术不足、人际交往的困扰、失误以及无法独立完成任务、需要别人的帮助等。

只有当团队成员真正放心地把自己暴露在别人面前时，他们才能完全消除戒心，从而把全部精力集中到工作上，不用钩心斗角，尔虞我诈。

要在暴露弱点的基础上建立信任是非常不容易的，因为大多数成功人士在事业和学习过程中已经习惯了相互竞争、彼此戒备。要使他们为了团队的利益而摒弃这些几乎成为本能的东西，虽然不容易做到，但却是好的团队所必需的。

惧怕冲突

缺乏信任的团队无法产生直接而激烈的思想交锋，取而代之的是毫无针对性的讨论以及无关痛痒的意见。

欠缺投入

团队成员如果无法在热烈、公开的辩论中表达自己的意见，即使在会议中达成表面上的一致，也会欠缺投入。

欠缺投入有两个最重要原因，就是追求绝对一致和绝对把握。

  1. 不要追求绝对一致：优秀的团队能够理解，追求意见绝对一致的代价太大，所以他们能够互相作出必要的让步。这促使大家在不可能完全取得一致意见的情况下，也可以达成共识。

  2. 不要追求绝对把握：优秀的团队会因大家齐心协力地制定出目标并为之奋斗而感到自豪，尽管有时候他们并没有把握所作出的决定是否正确。

逃避责任

因为欠缺投入，且实际上并没有达成共识，团队成员就会逃避责任。

在团队协作中，逃避责任是指团队成员在看到同事的表现或行为有碍于集体利益的时候，不能够及时给予提醒。

团队成员逃避责任主要是因为不愿在指出别人不妥的行为之后，造成人际关系上的紧张，或者他们倾向于有意避免不快的谈话。

实际上，要保持团队高效率地工作，最有效方式就是同事间相互施加压力。这样做有许多好处，例如不再需要那么多绩效管理及改进计划等过度形式主义的措施。害怕辜负同事的期望，这比任何规定和制度都更能够促使成员们努力工作。

无视结果

如果团队成员不能相互负责、督促，团队成员很可能会把个人的需要（如个人利益、职业前途或能力认可）或甚至他们的分支部门的利益放在整个团队的共同利益之上时，就导致了无视结果。

克服五大障碍的一些方法

克服：缺乏信任

基于暴露弱点的信任不是一夜之间就可以树立的，这需要成员们长期同甘共苦，慢慢了解彼此的个性。不过，通过努力，一支团队可以大大缩短建立信任所需的时间，在相对较短的时间内取得相互信任。以下是一些特定的方法。

  1. 个人背景介绍

  2. 成员工作效率讨论

这项活动比前一项活动更具有力度和针对性，难度也相应较大。这需要团队成员指出同事为团队作出的最大贡献，以及最需要改进的地方，然后大家一起就每个人所说的进行讨论，讨论的对象通常可以从团队的领导者开始。

虽然这项活动看起来可能有些冒险，容易造成不满，但我们会惊喜地发现在一个小时之内，我们就能获得许多建设性的、有益的信息，而且活动通常会进行得很顺利。

  1. 意见反馈

  2. 团建

…

克服：惧怕冲突

  1. 挖掘争论话题

讨论要体现出客观性，大家都要有决心投入争论中，直到问题解决为止。

…

克服：欠缺投入

  1. 统一口径

在团队会议结束的时候，大家可以一起清楚地回顾会议上作出的主要决定，以及如何向员工和客户传达相关消息。

  1. 确定最终期限

  2. 意外和不利情况的分析

这样可以帮助他们克服对于失败的恐惧，让他们知道一旦决定是错误的，可能发生的情况并不像他们想的那样糟糕。

  1. 低风险激进法

在风险较小的情况下采用激进的方式，即团队在进行了大量讨论之后，强迫自身在调查和分析不足的情况下作出决定，在实践中调整方案。

…

克服：逃避责任

1.公布工作目标和标准

2.定期对成果进行简要回顾

3.团队嘉奖

…

克服：无视结果

一个团队怎样确保成员们把重点放在集体成绩上？方法是明确界定集体的工作成绩，并奖励为集体成就贡献力量的成员。

1.公布工作目标

2.奖励集体成就

…

总结

反过来说，一个真正团结一致的团队会具有如下特征：

  1. 成员之间相互信任。

  2. 针对不同意见进行直接的辩论。

  3. 积极投入到决策和行动计划中去。

  4. 对影响工作计划的行为负责。

  5. 把重点放在集体成绩上。

这听起来很简单，因为事情本身就是如此。然而要在实际中做到这些却是难上加难，因为那样需要高度的组织纪律性和持久性，能够做到这些的团队不多。

0%