广州蓝景分享：想要成为一名合格的前端程序员，应该如何学习呢？

Posted 2023-03-29 广州蓝景

其实学习前端无非就两种方法：自学和报班

自学你可能会面临的问题：

不知道从哪里开始学习？
应该怎么学？是看视频呢？还是看书呢？
学习过程中遇到的难题该怎么解决？
学习时间多长呢？

以上的问题相信大家在自学时都会遇到（甚至还有更多的问题还没完全罗列出来）

小编认为大家在学习前必须先要有一套前端学习路径以及好的学习方法，盲目的学习只会更加迷茫。想要一套完整的学习路径、学习方法可以找我们专业老师为大家获取，老师也会帮大家分析有难题应该如何解决等一系列问题。小编在这就不详细展开来说；

自学前端难不难？这个问题是几乎计划自学前端的人都想要知道的；

有人说难，有人说不难，其实这个问题就像：自学能考得上“985、 211”学院吗？显然这是极少数人能做到的事，能做到的都是自制力非常好的人，而大部分的人都坚持不下去。因此自学很考验你自身的“自制力”想通过自学前端来达到就业水平的话，起码要9个月到1年，而且是“每天都学、每天都练”，不是一件简单的事情。99%的人都觉得不太有效果。学习原本就是反人性的事情，90%的情况下，缺乏自律是正常的，尤其是学习IT编程这样的硬技术，就算高度自律去学习，那么时间相对而言，还是比培训要长起码一倍（报班培训需要大致5个月时间）。

那么想要成为一个合格的前端程序员需要具备什么条件呢？

有人回答：会技术就行，会技术+做人就行。NO！NO！NO！

虽说技术是很重要，也是必不可少的，但是一名合格的前端程序员除了技术以外，还需要具备你要有沟通能力、项目开发经验，以及一些在职场上需要承担责任的心和不推卸责任。

咱们就来说说合格的前端程序员主要具备的以下3点吧！

技术
沟通能力
项目开发经验

技术

小编在这里也不详细展开说了，上面有提到咱们的“蓝景电子书”只要按照里面的内容学到熟练，那么你的技术肯定是OK的。想要“蓝景电子书”的学习资料可以在评论区留言！

沟通能力

此时，应该很多人会说：不就是和同事说说话嘛，这有什么难得。如果你是这么想的话那就错了。

小编这里说的沟通能力，是指有效的工作沟通能力：在做一个项目的时候不是只有一个人在做的，而是一个团队，那么这个团队里每个人都有负责他自己要做的东西，假如你是前端，你要和后端沟通、和产品经理沟通、和测试沟通、和设计沟通。 如果沟通不顺畅或未及时沟通到位，会直接影响到项目的进度，上线的时间等。

另外沟通能力也会影响到 您在面试时给面试官的印象（印象不好自然就没有offer）

也会影响提升阶级，通常在公司里程序员都会分一个等级制度、晋升制度。想要做到中级、资深甚至首席程序员，那么你的沟通表达能力也是很重要的一点。

项目开发经验

因为项目开发经验更能看得出来你的技术是否真实，有很多应届生在项目经验那栏是空白的，或是一些很基础的系统项目，这样的简历一般面试官在网上看到你的简历就直接刷掉，因此你就没有了面试通知。

如果你有项目开发，那么在面试时面试官一般都会问你，例如：

在这个项目中遇到了什么难点？
面对不懂得问题怎么去解决它？
从项目开发中你学会了什么？
这样才能判断你是否有做过还是随便填上去的。此外企业招聘是想找到一个能上岗后快速开发项目的小伙，他们并没有大量的时间给大家去摸索和探讨。因此你的项目开发经验很重要。

所以，屏幕前的你知道前端该怎么学习了吗？还不懂得的可以在评论区留言哟！

广州蓝景分享—程序员必备的3个JavaScript插件,让你的视频更实用

今天，广州蓝景小编跟大家分享一些干货，程序员必备的3个JavaScript插件,让你的视频更实用。
下面就从这篇技术文章开始，我倾向于利用以图形交换格式 (GIF) 格式编码的屏幕截图，以尽可能减少额外的文本描述块。例如，在更倾向于 Web 开发内容的文章中，例如：

在这种情况下，我总是发现嵌入动画 GIF 来演示我创建的开源工具的任何用法是有益的：

鉴于 Microsoft Powerpoint 的内置屏幕录制功能很容易访问，虽然，可以轻松完成自己的屏幕录制以输出屏幕截图，但我觉得更有益的探索领域将是 - 易于访问转换视频的工具 将屏幕截图（.mp4、.avi 等）转换为 .GIF 图像文件。

— 注意：按照惯例，如果要渲染动画短片（≤ 30 秒），则 GIF 文件更合适。

使用 GIFEncoder.js 将视频构建到 GIF Maker

为了构建浏览器实用程序，如下所示：

这 3 个 JavaScript 插件是必需的：

GIFEncoder.js
LZWEncoder.js
NeuQuant.js
仅供参考：这些插件最初是由 GitHub 用户 Kevin Kwok（创建者）从 GitHub repo jsgif 中检索到的。

视频到 GIF 转换概述

先决条件：包含在上述3个文件中+ b64.js如下：

<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>

技术实施——总共 4 个步骤

步骤（1）：上传视频片段（≤30秒）

因此，在 HTML 代码中，包含一个简单的用户输入界面：

将事件处理程序（onchange）标记到上面并继续在 JavaScript 中初始化 FileReader 实例：

inputVideoClipFile.onchange = function(uploadFle) 
  let file = inputVideoClipFile.files[0];
let fileName=file.name;
  let fileSize=(file.size/1024).toFixed(2);
  let fileType=file.type;
