最近手头的AWS SaaS项目暂停了,被调到另一个产品组帮忙, 改写界面. 准备前端用React. 我对前端的认知还停留在HTML, 完全无从下手的感觉. 虽然内心是很想在数据的技术和行业领域能深耕精进,但现实中则是哪里需要哪里去. "转行"做前端, 试试现在学习能力是长进了还是衰退了.

资料索引

先放出收集的学习资源索引,接下来几天要学习+操练了.

Web 基础

• Web 开发必备常识 https://www.youtube.com/playlist?list=PLK2w-tGRdrj7BxYFryNVGgAVD7nTzfSoA
• 你每天都在使用的HTTP协议，到底是什么鬼？ https://mp.weixin.qq.com/s/AK1Pb9rx0q5Hf8dq6HNOhw
• JavaScript https://wangdoc.com/javascript/
• Yaml基础 https://www.xncoding.com/2015/05/22/fullstack/yaml.html
• HTML, CSS, JavaScript, ES6

React 知识

• React 入门实例教程 https://www.ruanyifeng.com/blog/2015/03/react.html
• React Lifecycle http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• React 教程 菜鸟 https://www.runoob.com/react/react-tutorial.html
• React 教程 W3CSchool https://www.w3schools.com/REACT/default.asp
• React 视频教程 45集 https://scrimba.com/g/glearnreact
• React.js 小书 http://huziketang.mangojuice.top/books/react/
• React 技术栈系列教程 http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

Web 工具

• vscode getting start https://code.visualstudio.com/docs/?dv=win
• WebDev Online IDE ref1 ref2 ref3
• Chrome DevTools https://developers.google.com/web/tools/chrome-devtools
• CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html

React 库

• React UI component https://precise-ui.io/
• 拖放库 https://github.com/atlassian/react-beautiful-dnd
• 原型设计 https://github.com/React-Proto/react-proto
• Echarts的React封装 https://github.com/dawiwt/react-component-echarts

搜索过程

就像看书先看目录,我得先找些适合我学习的资料. 除了Google, GitHub外, 我发现 阮一峰的网志 真是好东西. 他写的东西对新手特别友好, 对于做前端的人, 或者说多数程序员来说, 看他的博客一点都不无聊. 特别是近两的他整理的 科技爱好者周刊, 反正我是恨不得一下看完99期.

这周刊是MarkDown格式放在GitHub上的, 所以可以拉到本地, 在 Typro 中打开repo目录, 就可以非常惬意的在本地阅读了. 因为是MarkDown全文本, 还可以全目录搜索, 爽歪歪.

工欲善其事，必先利其器。
电脑上截图方法：
1 Windows自带工具，Win+R或Win搜索框里输入 snippingtool 回车，跳出截图工具。Win10上 Win+Shift+S 开始区域截图.
2 输入法自带，切换到QQ输入法，Ctrl+Alt+Q，截图后还可简单标记。搜狐输入法也有。
3 使用截图软件，以前开机启动Hypersnap，现在基本被输入法替代。
4 自从CovID-19 疫情爆发后, 在家办公不得不登陆微信, PC上的截图只使用Alt+A. 

电脑上录屏方法：
1 Win10机器上，Win+G 调出游戏工具栏，开始录屏，默认保存在用户Video（视频）目录下，效果不错。
2 打开一个PPT (office 2013及以上)，”插入”->”屏幕录像”, 然后就是选区域开始录，可录话筒音但不同步自带音，Win+Shift+Q结束录制。PPT页面上点右键，可将它保存为mp4。
3 录屏工具，太多了，很多要钱。
Bandicam 有破解版本，或者用OSB Studio吧，开源解决方案。

佳能70D的相机出的raw格式文件是.CR2后缀的，理论上它家随相机送的光盘里有处理软件 DPP (Digital Photo Professional)， 但我那光盘都不知扔哪了。 理论上强大的Photoshop也能编辑，但是，我遇到了麻烦。试过PS CS各个版本都不行，带上了Adobe Bridge也不行，重装了各个版本的Camera Raw插件，Copy了各个版本的 Camera Raw.8bi 文件到 plug-in/formats目录下也不能解决。反正打开CR2文件就提示 “无法完成请求，因为它不是所指类型的文档”。

为什么，为什么？然后我还是用google来搜索吧， 全英文又不是看不懂。 结果，立马找到答案。简单说：

Photoshop CS系列各个版本对各家相机厂商的Raw格式支持不一样，新一些的Raw格式在老版本PS/Camera Raw插件上就不支持，所以Adobe提供了DNG Converter的解决方案（DNG就是Adobe推出的原生数字格式）。

查看相机支持的Camera Raw版本 https://helpx.adobe.com/camera-raw/using/supported-cameras.html

下载软件 http://www.adobe.com/support/downloads/product.jsp?platform=Windows&product=106

安装后运行 C:\Program Files (x86)\Adobe\Adobe DNG Converter.exe， 转换CR2为DNG格式，然后应该就可以在PS中打开了。

另外，如果只是要查看或转换raw格式为图片(jpg)，用光影魔术手挺简单。

相比于百度，我更依赖搜狗; 相比于Sogou，Google提供更好的结果。