标签: 视频教程

  • React Native + Expo 入门级实战开发多平台应用 WhiteScreen:3. 深入开发,完成应用主体

    React Native + Expo 入门级实战开发多平台应用 WhiteScreen:3. 深入开发,完成应用主体

    感谢剪辑同学的努力工作,第三集上线。

    油管地址:https://youtu.be/0Ix-Y-MPQY0

    B站地址:https://www.bilibili.com/video/BV1CxnJzfEAk/

    继续分享 React Native+Expo 应用开发,帮大家补上全栈开发的最后一块拼图:移动应用开发。

    在这个系列视频里,我会用一个入门级小应用 WhiteScreen 作为范例,介绍如何使用 React Native+Expo 开发移动应用,并上传到应用商店。虽然国内市场基本被几个超级应用垄断,但是海外的广阔天地仍然大有可为。而 React Native 可以最大限度的利用我们已有的技术积累,让我们快速完成原型开发与需求验证,是全栈开发的不二之选。

    这期是第三次课,主要介绍:

    1. 使用 Zustand 管理状态,在页面间同步数据
    2. 使用原生组件进行布局
    3. 实现简单动画
    4. 实现本地数据存储于使用

    希望能给大家带来更多的可能性,在这个不那么容易的年代,让大家都有更多的选择余地与发展空间。

    希望大家留下宝贵的一键三连分享收藏,让更多的人能看到我的视频。

    有任何问题和建议,欢迎留言弹幕一起讨论。

    谢谢大家!

  • 【视频教程】React Native + Expo 入门级实战开发多平台应用 WhiteScreen:1. 移动应用开发现状+项目简介+技术栈简介

    【视频教程】React Native + Expo 入门级实战开发多平台应用 WhiteScreen:1. 移动应用开发现状+项目简介+技术栈简介

    前几天我在博客 感谢赞助商 Mizu Financial,重启我的自媒体之路 提到,因为工作调整,下一阶段我要捡起自媒体,在新的工作开始之前,提升一下自身的品牌价值。所以,我开启了新系列视频教程的录制。

    现在新视频终于上线,敬请观看。

    油管地址:https://youtu.be/YEPvihSIQkw

    B站地址:https://www.bilibili.com/video/BV1ZgHoztE4v/

    (更多…)
  • 【系列视频】天命全栈架构师 – 开篇:架构师的职责,素质,与实际案例

    【系列视频】天命全栈架构师 – 开篇:架构师的职责,素质,与实际案例

    开始新的全栈架构师系列。去年年底我做过一次调查,问大家最想看什么样的视频,进阶类的“全栈架构师”系列以一票之优成为大家最想看的系列。但是这个系列比较难做,因为到达这个阶段,问题开始多种多样,缺少共同性和普适性,也经常和业务强相关。所以我一直找不到好的切入点。这一拖就拖到 Q4,我还是努力把它做出来吧。

    预计这个系列会以月更的频率用一年多的时间更完,请大家多多支持,多多关注,我们共同进步。

    这里是第一期:

    1. 介绍架构师的职责
    2. 介绍架构师所需的素质
    3. 结合我的经历,分享架构师实际工作内容和价值
    4. 从中得到启示,要成为架构师,应该怎么做
    5. 解答直播中同学提出的问题

    希望给大家带来启发,尤其是要用架构师的标准要求自己,妥善的在公司里展现自己的能力,取得与自己实力相当的地位,不要暗自烦恼。

    有任何问题和建议,欢迎留言讨论。看完视频的同学麻烦去b站帮忙三连分享,谢谢大家。

  • 【视频教程】开发AI求职助手,一起走上全职远程之路(一)

    【视频教程】开发AI求职助手,一起走上全职远程之路(一)

    新系列简介

    开个新坑。其实类似的想法我去年就有了,但是一直没有做,除了懒之外,很大的问题就是我不会爬虫。而且在我的认识里,爬虫是一个很依赖后续维护的工作,不符合我写完能用很久的预期。不过我最近在思否看到 亮数据,似乎可以很好的弥补我的不足。于是我决定先把坑挖起来。

    本文是系列的第一集,会先介绍我的动机(找到全职远程工作);我设想的做法;介绍亮数据;分析我的代码(踩坑经验);最终初步抓取到 Vuejobs 的远程数据。

    创造新工具帮我们找到远程工作

    如何找到全职远程工作

    全职远程工作有很多好处,比如可以去泰国曼谷耍泼水节,只要安排好时间,工作娱乐两不误。很多朋友问我,怎么找到一份全职远程的工作,我有几个建议分享给大家:

    1. 不断提升自己,扩展技术栈。因为全职远程跟大公司做螺丝钉不同,更倾向于独当一面,所以你的技术栈越全面,能做的工作越多,找到全职远程工作的可能性也越大。
    2. 利用现在的工作机会,给自己打造可靠的个人品牌,形成良好的合作团队,利用好自己的工作副产品,给独立工作或者远程工作做好准备。
    3. 培养自己的自控力。远程工作比较重视结果,你越能控制自己,稳定输出,找到远程的机会也就越多。

    除去以上三点,今天要重点分享的,是如何找到尽可能多的远程工作机会;或者,要找到你需要弥补、增强的能力。这个过程,我们要学会利用好各种工具服务和提升自己。如果没有现成的工具,我们就自己开发需要的工具。

    关于亮数据(Bright data)

    我前几天在思否上看到一个小广告,叫 亮数据。看介绍,我发现它能很好的帮助我补强网络爬虫、内容抓取的能力。尤其是看其功能设计,能解决我前面说的“重维护”问题,我觉得值得一试。

    至于做什么,我觉得以前设想的“ 应用创意:AI 求职助手”很合适。只不过,我早先设想时,把简历上传、AI 分析放在第一步;现在我觉得,可以把工作机会获取、AI 分析与提示,放在第一步。即:

    1. 有一个爬虫,帮我四处收集招聘信息,尤其是全职远程
    2. AI 帮我分析 JD,并根据我的基本简历,生成求职信+针对性简历,投递
    3. AI 帮我准备面试,直至入职

    编写爬虫脚本

    想好就动手。今天的目标是做完第一步,也就是数据抓取,后面再继续做 AI 分析JD 和处理简历。我起初想用他们家的在线 IDE,尝试之后发现不太符合要求,调试起来也比较费力,遂放弃,改用亮数据浏览器(Scraping browser)。

    亮数据浏览器是他们部署在全球的服务,我们可以用 puppeteer-core 连接,然后发起请求,抓取目标网页。他们会帮我们解决一般的访问限制,甚至宣称可以通过验证码(我没试)。我觉得这样设计最大的好处是,我们可以在本地简单的开发爬虫脚本,然后直接上线使用,可以与既有的开发习惯轻松融合。

    这一步的脚本很简单,我就不详细介绍了,大家可以直接在 我的 GitHub 仓库 里查看;我的视频里也有详细讲解。这里只列举一下我踩过的坑:

    1. 连接亮数据浏览器需要使用 puppeteer-core,不能用 puppeteer,否则会超时,不知道为什么。
    2. 使用前必须付费,或者,请大家用我的 分享链接 完成注册,这样你就有 $10 的试用额度
    3. 因为 puppeteer-core 要使用 WebSocket 连接,之后每步操作也都要走 WS,所以网络就非常重要。我建议大家用云服务器来跑,我用的是博客服务器,美国 DO。
    4. 每次请求 打开一个网页,抓取一些信息。如果需要打开多个网页,就多次连接亮数据浏览器、打开页面

    配置亮数据

    调试好脚本之后,我们需要把它连接到亮数据浏览器。请大家使用我的 分享链接 完成注册,这样你就有 $10 的额度可以使用。

    登录之后,在 代理&爬虫基础设施 里找到“亮数据浏览器”,点击“开始使用”按钮,创建可用实例。

    如果参考我的脚本,可以先复制 .env.example.env,然后把用户名密码放在 BRIGHT_DATA_AUTH,把主机放在 BRIGHT_DATA_SBR_WS_ENDPOINT 即可完成配置。如果你自己编写脚本,也请注意让配置生效。

    至此,再找一台合适的服务器,就能完成抓取了。可能 Vue jobs 平日的访问量也不大,所以没有什么防护策略,至少我的简单脚本用起来没问题。如果未来遇到难抓的网站,我再尝试进阶用法。

    视频教程

    小结

    时间关系,今天先介绍第一部分,也是我最不熟悉的爬虫部分。后面会集成 AI 分析和记入数据库,那个我就比较熟了。

    对远程工作、爬虫开发、全栈开发等有兴趣、有问题的同学,欢迎留言讨论。也请大家多多支持我的文章和视频,给我动力尽快更新下一期。


    请大家使用我的分享链接注册 亮数据,这样你我都能获得 $10 的使用额度,我也会尽快更新下一篇。

  • 【视频】【身为乙方要学会培训甲方】如何理解外包开发者报价

    【视频】【身为乙方要学会培训甲方】如何理解外包开发者报价

    我把上一篇文章:如何理解开发团队的报价,怎么选择合适的开发团队 做成了视频,准备做一个系列“身为乙方要学会培训甲方”。其实上一次 私单经验分享——接洽不懂技术的甲方,用项目管理提升说服力 也能算在这个系列里。很多时候甲方的小老板未必想清楚,也未必能想清楚,这个时候,就需要我们乙方来培训甲方,才能实现双方共赢的结果。

    本次分享的内容是:如何理解外包开发者报价

    相信很多不熟悉互联网研发的朋友都会有类似的问题。我先说下结论:

    1. 这些报价或高或低,其实都合理,因为需求理解和产出物不一样。
    2. 正确的做法是明确需求,严审产出,确保自己下一步工作能顺利开展。
    3. 重点是对成本收益做到心里有数,不要追求低价,也不要觉得高价一定就能买到好东西。

    有任何问题、意见、建议,欢迎留言弹幕私信与我交流。如果你觉得视频对你有所帮助,还请留下宝贵的一键三连,并完播分享,谢谢。

  • 【视频】如何快速修 bug+如何开发低代码树状图

    【视频】如何快速修 bug+如何开发低代码树状图

    感谢 Latteat 老板上舰。

    有位同学在开发中遇到了一些问题,花费了很多时间也没能解决。其实修 bug 是有一些技巧的,通过改善内部变量的可观测性,可以很好的提升修 bug 的效率。同时,多多利用浏览器的渲染机制,减少自己手动计算的代码量,也能降低出 bug 的几率。

    希望大家都能从视频中学到东西。如果你有什么问题,欢迎在评论区提出。

    视频大纲:

    1. 开场白,介绍问题
    2. 加强可观测性,找到 bug
    3. 开发树状图:DOM 结构
    4. 开发树状图:添加样式
    5. 开发树状图:调整节点位置
    6. 总结:四个要点

    有任何问题、意见、建议,欢迎留言弹幕私信与我交流。另外,我现在还在组织模拟面试,想参加的同学,也请跟我联系。目前下周还是空缺,欢迎投稿。

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发(4):投票接口+数据处理+了解服务器端渲染

    【视频】Nuxt3+Vercel+Serverless 全栈开发(4):投票接口+数据处理+了解服务器端渲染

    课程继续。仍然结合近期的开发经验,分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容:

    • 创建 Post 接口,完成投票
    • 显示投票结果数据
    • 了解服务器端渲染

    我们先利用 Nuxt3 的路由机制,创建 /api/rate.post.ts 接口,用来处理用户投票,将数据记录进入 Redis 数据库的动作。

    为了保证数据安全,我每次会写入两次数据,一个键值是 $$$_{uid},主 key,用来日常显示;另一个键值是 {uid}_{小时},用来备份。这样假如某些情况下我们的投票系统被攻击,也能快速会滚到最近一小时的数据。并且这个备份频率也可以按需调整。

    然后我们在前端使用 $fetch 方法调用接口完成投票。并介绍了计算成绩的逻辑。

    最后介绍了 SSR 的结果,这样就能解释,为什么我们要使用 Nuxt3 内建的 useAsyncDatauseFetch 而不是平时常见的远程请求库手动请求。

    这期视频也剪得很细,还做了字幕,希望大家能学到东西。

    如果你有任何问题、建议,欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连,谢谢大家。

    另外,我也在 YouTube 上上传了一份,大家有空的话,麻烦帮忙关注下我的油管频道,感谢感谢。肉山全栈小课堂 – YouTube

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发(3):实现投票效果,使用 Redis

    【视频】Nuxt3+Vercel+Serverless 全栈开发(3):实现投票效果,使用 Redis

    课程继续。仍然结合近期的开发经验,分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容:

    • CSS 里使用 ~ 兄弟选择器实现投票效果
    • 使用 Upstash Redis
    • 使用 Nuxt3 风格的加载方法读取数据

    打分组件,我们需要用到 ~ 选择器选择某个节点后面的所有弟弟节点,配合蒙版属性 mask-* 可以实现我们要的打分效果。

    接下来我们开始接触远程数据的操作。Vercel 免费版 Redis 每天只有 1k 的请求数,不太够用;如果升级付费版,也没法针对某个部分单独升级。所以很明显,Upstash 这样专门的服务商更合适。

    Nuxt3 为实现 SSR,对远程请求进行了封装,提供 useFetchuseLazyFetchuseAsyncDatauseLazyAsyncData 这 4 个新方法。其中前两者可以视作后两者的封装。在本节课里,我们先实现了读取数据的 API,然后用 useFetch 加载数据,实现服务器端渲染。

    这期视频也剪得很细,还做了字幕,希望大家能学到东西。

    如果你有任何问题、建议,欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连,谢谢大家。

    另外,我也在 YouTube 上上传了一份,大家有空的话,麻烦帮忙关注下我的油管频道,感谢感谢。肉山全栈小课堂 – YouTube

  • 【视频】Nuxt3+Vercel+Serverless 全栈开发(2):配置 TailwindCSS,使用 grid 布局

    【视频】Nuxt3+Vercel+Serverless 全栈开发(2):配置 TailwindCSS,使用 grid 布局

    课程继续。仍然结合近期的开发经验,分享最近我比较喜欢的全栈+高效+免费+云原生技术方案。

    本次课程内容:

    • 配置 TailwindCSS
    • 使用 grid 布局构建页面

    Nuxt3 为支持 SSR,架构要复杂很多,所以大部分组件都要专门适配,比如 pinia,就有 @nuxt/pinia;vue-i18n,也有 @nuxt/i18n。同时,大部分组件的配置也都要归拢到一起,所以使用的时候一般要特意找一下,配一下。

    由于界面布局的因素,使用 flex 需要多一个容器,于是我干脆使用了 display:grid,这样代码会更简单。可能大家平时用 grid 不多,所以不妨从这个小项目入手。

    这次视频剪得比较细,字幕也做了,希望大家能学到东西。

    如果你有任何问题、建议,欢迎留言讨论。请 b 站有号的同学帮忙分享完播一键三连,谢谢大家。

    另外,我也在 YouTube 上上传了一份,大家有空的话,麻烦帮忙关注下我的油管频道,感谢感谢。肉山全栈小课堂 – YouTube