panlippt
Version:
运行在浏览器中的ppt 演示框架
262 lines (180 loc) • 6.59 kB
Markdown
title: 2015年述职报告
speaker: zan
url: https://github.com/ipanli/panliPPT.git
transition: move
files: /js/demo.js,/css/demo.css,/js/zoom.js
theme: dark
usemathjax: yes
[slide style="background-image:url('/ppts/images/ppt-start.png')"]
[slide]
## 你喜欢什么颜色的背景
----
[深蓝](?theme=moon)-[亮蓝](?theme=blue)-[黑色](?theme=dark)-[绿色](?theme=green)-[白色](?theme=light)
[slide]
# 我是谁?
## 我来这里做什么
<small>演讲者：周赞生 (Julian)</small>
[slide]
# 你是干嘛的 {:&.flexbox.vleft}
> 前端工程师 (欠锻攻城狮) -- 优雅的90后,每天写点有意思的代码,然后分享给朋友看,Hi,xxx,这是刚出炉的，酷不酷( 裤呆了 )！
[slide]
## 理想的工作环境
----
* 极客代码疯狂群体 {:&.rollIn}
* 新技术发烧友
* 全栈工程师
* 开源爱好者
* 为自己的理想方案而争吵
* 专业填坑100年
[slide]
## 目前的开发环境
----
[slide]
## 跨终端同步响应
----
[slide]
## 我们做了些什么
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. s = ut + \frac{1}{2}at^2 $$
矩阵：\\( x = {\begin{bmatrix} 1 & 2 & 3 \\\\ 4 & 5 & 6 \end{bmatrix}} \\)
[slide]
## Panli 前端组件库
----
<iframe data-src="http://panli.mu.gg/book-pc/" src="about:blank;"></iframe>
[slide]
## 日常工作
----
panli 主站的 活动页 和 专题页的开发
[slide]
[subslide]
## 通过日常工作学到了
---
* 同事间的同力协作
* 明确工作流程 {:&.moveIn}
* 遇到问题立马解决
* 职责所在寻求帮助
* 文字泪奔~~o(>_<)o ~~
============
## 前端已经不在是一个手工的年代
---
1. 快速敏捷开发？ {:&.rollIn}
2. 前端工程化 -- 思想很重要
3. 前端自动化 -- 开发环境自动化工具
3. 前端组件化 -- 可复用,可复制。
4. 界面设计语言 -- 风格统一，认识度高。
[/subslide]
[slide]
## 如何有效传播新 (New) 技能 （get）
----
* 技能知识文档的建立 {:&.bounceIn}
* 每日 (get) 新技能 的心得记录
* 好记性不如烂笔头
* 友好的文字阅读体验
* 记录可以传播的更广
* 暂时就这些吧...
[slide]
## 技术栈
### 涉猎的语言
---
| 语言名称 | 认知度 | 认知度 |
|:-------|:------:|: ------:|
|js/nodejs | 熟悉 {:.highlight} | 喜欢 |
| less | 熟悉 | 可以 |
| sass | 熟悉 | 常用 |
| php | 熟悉 | 起家 |
| ruby | 玩过 | 喜欢 |
| python | 玩过 | 喜欢 |
| java | 玩过 | 无爱 |
| ... | ... | ... |
[slide]
## 未来能做什么
>每日码农,终有一日顶苍天！
-----
[slide]
## 码农的乐趣之一
----
<iframe data-src="http://kushagragour.in/code-blast-codemirror/demo/" src="about:blank;"></iframe>
[slide]
## 界面语言设计库
----
<button class="btn btn-default">**我是按钮**</button> <button class="btn btn-primary">.btn.btn-lg.btn-primary</button> <button class="btn btn-warning">.btn.btn-waring</button> <button class="btn btn-success">.btn.btn-success</button> <button class="btn btn-danger">.btn.btn-danger</button>
<button class="btn btn-lg btn-default">.btn.btn-lg.btn-default</button> <button class="btn btn-xs btn-success">.btn.btn-xs.btn-success</button> <button class="btn btn-sm btn-primary">.btn.btn-sm.btn-primary</button> <button class="btn btn-rounded btn-warning">.btn.btn-rounded.btn-waring</button> <button class="btn btn-danger" disabled="disabled">disabled.btn.btn-danger</button>
<button class="btn btn-success"><i class="fa fa-share mr5"></i></button>
[slide]
## icons: Font Awesome
------
*字体君*
<i class="fa fa-apple"></i>
<i class="fa fa-android"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linux"></i>
<i class="fa fa-css3"></i>
<i class="fa fa-html5"></i>
<i class="fa fa-usd"></i>
<i class="fa fa-pie-chart"></i>
<i class="fa fa-file-video-o"></i>
<i class="fa fa-cog"></i>
[slide]
## 代码格式化
### 使用 `highlightjs` 进行语法高亮
----
<div class="columns-2">
<pre><code class="javascript">(function(window, document){
var a = 1;
var test = function(){
var b = 1;
alert(b);
};
//泛数组转换为数组
function toArray(arrayLike) {
return [].slice.call(arrayLike);
}
}(window, document));
</code></pre>
<pre><code class="javascript">(function(window, document){
var a = 1;
var test = function(){
var b = 1;
alert(b);
};
//泛数组转换为数组
function toArray(arrayLike) {
return [].slice.call(arrayLike);
}
}(window, document));
</code></pre>
</div>
[slide]
[note]
## 如何做好笔记
## 使用 markdown 做笔记
### flintjs 将颠覆前端 UI 开发？
>我说它是个颠覆，并不是说这东西一出来就能在实际生产中取代 React Angular 之类的东西，
而是因为它代表了一种更先进的开发模式，而且可以预见将来不仅仅是前端开发，
而是所有的 UI 开发都会向这个模式发展。
[/note]
---
按下键盘【N】键预览笔记，
[slide data-transition="kontext"]
## 使用画笔
### 使用画笔做标记哦~你也可以随便作画啊！
---
按下键盘【P】键：按下鼠标左键，在此处乱花下看看效果。
按下键盘【B/Y/R/G/M】：更换颜色，按下【1~4】：更换粗细
按下键盘【C】键：清空画板
[slide]
## 20种转场动画随心换
----
* <a href="?transition=slide">slide</a>/<a href="?transition=slide2">slide2</a>/<a href="?transition=slide3">slide3</a>
* [newspaper](?transition=newspaper)
* [glue](?transition=glue)
* [kontext](?transition=kontext)/[vkontext](?transition=vkontext)
* [move](?transition=move)/[circle](?transition=circle)
* [horizontal](?transition=horizontal)/[horizontal3d](?transition=horizontal3d)
* [vertical3d](?transition=vertical3d)
* [zoomin](?transition=zoomin)/[zoomout](?transition=zoomout)
* [cards](?transition=cards)
* [earthquake](?transition=earthquake)/[pulse](?transition=pulse)/[stick](?transition=stick)...