0%

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

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

Read more »

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

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

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

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

看文档的Getting Start

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

明确新概念

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

全面看文档,找代码例子

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

Read more »

获取数据

服务器组件的asyncawait

可以在服务器组件中使用asyncawait,获取数据。

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()
// ...
}

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;
}

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

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

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

  1. 不敢表达

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

  1. 不敢最求最佳实践

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

  1. 行业见顶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

时间过得实在太快。

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

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

总结一句话,就是:想太多没用。

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。

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

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

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

Read more »

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

Read more »