天一阁
0%

Posted on In Views: Valine:

应用软件开发，不要想那么多，就是CRUD，都是凭本事吃饭不丢人。

应用软件就是围绕着MVC做好了，就可以了。叫MVC，不如叫VCM，这样更可以按照离用户远近来排序。

Read more »

Posted on Edited on In Views: Valine:

面对特别多新技术，如何能够快速学习？

首先搞清楚是什么和为什么？

要明确这个东西是干什么用的，为什么用他，他有什么好处。他做到了那些新特性，值得人们去体验和尝试。

有的时候不系统，就是没有去看全貌，没有从他背后的idea想想，他之所以存在，他的优势是什么？

看文档的Getting Start

基本上新技术都会有文档。文档中的有最简单的教程，先跑一下代码试试。这基本就能用起来了。

明确新概念

看简略文档的同时，把其中的新的、特有的概念，也梳理出来。这样就更能抓住重点。同时做好笔记。也许未来很长一段时间内，都需要不停的修补，更新这个笔记。这个笔记上，把概念用自己的理解，写下啦，把重要的API总结出来。

全面看文档，找代码例子

对于重要的框架，库，语言，工具，知识，还是要把文档过一下，同时需要多找一些例子，可以写一写。

Read more »

Posted on In Views: Valine:

获取数据

服务器组件的async 和await

可以在服务器组件中使用async 和await，获取数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  // Recommendation: handle errors
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

为了使用基于Typescript的async服务器组件，要确保使用Typescript 5.1.3以上的版本，和@types/react 18.2.8以上的版本。

服务组件函数

Next.js提供有帮助的服务端函数。

  • cookies()
  • headers()

use 在客户端组件

use is a new React function that accepts a promise conceptually similar to await. use handles the promise returned by a function in a way that is compatible with components, hooks, and Suspense. Learn more about use in the React RFC.

客户端组件，不推荐使用use封装fetch，这可能导致多次重复渲染。现在，如果需要在客户端拉数据，最好使用SWR，或React Query。

静态数据拉取

默认fetch拉取数据，并且无限期的保存在cache中。

数据刷新

刷新缓存数据，添加fetch的选项，next.revalidate

1
fetch('https://...', { next: { revalidate: 10 } })  (数据缓存10s有效)

如果需要每次fetch都重新获取数据，不使用cache，需要增加cache:'no-store'选项

1
fetch('https://...', { cache: 'no-store' })

数据拉取模式

并行拉取

利用Promise.all同时拉取多个数据。

路由中阻塞渲染

在Layout中，拉数据或导致整个页面阻塞，等到数据加载完成后，才能启动。

###不使用fetch()的数据拉取

使用第三方库拉取数据，还需要控制和刷新缓存，就需要通过默认缓存行为，或者segment缓存配置。

通过直接导出revalidate可以对缓存策略进行配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
import prisma from './lib/prisma'
 
export const revalidate = 3600 // revalidate every hour
 
async function getPosts() {
  const posts = await prisma.post.findMany()
  return posts
}
 
export default async function Page() {
  const posts = await getPosts()
  // ...
}

Posted on In Views: Valine: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- html --> 
<div class="scenes" tabindex="0">
  <div class="scene-1">
     <h2 class="scene-title">北京鸟巢</h2>
  </div>
  <div class="scene-2">
      <h2 class="scene-title">鸟巢夜景</h2>
  </div>
</div>

<div class="visualizer">
  <div class="visualizer-frame">
     <div class="visualizer-mask"></div>
   </div>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.scenes {
  position: relative;
  height: 416px;
  outline: 2px solid #ccc;
}