let fileredr = new FileReader();
fileredr.onload = function (fle) 
    var b64Str=fle.target.result;
; // end file-reader onload
  fileredr.readAsDataURL(file);
;

请注意，新的 FileReader() 实例调用 readAsDataURL，因此分配给 b64Str 的视频文件内容被读取为 Base64 字符串。

从文件对象中检索视频文件的信息以供稍后显示。

步骤（2）：处理视频二进制数据并提取帧，有两个主要部分需要考虑：

Part I. 通过创建 DOM 元素并在 JavaScript 中分配相应的属性来预览视频内容以供显示.

// rendered as <video></video> in HTML code
var videoObj = document.createElement('video');
var displayedHeight=500;
if(videoObj.canPlayType(fileType)) 
  videoObj.setAttribute('id','inputVideo');
  videoObj.setAttribute('src', b64Str);
  videoObj.setAttribute('height', displayedHeight);

注意b64Str是前面步骤中FileReader()读取的视频文件数据。

第二部分，帧提取——每个视频帧都指的是剪辑在唯一时间戳的图像快照。

由于 GIF 文件是通过合并一组连续的图像创建的，因此，对于视频的每一次时间图形更新，都需要提取一个嵌入了图像数据的帧，用于后续的 GIF 创建过程。

虽然不能直接从 DOM 元素 中提取每个视频帧所需的图像数据，但可以将 中的预览内容渲染到 元素上 帧图像数据提取。

接下来，在 JavaScript 中创建一个 元素并为其分配相应的属性（类似于 ）：

var vidHeight=videoObj.videoHeight;
var vidWidth=videoObj.videoWidth;
var bitmap = document.createElement('canvas');
bitmap.setAttribute('id', 'bitmap');
bitmap.setAttribute('width', vidWidth);
bitmap.setAttribute('height', vidHeight);

请注意，vidWidth 和 vidHeight 是从 检索的。（这些是剪辑的原始尺寸。）

接下来的几行代码基于标记到每个元素的 ‘id’ 属性来引用 和 ：

const inputVideo=document.getElementById('inputVideo');
const bitmapCanvas=document.getElementById('bitmap');
const bitmapCtx = bitmapCanvas.getContext('2d');
inputVideo.muted = true;
inputVideo.loop = false;
inputVideo.autoplay=true;
const background = () => 
  bitmapCtx.fillStyle = '#FFFFFF';
  bitmapCtx.fillRect(0, 0, vidWidth, vidHeight);
;

由于视频设置为自动播放，当播放事件被发出时，这会触发 background() 的执行，它不仅将 GIF 背景填充为白色，而且还设置了绘制到 canvas 元素上的每一帧的尺寸：

const step = async() => 
  let bgStatus=await background();
  await new Promise(resolve => 
    bitmapCtx.drawImage(inputVideo, 0, 0, vidWidth, vidHeight);
    frameB64Str = bitmapCanvas.toDataURL();
    resolve();
  );
  window.requestAnimationFrame(step);
;
inputVideo.addEventListener('play', () => 
  step();
  window.requestAnimationFrame(step);
);

window.requestAnimationFrame(step) 接受一个回调函数（即step()）来处理每一帧的图像数据。

bitmapCtx.drawImage() 继续将每个图像快照渲染到画布上，以便 bitmapCanvas.toDataURL() 返回每个快照的 base64 编码图像。

步骤（3）：依次合并所有图像快照

最后实现了JS插件GIFEncoder.js。使用与上面相同的代码片段，以下粗体代码行指的是 GIFEncoder 编码器捕获嵌入在 中的每个数据帧的实例。

const encoder = new GIFEncoder(vidWidth, vidHeight);
encoder.setRepeat(0);
encoder.setDelay(500);
const step = async() => 
  let bgStatus=await background();
  await new Promise(resolve => 
    bitmapCtx.drawImage(inputVideo, 0, 0, vidWidth, vidHeight);
    frameB64Str = bitmapCanvas.toDataURL();
    encoder.addFrame(bitmapCtx);
    resolve();
  );
  window.requestAnimationFrame(step);
;
inputVideo.addEventListener('play', () => 
  encoder.start();
  step();
  window.requestAnimationFrame(step);
);

当上传的视频最终播放完整时长时，应在 GIFEncoder 调用方法 finish() 的地方发出结束事件：

inputVideo.addEventListener('ended', () => 
  encoder.finish();
);

步骤 (4)：通过 GIFEncoder 创建 GIF

要从编码器中提取所有帧的合并版本（即 GIF 输出），需要实现以下 JavaScript 代码片段：

var fileType='image/gif';
var readableStream=encoder.stream();
var binary_gif=readableStream.getData();
var b64Str='data:'+fileType+';base64,'+encode64(binary_gif);

encode64() 是 b64.js 中的一种方法，用于将 GIFEncoder 捕获的流数据转换为 Base64 格式。

b64Str 通过合并 GIFEncoder 中存在的所有帧来引用为 GIF 文件编码的数据。因此，在 HTML 代码中，继续包含： 以预览输出 GIF 文件。

最后创建一个GIF文件的下载链接，如下：

let dwnlnk = document.createElement('a');
dwnlnk.download = fileName;
dwnlnk.innerHTML = ` <small>Save</small>`;
dwnlnk.className = 'btn btn-outline-dark';
dwnlnk.href = b64Str;

总结

虽然，有进一步探索 GIFEncoder.js 中输出 GIF 文件的可定制调整的空间，但本文介绍的是一种基本的轻量级方法，该方法可以完全在浏览器中和纯客户端将视频剪辑转换为 GIF 文件。

最后：文章内容转载其他平台。