如何快速在团队内做一次技术分享?

sxkk20081年前77

为了能完成这个目标,团队内部分享就成了这个目标的关键结果,那么如何在短时间内完成这项任务呢?下面分享下我的技巧。

明确主题

首先我们要明确公司需要什么?我们不能随便搞一个知识点去分享,这样没有人愿意去听,比如公司接下来可能会上前端监控系统,那么我们可以在先做一个技术调研,出一个《前端监控体系搭建要点》,比如公司接下来需要做小程序,那么我们可以出一个《小程序跨端实现方案探索》等,如果没有什么新的功能要开发,那么我们也可以谈一谈《前端性能优化》、《Typescript 快速上手》,总之要明确一个切合实际的目标。

巧用搜索引擎

确定好主题后,我们可以在技术社区搜索相关的技术文章,比如掘金、知乎、思否、微信公众号等, 比如直接在掘金搜索“性能优化” 然后按热度排序,就可以找到不错的文章。

掘金搜索性能优化

接下来我们需要根据这些文章中的内容制作 PPT

使用 markdown 来制作 PPT

程序员做 PPT 可能会浪费不少时间,所以我选择是 markdown 来制作 PPT,这里我分享 2 个工具

Marp for VS Code vscode 插件 Marp for VS Code 只用关注内容,简单分隔一下,就可以制作 PPT,看下 marp 官方文档可以很快学会用法,看看 jeremyxu 写的效果,项目地址:kubernetes 分享 PPT 源文件

Marp kubernetes 分享 PPT

二: Slidev 也可以让我们用 Markdown 写 PPT 的工具库

官网地址:https://sli.dev, 基于 Node.js、Vue.js 开发,而且它可以支持各种好看的主题、代码高亮、公式、流程图、自定义的网页交互组件,还可以方便地导出成 PDF 或者直接部署成一个网页使用。

  • 演讲者头像

当然还有很多酷炫的功能,比如说,我们在讲 PPT 的时候,可能想同时自己也出镜,Slidev 也可以支持。

演讲者头像

  • 演讲录制

Slidev 还支持演讲录制功能,因为它背后集成了 WebRTC 和 RecordRTC 的 API,

演讲录制

前言相信很多小伙伴跟我一样,是一位奋斗在一线的业务开发,每天有做不完的任务,还有项目经理在你耳边催你,“这个功能今天能完成吗?”其实作为一名前端工程师,任务就是完成 Leader 的任务, 但公司实行...

将 React 应用迁移至 Vite

sxkk20081年前88
将 React 应用迁移至 Vite
前言当下,在项目开发的过程中,对于大多数人来说,会使用 create react app 来创建 react 应用,它开箱即用,零配置,但随着项目中代码量的增加,你的项目构建时间也会随之增加,开发服务...

实现一个 Code Pen:(三)10 行代码实现代码格式化

sxkk20081年前78
在上文中,我们使用 monaco-editor 结合 Next.js,打造了编辑器的功能,在本文中,我们将继续优化 monaco-editor, 使它拥有代码格式化的功能。prettier 在浏览器使...

实现一个 Code Pen:(二)在 Next.js 中使用 Monaco Editor

sxkk20081年前93
Monaco Editor 是 VS Code 中使用的开源代码编辑器, 拥有代码高亮和代码自动补全的功能,Monaco Editor 支持的语言有很多,所以使用的时候不需要将全部语言都支持,我们只需...

实现一个 Code Pen:(一)项目初始化

sxkk20081年前111
前言前段时间掘金上线了一个新功能 Code pen,可以在线写代码,浏览器就可以运行预览,在文章中就可以插入代码片段,对 web 开发者大有裨益,非常方便读者对文章的理解,笔者对这种在线实时编辑的功能...

实现一个 Code Pen:(六)云函数生成网页缩略图

sxkk20081年前94

有个问题就是,右上角的“保存”无法显示,查了下github chrome-aws-lambda 不包含任何字体,所以要支持中文,先要加载中文字体

readme 中有 demo

await chromium.font('/var/task/fonts/NotoColorEmoji.ttf" alt="实现一个 Code Pen:(六)云函数生成网页缩略图">
前言在前面的文章中,我们已经实现了编辑器的功能,并且数据可以保存到云数据库,接下来我们需要生成缩略图的功能,目前掘金的的 code pen 还没有缩略图的功能,这是否是一个挑战呢?缩略图生成方法生成缩...

微信排版工具新选择

sxkk20081年前72

实现一个编辑器

为了弥补 markdown 的缺点,我使用 mdx 来实现编辑器的功能, mdx 也就是 markdown 语法和 JSX 的结合,关于 MDX 的优势大家可以看下这篇文章

其实最简易的 demo 也是来自于官网的 playground

MDX playground

MDX Editor 一个好用的排版编辑器前言哈喽,大家好,我是Ai知识分享,去年年底,我开通了微信公众号“JS 酷”,也开始陆陆续续开始写文章, 发到微信公众号,作为一名程序员,我酷爱 Markdo...

SVG + 动画 实现一个有个性的404页面

sxkk20081年前81
前言我们的博客网站有时候 404 页面比较普通,我们可以通过 SVG 加动画来实现一个有个性的页面效果代码片段实现在undraw网站下载喜欢的插画,下载格式为 svg将 svg 转为 HTML 网页观...

在 Webpack 5 中开启懒编译(Lazy Compilation)

sxkk20081年前66
在 webpack 5 中推出了 experiments 配置,目的是为了给用户赋能去开启并试用一些实验的特性。由于实验特性具有相对 宽松的语义版本,可能会有重大的变更,所以你需要将 webpack...

使用 Prism.js 对代码进行语法高亮

sxkk20081年前80
前言通常我们在开发博客网站或者技术社区(类似掘金)这类网站的时候,就会有需求“对代码进行语法高亮”,我在开发 mdx editor(微信排版编辑器) 的时候,也有这个功能。社区对应语法高亮比较流行的有...