.scene-1,
.scene-2 {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.scene-1 {
  background-image: url(1.jpg);
}

.scene-2 {
  background-image: url(2.jpg);
  -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #fff 52.5%);
  -webkit-mask-size: 210%;
  -webkit-mask-position: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.scenes:is(:hover, :focus) .scene-2 {
  -webkit-mask-position: right;
  transition: -webkit-mask-position 2s linear;
}

.scene-title {
  position: absolute;
  max-width: 45%;
  margin: min(40px, 4vw);
  font-size: 1.25em;
}

.scene-1 .scene-title {
  top: 0;
  left: 0;
  color: #000;
  text-align: left;
}

.scene-2 .scene-title {
  top: 0;
  right: 0;
  color: #fff;
  text-align: right;
}

Posted on Edited on In Views: Valine:

程序员35岁危机真实存在吗？

程序员35岁危机真的存在么？是的，目前这种情况真实存在，裁员会首先向高龄程序员下手。如果，你遭遇35岁危机，或者为此而焦虑，那么要恭喜你，说明你目前薪资待遇非常高。这证明你是个上进的人，是个优秀的人。如果一个程序员已经35岁，仍然1,2w月薪，那就没有危机了。大不了换份工作。

造成35岁危机的原因是什么呢？

  1. 不敢表达

明明心里有更好的方案，就是不敢当众说出来，怕同事笑话、自己出丑，又怕多说多错，祸从口出。在电梯里见到领导，低头装没看见，电梯一开门从旁边就溜走了。于是渐渐的变得透明，变成了只会执行指令的工具人。

  1. 不敢最求最佳实践

程序员有时过于谦虚，妄自菲薄，总是觉得自己的东西没啥了不起，不过就是CRUD，Ctrl+CV。面向google编程而已。有这样的心态，就会有这样的语言，就会给别人留下这样的印象。长期如此，领导和同事就真认为你可有可无。

  1. 行业见顶

高薪程序员大多集中在互联网行业。流量见顶，反垄断，去金融化，确实让这个行业面临调整。敢吃肉就别怕挨打。毕竟前面几年大家也都挣了不少。

面对这样的危机怎么破呢？其实方法也简单，就是反着操作就可以了。

  1. 争取一切机会表现自己。无论是技术方案，产品方案，都要认真思考，并有理有据的大声讲出自己的观点。只有不停的让领导看到你的能力，你就是人才。人才不会受年龄限制的。

  2. 敢于对标行业内的最佳实践。找行业内或者公司内同样的业务，看看哪家做的最好，谁的解决方案性能最佳，可维护性最高，就拜谁为师，从头学到脚。先模仿，再超越。随时准备好“取而代之”。要敢于定下目标，把自己的解决方案变成行业的最佳实践。

  3. 拓宽视野，不要只局限互联网行业。未来每家公司都是互联网公司。像传统行业，如金融业，制造业都需要大量的软件开发人员。还可以看看新行业，比如新能源，智能汽车，这些朝阳行业未来都有很大发展潜力。

Posted on In Views: Valine:

我不喜欢写文章。从小就不喜欢写作文。在我认知中，总是认为耍嘴皮子的基本都是忽悠，只会咬文嚼字的都是穷酸秀才。真正的大丈夫，是要干实事的，要立马横刀，成就一番事业，而不是写写文章，每天就会讲一些玄而又玄的道理。所以，我对于写文章是非常不屑一顾的。而且提高思考深度，难道就是靠写文章？读书不行么？认真做事不行么？和人交流不行么？

这两天认真想了想写文章的目的和益处。

看别人一些写得好的文章，其实自己也佩服。好的文章总是用直白易懂的文字，讲解一个合乎逻辑和常识的道理，但是又是自己没想到的道理或方法。好文章一般会提出一个好问题，作者用他的视角、方法，有效的解决或回答了这个问题。也就是说，他说出了我说不出的话。他写出来的文字，我看到后的感觉就是：“嗯，和我想的一样，我就是这么认为的，但就是没有总结出来。”

深度思考只是一个名词，这个概念应该是说从多角度，细致的回答一个问题。没有深度思考造成的现象就是，什么事都是心里都明白，但就是嘴上说不出来，写文章就无从下笔了。

不见得写出好文章的作者水平就比读者高。但是就这篇文章的点上，可能是比读者花费的思考更多一些，得出结论更加完整一些。当然更多的文章都很水。互联网时代，靠写文章、创作内容就走上巅峰的人也不是个例了。所以写作的目的，也是多种多样的。有偏营销的，有为了塑造个人IP的，也有大量的文章，就是一些口水文，充斥着浅薄的观点和简单的情绪。

客观事实是可以观测和记录的。观点是从一定的立场或角度出发，对事物或问题所持的看法。结论是对人或事进行的判断。观点相对主观。结论相对比较理性一些，但如果推理的前提都是主观的观点，那么结论的可信度也是很存疑。

写好文章，尽量是从事实出发，提出问题。并相对系统的，对问题进行拆解和解答。最终使作者和读者都能更进一步的，获得新的认知。中这方面来说，写作是有意义的。通过写作的这个过程，可以让自己理性、全面的思考一些事情。虽然一开始写，比如我现在写的这些，都很浅薄，也不知道写什么。只要开始行动了，也算是一种进步吧。

多观察，多思考，经常判断，经常总结。一个人的对自己关注的那部分事情，就会有比别人的有洞见。内行看门道，外行看热闹。我之前的失误，太忙于实践，没有总结，没有思考，也就没有进步。看似从业时间很长，然而确是始终原地踏步。那么通过写作这种形式，可以强迫自己思考，总结。我相信通过深度思考，总结，优化自己的实践，肯定是可以获得进步的。

Posted on In Views: Valine:

真快2022年已经进入到最后一个月。今年是要载入史册的一年，今年也是我损失最大的一年。

我知道有些事情不适合我做。今年也反复痛定思痛的复盘过很多次，为什么变成现在这个样子，没有结论。唯一的可能的答案，就是我很渺小，不知道自己不知道。

未来的路，该怎么走，不能走老路了。

现在明白，所谓创业就是拿自己的钱，给资本做MVP版本的创新项目，去搏一个人生跃迁的机会。但是有太多的门道不懂。有太多的坑需要踩。

如果单纯自己摸索，效率低效，人生很快就耗光了。所以，无论如何，无论多么失意，也要振作起来。高效工作。

时间过得实在太快。

人们追求美好生活，这有错么？绝对没错的。我写的这些也都是发感慨。

以后我也多写写文字。应该写事实，写观点，然后做价值判断。实在没什么可写的，就去摘抄。我人生路上，最大的失误，就是对概念的模糊。我很多直觉是对的，但是就是懒得把模糊的那个地方，认真查资料，认真思考，然后总结下来，形成体系和框架，甚至方法论。整个人脑子里，是散点。年轻时，靠小聪明，全都能应付，随着现在越来越不给力，需要掌握的东西也越来越多，就有点吃力了。不过没关系，只要今天比明天好就可以。不要焦虑，焦虑不能解决问题，只有不断的工作，创造价值，自然就不焦虑了。

总结一句话，就是：想太多没用。

Posted on Edited on In Views: Valine:

Git是分布式版本控制系统，特别适合多人协作开发。2005年Linus用了10天时间，开发了第一版Git，用于管理linux内核的代码（from wiki）。GitHub是一个源代码托管服务平台，使用Git作为版本控制软件，2018年被微软收购。

Git内部会有一个Repository，给代码库做快照，每一次commit，都会把完整的代码库进行快照，并保存起来。

git config --global -e

git config --global user.name

git init

  • 初始化当前目录为代码库

git add .

  • 把新修改的文件放入stage area。stage area相当于一个缓冲区。

git commit [-m desc]

  • 把stage area的文件作为正式的代码提交，放到Repository中。
  • 如果不加-m，可以打开默认的编辑器，写比较长的commit描述

git status [-s]

  • 查看当前work tree，stage area，repository的情况，可以看到哪些代码做了变更，哪些准备commit
  • -s选项可以简化status的输出

git diff [--staged]

  • diff命令可以查看working dir和stage area中代码的区别
  • --staged选项，可以查看stage area和最后commit的代码的区别

git log --oneline

  • 查看代码库提交历史
  • --oneline选项可以简化输出

git show [commit id] [HEAD~n]:<filename>

  • 可以查看具体某次commit的时间，作者，修改的文件，和内容
  • 加上:<filename>可以看到在那次commit时，指定文件当时的内容

git restore

  • 可以把stage area的代码，拷贝回working dir，这样可以把代码复原
  • git restore --source=HEAD~2 <filename>可以把指定文件恢复到以前的某次提交

git rm [--cached] file

  • git rm 会删除repo、stage area，和work tree上的代码
  • 加上--cached，会保留工作区对应文件

git checkout

  • 可以切换到某一次commit
  • 可以切换到某一个tag

git tag

  • 对某一次commit打标签

git branch

  • 在当前HEAD的commit上，开分支
  • git branch -r，查看代码服务器上的分支

git switch [-C]

  • 可以切换branch
  • -C选项可以同时创建分支，并切换到此分支上
  • git switch -C local-branch origin/branch，可以切换到服务上的分支，继续开发

git merge

  • 合并分支，主要是把其他分支合并到master上
  • --abort可以中止merge，回到合并前

git clone

git fetch

  • 把remote repo的commit拉下来，需要手动merge

git pull

  • 把remote repo的commit拉下来，同时自动做merge

git push

  • 把本地的修改，push到服务器上
  • git push origin v0.1，这样可以推送tag，
  • git push origin --delete v0.1，删除服务端tag
  • git push origin --delete <branch name 删除服务端branch

Git接触也有近10年，原来一直用错了。之前都是用CVS，而且没有多人开发同一模块的情况，现在有多人开发一份代码的时候，有必要重学一遍Git。

Posted on In Views: Valine:

Docker是一种类似虚拟机的容器，但是更轻量级，更方便。

他可以创建一个独立的环境，减少环境配置的工作。

Docker是2013年首次发布，是YC孵化的项目。

Read more »

Posted on In Views: Valine:

写CSS就是在写配置文件，到处充满了经验、技巧，要求对各种属性特别熟练。甚至很多地方是利用浏览器不完善边边角角，进而实现一些酷炫功能。

Read more »