之前听低代码平台感觉就是个噱头,不过最近长期看的俩大佬的博客公众号 又开始鼓吹”不会前端是否能完成开发”,然后给出挺肯定的回答…感觉有点慌,不会前端工作被一群刚毕业的内卷了吧?感觉去找了相关资料看了一早上.尤其是 webflow.com 还专门注册了帐号是把 demo 走了一遍….

省时间,先说我现在的理解:这个 no_code 更大程度使用场景受限制,可能适合那种表格,工作流那种工作.有可能还会对不怎么喜欢写样式的前端有帮助作用.

证据一 v2 网友

看了一圈 v2 有用过这个的程序员们的言论,他们有自己用过,或在开发 nocode lowCode 平台的.总结基本就是场景受限.这种东西在 2000 年左右就有类似的东西,只是技术进步给换汤不换药的升级了一下.

证据二 自己体验 webflow.com

用了一下网友说的比较热门的webflow ,感觉这个主要是在 ui 静态页面上可以通过脱脱拽拽实现比较炫的效果.这个感觉反而是个好事,如果你觉得自己去写样式不如化时间去学习这些工具用法的前端. 但是依照我体验的 webflow 的感受,感觉学习还挺无聊的,稍微好看点的就要买这个模板,价格不菲,而且导出功能也要收费,感觉导出的还是 html,css 这种,不是 react 等框架………感觉放心了不少……哈哈……

证据三 自己看的公众号文章

看的比如 如何一行代码都不写，就做出网站和应用？这个虽然作者觉得 low code 挺有前途,但是他选的精评论里也说了(有一个还是我评论的,哈哈):

> 老师，我是做市场的，表示深受其益。我司官网(framely.io)就是用 webflow 做的。在此之前试过阿里的 Landing，以及网上大家都比较推荐的 WIX。虽然都是 no code，比较不同的是，webflow 更像是在用 UI 做开发。稍微总结一下就是：
1、需要先确定网站的框架，页面布局，内容及展示方式；
2、抽象出可以复用的的模块；
3、定义并规范命名（即自己能辨识的，有效展示各模块及关系的）；
4、复用+ customize。

> webflow 无论是框架及样式都能复用，图形和动效可以直接定义在里面直接适配，还有内容系统（相当于内容数据库）可以获取动态内容（即定义好前端样式，以后加内容就直接加在内容系统中，不用动前端，发布也可以只发布内容系统的）。
过去是我来做官网内容及整体框架页面规划，然后设计同学设计，前端同学实现。这里就经常出现问题，比如设计的样式前端同学无法实现、想要的动效前端同学不能以较高效的方式实现导致不得不撤掉、别的官网借鉴的效果做不出来。我和设计同学的沟通比较顺利，但沟通是需要“时间+理解+优化+复盘”的。现在等于是我一个人就可以完成所有的，还能适配各个端，还比较少有 bug。

给您推荐一下，您要是没有时间试用，看了评论也能了解。个人感觉 no code 不仅仅是拖拽，应该是指用大众熟知的语言（比如 UI/图形语言）做开发，不变的是思维或思考方式。

就比如用 uniapp 这用 AST 写小程序,flutter 写手机应用的一样,是你在懂原生的基础上可能有 1+1 >2 的左右,要不会有很多坑.

最近看的文章 主要是讲 现在各家厂商推广自己的 app ,淘宝的 web 端基本都没法用了,来逼着你用 app .他们的目的就是收集你的信息,然后通过算法给你推荐,逼着你买买买…… 或者看网页给你推送一大堆信息……现在的人们更像是活在地球村.因为全世界每天都可以关注同相同热点…….大牌明星的八卦,某某政治家的活动,我们的得花多少时间才能挣”1 爽”的钱,诸如此类,最近我最爱看的 B 站也变了,开始给我推一堆房子的…….

算法推送糟透了；让我们用 RSS feed 代替它。

是的，我是说我们应该带回一个已经过时且未得到充分利用的协议，以至于 Google 在 2013 年关闭了它自己的服务。我是说我们迫切需要切换到一个不太优雅，不太方便的系统，因为社交媒体正在毒害我们的生活。（是的，这在很大程度上是过分简化，但这并不是说人们在这里真的意见分歧……）

算法没有任何帮助，因为我之前曾在 Netflix 上闲逛过。令人震惊的是，人们已经看到 Facebook，Youtube 和 Twitter 等网站上的算法以奇怪且有害的方式推波助澜。他们希望您不断点击并不断获得广告，从而不断将最偏激的言论推送给你，我们需要勇敢的远离这些消息。由于社交媒体算法完全接管了我们的国家话语，整个美国的选举过程都被颠覆了。还记得吗? 是的，这太可怕了。

这些东西在 2010 年代得到了很好的记录，在这里需要重复：与十年前相比，世界变得更加分裂，更加愤怒。如果没有整个美国人口的激增，2021 年 1 月 6 日的事件将永远不会发生，而激进化很大程度上是由社交网络不负责任地向我们提供了我们渴望为愤怒的回声室提供的所有内容。

如此之多的愤怒，如此之多的分歧，如此之多的白痴虚假新闻。

我说，让这些东西见鬼去吧；我不跟你们玩了。

使用 RSS feed

首先，设置取消您的社交媒体自动推送。我使用扩展名Undistracted，您也应该使用。隐藏 Facebook 新闻提要。隐藏 Twitter 提要。隐藏 YouTube 评论。

现在，您可以访问社交媒体，而不会被算法左右。接下来，是时候用那个曾经差点消失的技术了：_RSS Feeds_。

这是一个优雅的解决方案，可让您轻松应对。RSS 推送很笨拙，但是几乎每个站点都使用它们。您将该 RSS 提要 URL 插入阅读器网站 / 应用程序和 bam。现在，您将从该推送中获取的所有文章都放入了您的笔记中。但是只有您决定包括的内容，并且只能按时间顺序。

那里有很多RSS feed 阅读器。我自己使用Feedly .

您可以查看头条新闻，了解想要阅读的内容和想要忽略的内容；您可以保存文章以供以后使用，并将其分类为不同的类别；您终于可以将漫画带回到您的生活中。没有算法可以决定您最想看的是什么。没有数据收集可挖掘您的活动以建立广告资料。这只是您添加的站点中所有文章的列表。

一个论点是，_您可以使用 RSS 提要太容易地创建回声室_。尤其对于新闻而言，仅依赖特定数量的站点只会使您对事件有一定的了解。可以通过在 Feed 中获得更多的网站来解决这一问题。但更重要的是…… 您认为社交媒体算法不会创建回声室吗？老实说，我认为情况可能更糟！

在社交媒体上，三姑六婆关于导致 5G 致癌的无厘头的转发，与在亚特兰大进行的一项实验性城市园艺计划的深入探访一样，都会一起推送给你，您滚动了一次却再也看不到。这两件事之一获得点击，而这两件事之一为社交媒体创造了很多收入。不是都市农业。但是，使用 RSS 阅读器，您可以将该文章添加到 “稍后阅读” 列表中，有空的时候再回到它，而且笨拙，您甚至不必一眼就看到三姑六婆的消息提醒。

让我们抛弃算法。让我们重新控制自己的互联网生活。RSS 提要在 2010 年代可能已经过时，但它们是 2020 年代的光明前景。

原文

useDarkMode hook :

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
26
27
28

type DarkModeState = "dark" | "light";
type SetDarkModeState = React.Dispatch<React.SetStateAction<DarkModeState>>;
function useDarkMode() {
  const preferDarkQuery = "(prefers-color-scheme: dark)";
  const [mode, setMode] = React.useState<DarkModeState>(() => {
    const lsVal = window.localStorage.getItem("colorMode");

    if (lsVal) {
      return lsVal === "dark" ? "dark" : "light";
    } else {
      return window.matchMedia(preferDarkQuery).matches ? "dark" : "light";
    }
  });
  React.useEffect(() => {
    const mediaQuery = window.matchMedia(preferDarkQuery);
    const handleChange = () => {
      setMode(mediaQuery.matches ? "dark" : "light");
    };
    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);
  React.useEffect(() => {
    window.localStorage.setItem("colorMode", mode);
  }, [mode]);
  // we're doing it this way instead of as an effect so we only
  // set the localStorage value if they explicitly change the default
  return [mode, setMode] as const;
}

A closer look

I want to call out a few things about the hook itself that made things work well from a TypeScript perspective. First, let’s clear out all the extra stuff and just look at the important bits. We’ll even clear out the TypeScript and add it iteratively:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function useDarkMode() {
  const [mode, setMode] = React.useState(() => {
    // ...
    return "light";
  });
  // ...
  return [mode, setMode];
}
function App() {
  const [mode, setMode] = useDarkMode();
  return (
    <button onClick={() => setMode(mode === "light" ? "dark" : "light")}>
      Toggle from {mode}
    </button>
  );
}

From the get-go, we’ve got an error when calling setMode:

This expression is not callable.
Not all constituents of type ‘string | React.Dispatch<SetStateAction>’ are callable.
Type ‘string’ has no call signatures.(2349)
You can read each addition of indentation as “because”, so let’s read that again:

这个表达式不是可被调用的. Because not all constituents of type ‘string | React.Dispatch<SetStateAction>’ are callable. 因为推断出有俩值,其中是 string 不可调用(2349)

我们肉眼可见 setMode 是个函数,为啥 ts 推断它是两种类型?

我们换种写法:

1
2
3

const array = useDarkMode();
const mode = array[0];
const setMode = array[1];

在这种情形下 array 有以下推断:

Array<string | React.Dispatch<React.SetStateAction<string>>>

TypeScript 自己推断不出来数组的先后顺序,它只知道数组返回了个 string 和 Dispatch 类型

But React’s useState hook manages to ensure when we extract values out of it. Let’s take a quick look at their type definition for useState:

1
2
3

function useState<S>(
  initialState: S | (() => S)
): [S, Dispatch<SetStateAction<S>>];

Ah, so they have a return type that is an array with explicit types. So rather than an array of elements that can be one of two types, it’s explicitly an array with two elements where the first is the type of state and the second is a Dispatch SetStateAction for that type of state.

我们需要告诉 TypeScript 我们确保数组不会改变.

1
2
3
4

function useDarkMode(): [string, React.Dispatch<React.SetStateAction<string>>] {
  // ...
  return [mode, setMode];
}

Or we could make a specific type for a variable:

1
2
3
4
5
6
7
8

function useDarkMode() {
  // ...
  const returnValue: [string, React.Dispatch<React.SetStateAction<string>>] = [
    mode,
    setMode,
  ];
  return returnValue;
}

更好的方式 是 Typescript 内建了这个能力,因为 typescript 已经知道了 array 的类型.所以我们只需要告诉 ts “返回数据是不变的” 我们指定返回值为 const

1
2
3
4

function useDarkMode() {
  // ...
  return [mode, setMode] as const;
}

这样我们就不需要 ts 自己判断返回类型

And we can take it a step further because with our Dark Mode functionality, the string can be either dark or light so we can do better than TypeScript’s inference and pass the possible values explicitly:

1
2
3
4
5
6
7
8

function useDarkMode() {
  const [mode, setMode] = React.useState<"dark" | "light">(() => {
    // ...
    return "light";
  });
  // ...
  return [mode, setMode] as const;
}

This will help us when we call setMode to ensure we not only call it with a string, but the right type of string. I also created type aliases for this and the dispatch function to make the prop types easier as I pass these values around my app.

参考

ref1

chart 之类如果用别人的库 其实 最终展示的 是 svg .然后 d3Js 是一个主要基于 svg 的一个 dom 操作的库. 最近学习了一下. 因为有些需要可能:

• 用别人库可能杀鸡用牛刀
• 定制需求
• 如果老板想要一些炫的动效,或者一些有交互的组件, 比如一个行驶的小车.这些其实用 d3 很方便.
• 自己想折腾一下吧……..多了解一些

d3 vs threeJs

区别

• d3 主要是基于 svg 的 ,如果是操作几个 dom,形状这个合适
• threejs 主要是基于 webgl ,canval 的库,3d 效果的复杂的图像需求

svg

svg 学习可以看看 mdn 的官网 .

主要的元素

• path
• line
• rect
• text
  

d3 学习

我主要是看了一堆 frontendMaster 的课程.

个人感觉笔记难理解的是 d3 的链式调用吧.一开始 .主要就是有一些是找到 dom ,然后可以之间套用方法.

• .call 方法 参考stackoverflow d3 call function
  .call()是 D3 API 函数，不要与Function.prototype.call（） 混淆

  selection.call(function, arguments…)
  完全调用一次指定的函数，并将此选择与任何可选参数一起传递。返回此选择。这等效于手动调用功能，但有助于方法链接。例如，要在可重用函数中设置几种样式：
  现在说：
  d3.selectAll("div").call(name, "John", "Snow");
  这大致相当于：
  name(d3.selectAll("div"), "John", "Snow");
  唯一的区别是 selection.call 总是返回选择内容，而不是被调用函数 name 的返回值。

参考资料

• https://www.cassie.codes/posts/swipey-image-grids/ svg 的动效
• https://wattenberger.com/blog/react-and-d3 感觉挺炫的,不过感觉有点代码不全

感觉网上很少有关程序员技术路线的职业规划,然后最近看了一篇,大概翻译了一下 原文https://career-ladders.dev/engineering/

职业规划

我为我所在的的团队使用的职业规划的一个样例，对任何人开源。

一级工程师#

• 完成明确定义的任务，并在有阻塞的情况下进行沟通
• 努力学习相关技术和系统，积极维护和扩展系统
• 虚心地与内部和外部沟通
• 通过完成新功能、重构现有代码或更新系统来贴现自己的价值，从而使其他开发人员能够取得成功
• 帮助调试技术问题。提交问题，以便我们能够记录和改进我们的服务
• 工作经验：无工作经验。

二级工程师#

• 致力于推动更大特性的工程创新，同时注意不要在过程中产生任务延期
• 先发制人的扫描会导致积压。行动包括但不限于：熟悉系统中的疼痛点，应用相关标签和分类，通过拉请求或其他方式关闭它们
• 体谅团队中的其他成员，在工作中尽量支持他人
• 能够熟练地评价同行的工作。这包括要有礼貌，周到，周到，灵活，而不是迂腐
• 倾听他人的优先事项和关切，承认不同的观点。预测他人的反应
• 经验：通常需要至少 2 年的专业经验。

高级工程师

在这一点上，一个人正在体现他作为个人贡献者的效率。

• 定义并执行针对特定功能或内部系统维护 / 升级的执行计划
• 积极参与工程工作，帮助简化我们产品的经验
• 通过结对编程、回顾和提供指导来帮助支持同事的工作
• 根据需要调整优先顺序
• 努力减少任务延期，同时与队友就任何更大的重构进行沟通
• 努力理解团队正在开发的特性的目的，并帮助向团队成员传达这一目的。在期望不明确的时候提出澄清问题
• 当任务很大时，将工作范围缩小到更小的、可操作的部分
• 展示对他人想法的开放性。适应他们的沟通风格，以最有效的沟通。有效和准确地分享想法和合作努力的成果
• 以预期工作范围所需的规模和维护类型的方式编写代码。在创建和审查拉取请求时考虑易读性
• 经验：通常需要至少 5 年的专业经验。

staff工程师#

在这一点上，一个人的大部分时间都花在提升自己的技能以帮助他人上。

• 积极参与会议，并在必要时创建跨团队协作以实现业务目标
• 创建和维护内部文档，以了解他们正在工作的系统的目的和结构。仔细记录不清楚的过程
• 教导同龄人如何建立系统和驱动特性和系统改进的执行计划
• 协调整个团队的工作，而不是在单打独斗。确保人们在不同的项目中感到价值感，并且他们的声音被听到
• 通过工程上的努力使团队快速前进
• 积极主动地沟通问题并做必要的取舍。拥有问题的主导权.
• 管理较大的重构和 / 或系统升级,可以帮助其他人进行相同的工作或参与。能够估计工作范围，当这些估计不准确时，与诸如产品管理之类的利益相关者协调，以解决风险，并获得主导权
• 经验：通常需要至少 8 年的专业经验。

首席工程师#

在这一点上，一个是帮助别人做到最好，放弃自我成就大我?

• 开发经过验证的系统。在整个团队中推广这些系统和方法，以便其他人可以从中学习和改进
• 深厚的行业知识和对技术领域的认识。将这一分析适当地纳入战略
• 不仅仅只是领导，要有提供指导和前瞻性地愿景
• 指导和积极推动技术技能的直接或扩展团队考虑到他们的职业阶段和个人轨迹
• 通过围绕共同的需求或客户利益与他人合作来消除障碍.创建跨组织边界的策略，以实现业务目标或扩大影响力
• 可以预见问题和其影响，他们的想法将对其他人产生影响，并追求互利的战略
• 除了参加会议，深思熟虑地创建和组织有效的会议
• 为一系列工作设定清晰而富有挑战性的目标，并以热情和激情追求它们。理解业务目标，并将其整合到这个工作体系中。严格审查多个计划，并根据需要进行调整
• 通过扩展 / 指导团队来推动可衡量的增长，积极影响工程路线图，管理关键指标，创建研究和 / 或项目
• 与其他团队合作，提高我们内部工具的有效性
• 预测他们周围人的需求。表现出关心他的队友,让其感觉可以在工作时间与他们取得联系。有主动性地写过程文档
• 经验：通常需要至少 10 年的专业经验。

杰出工程师#

• 通过工程任务、开放源码工作或者为产品特性提供支持，确定整个行业范围内缺失的功能，实现那些可以大规模释放客户增长的潜力的功能 .
• 了解他们的活动对公司 OKRs 的影响，并且主动地 根据战略精确地选择需要做什么.
• 在内部和外部积极给予帮助，确保他们的工作被看到。扩展他们的社会资本来帮助其他人
• 在合作时，尤其是在棘手的情况下，要仔细考虑沟通的方式
• 致力于系统架构，思考问题，预测未来的使用情况。构建可扩展到适当数量的系统
• 当出现问题时，有效沟通，理解任何提议的变更的风险和影响。当别人在其他优先事项之外做出权衡时，要善于倾听
• 经验：通常需要至少 12 年的专业经验。

技术主管(还没达到,个人感觉)#

技术主管负责领导一个特定的项目，并对其技术成果的质量负责。

任何人都可以在他们职业生涯的任何阶段成为技术主管。

• 包括大量的项目管理 —— 保证项目准时运行，保证人们工作畅通无阻，当人们陷入困境时向管理层提出建议
• 有时可能涉及到指导员工和结对编程
• 仍然涉及项目的编码 / 参与和 IC 工作。这也可能意味着要填补项目的空白
• 帮助组织和促进与利益相关者的富有成效的正向沟通的会议
• 创建与总体项目目标以及执行方式的一致性。以富有成效的方式引发冲突。此外，一旦设定了产品愿景，就要全力实现它.
• 技术领导温和地执行标准 —— 包括文化和态度。如果团队不协调，技术领导会花时间和工程经理一起引导他们提高生产力

esmodule 在我 2016 年刚开始学 react 时候就开始用了,虽然用的理所当然,但是其实在 js 发展的历史中,早期好多项目其实是不支持的,包括浏览器, 这个淘汰过程需要很长的时间.最近感觉在 ie 逐步历史舞台的时期,去了解一下 node 浏览器里如何直接用 esmodule 还是很需要的.
翻了一些资料,总结一下如何使用.

NODE 里用 ESModules

主流的 node js 现在都支持 ESmodules

到 2021 年 4 月 20 号, Node v10 版本将停止维护 (更多参考 Node Releases ).这很令人振奋因为这意味着每个在维护的 node 版本都官方支持 EcmaScript Modules! 可能有些人还是挺喜欢以前的 CommonJS 但是 EcmaScript Modules 是大势所趋.

First, we need the JavaScript we want to run:

介绍了一些 互联网学习资料

如今，公司要求开发人员毕业的速度比他们毕业的速度还要快，而想要转行的人们已经让一种新的编程教育形式占据了主导地位: 编程训练营。

直截了当地说，编程训练营为有抱负的开发人员提供了一个合适的空间，他们希望获得全面的教育，而不必花费大量的金钱和时间。编码训练营已经变得很流行，因为它们帮助开发人员学习受欢迎的技术，并成为熟练的程序员，可以在不到一年的时间里找到工作。

然而，编码训练营并不是没有缺点的。随着价格接近数万元(美国标准)，以及学员找公司不尽如意的坏名声，所谓的“完美解决方案”的训练营现在正受到质疑。

作为一个在大学里学习软件开发的人，我总是从怀疑的角度来看待编程训练营。在回顾了顶级编程训练营的几个学习课程之后，我开始质疑一个训练营除了让学生付出巨额代价，并让他们声称自己完成了一个特定的大名鼎鼎的训练营之外，还能为他们带来什么。

当你仔细分析的时候，所有在训练营里学到的技能都是你可以通过在线资源免费自学的技能。

我意识到训练营有某些优势，包括面授(取决于你选择的教学方式)、人际交往机会、毕业后工作安排的支持可能性，以及学费延期支付，直到你有一份不错的薪水。但是—在一个堪比集训营的时代—存点钱，把课程中的所有知识都免费教给自己，这难道不是明智之举吗？为什么你必须在 16 周的时间里花费数万元来学习特定的技能？为什么不强迫自己在同样的 16 周内免费学习这些技能呢？

在完成了一个短暂的成本-收益分析之后，回答下面这个问题就变得更加困难了: 编写训练营值得吗？虽然你可以在短时间内学到即时需要的技能、社交机会和职业咨询，但这些并不一定比学费、生活费用和社会成本更重要。

编写训练营的文章，发表关于是否值得参加他们的课程的文章，往往掩盖了这样一个事实: 在今天这个时代，自学与每周坐在教室里 40 个小时，为基本相同的知识分发数万元一样有效。

我明白，他们能提供一个底线的担保。

原文:Everyday Systems That Help Me | Tania Rascia
自己给翻译了一下,现在有在用她推荐的 Strides ,我用的是免费版本.其他的还是用我之前用的软件.

读过 好生活的误解 , 很受触动,我现在认为 智者为自己制定规则 对我来说是正确的方法.

前者试图说明，“不要试图建立一个完美的系统，没有什么是完美的，所以只要放松，习惯混乱，并试图把你所有的注意力集中在一件事情上。”。后者说，“建立自我强加的个人规则，因为当你的标准明确时，你的生活质量就会提高。”。

这只是我自己给自己设置的”规则”,我个人感觉”眼不见为净”比出现问题了再”亡羊补牢”好.

• 停止不停的刷新社交 app
• 大幅减少社交媒体
• 大幅减少通知
• 大幅减少邮件接收
• 把工作和生活分开

社交软件 and 不停刷屏(infinite scrolling)

我已经训练自己不用浏览 Twitter，不用浏览 reddit，不用浏览 Instagram，我已经很多年没有使用 Facebook 了。根本不用担心自己上瘾担心自己上瘾.

事情没有绝对的,这些软件也有好的一面,我只是为了避免自己上瘾,没有在手机里装这些 app,但是我需要时候也会看看.

通知

我手机上只有两个通知: 电子邮件和短信。(还有日历事件，但是因为 2020 年我几乎没有日历事件，所以我差点忘了。)正如我上面提到的，我的手机上没有任何社交媒体应用。从浅层交互作用中获得的多巴胺越少越好。

推特是我与外部世界的唯一联系，因为它是我与其他开发者联系的地方，也是我推广我的工作的唯一地方，但我仍然只是每隔几天或每周查看一次。我也让 Slack 远离我的手机。

电子邮件

我练习收件箱为零。我尽量及时回复那些需要我回复的邮件。我不回复我收到的所有甚至大部分邮件。我明确表示我不想在东西(来宾帖子、赞助商、广告请求)会被自动标记为垃圾邮件。那些没有明确要求我退订并标记为垃圾邮件的网站为我注册了他们的时事通讯。这导致我很少收到邮件，而我收到的邮件都是能学到东西的人的。

工作

现在，工作就是我的家，就像我们许多人的家一样。朝九晚五是我的工作时间，5 点以后我不做任何与工作相关的事情，除非有明确的特殊需要。我的手机上没有安装任何工作应用程序或连接(团队、 Slack、 Outlook、工作邮件)。

Systems

我一直在高效地使用各种单一用途的应用程序。

• 保存我所有的个人笔记、记忆、文章和列表 使用Bear, 好像是改
• 跟踪我每天想做的任务/习惯/系统的网站 Strides
• One to track the various to-dos I don’t want to forget Todoist

Secret note: I built my own application(https://takenote.dev/) for handling notes instead of using some other system, because none of the ones I found did exactly what I wanted. In the year I was building this app, I left my thoughts in limbo. I have since realized building and maintaining your own app for something like this is not the best approach. I did learn a ton while doing it, so it was overall a very positive experience.

我不认为它们是不是应用程序真的很重要——你可以使用一本日记或随机的纸张。我不喜欢手写，所以应用程序让我写起来更容易。只要我有一个地方，我知道我可以去检索任何我想要记住或工作，和小日常事情不会落入缝隙。

我总是觉得我不能做乏味的，daily 任务(预算，计算卡路里，日记)。我过去从来没有做好过，而且我总是那么自由自在的生活！但事实证明，这些习惯并不是那么难以忍受，而且好处远远大于好处。

当然，你永远不可能一直做所有的事情。你会错过一天的锻炼。你会很累，然后上床睡觉。这很好——只需要毫不气馁地开始每一天崭新的一天。

Note, I’m only discussing the physical things I do here, not any mental thought processes I have.

整理

我每天都做的一些事情.

• 整理床铺
• 清洗所有用的碗
• 整理衣服

我从来不会把东西弄得一团糟，但是我可能会把事情搁置一、三天——几个盘子堆在一起，衣服堆在地板上，床永远不会整理好。现在我起床后立刻整理床铺，在做饭的时候洗盘子，立刻把衣服放到它们该放的地方。家里总是感觉干净整洁，尽管几乎没有时间和精力必须走进去，因为从来没有超过一天的菜肴或衣服处理的时间。

运动

是的，是的。锻炼身体是好的。我觉得我的认知是正确的。因为芝加哥是寒冷的自动对焦，户外运动几乎是不可能的，而且我不想成为健身房的会员。所以我只是选择一个数字(pick up a number ?)，每天做这些事情:

• 仰卧起坐 Situps
• 俯卧撑 Pushups
• 下蹲 Squats
• (如果天气允许的话)去散步/骑自行车 Take a walk/bike ride (weather permitting)

你真的不能找借口不做前三项，因为它们不需要任何设备或空间。我每天花 45 分钟到 1 小时做这些运动，还有伸展运动。可以很容易地完成，同时一边看与电视或音频一边做。至于散步，我经常在一两英里外选一家咖啡馆，然后走到那里再回来喝杯咖啡。如果是骑自行车的天气，我会每周骑几次 10 英里(1 小时)。

睡觉

我经常在凌晨 1 点或 2 点起床，只是听听音乐，玩玩视频游戏，看看 Netflix，或者上上网。我也是一个习惯性打盹的人，通常在早上设置 3 个闹钟。现在我有了一条规则:

• In bed by midnight
• Don’t snooze - wake up to the first alarm

这很难,但我知道每次我这样生活，事情都会变得更好。有时候，你不得不做那些在当下糟糕的事情，为了今后的一天/一周/一个月/一年/一年/一生。

Track net worth

I’ve been tracking my net worth for several years now. I see a lot of people budget month-to-month, but I like seeing the big picture. I just add up all my assets (checking/savings accounts, retirement accounts, stocks, crypto) and debts (credit cards, car loans, phone payments, student loans). Yes, that means if you have no retirement accounts or money in the bank and you owe $100,000 on student loans, your net worth is negative. I don’t like having any debt, so this helped me early on in my life to pay off all my student loans, and buy a cheap car with cash, and so on.

I just made my own custom Google Sheets page and I input all the numbers at the end of every month. So this is a “once a month” habit as opposed to some of the other “once a day” ones.

Learning and practice

I haven’t necessarily felt the most amount of focus in my life. Art and music don’t come as naturally to me as they used to. Although I want to practice music, for example, and learn new songs and how to sight read music, I don’t always feel the motivation to do so. Nonetheless, I’ve set up a daily thing to do - in this case, 10 minutes of sheet music flash card practice. It has the dual benefit of being a more productive thing to do while waiting in line somewhere than scrolling through the news or reddit, and I’ll be that much ahead when I do decide to sit down and learn a song.

So basically it was more productive for me to say “Practice sheet music 10 minutes a day” than “Learn this song” which is bigger and requires more upfront effort. And requires me to do something that isn’t coding related, which is where I’ll naturally gravitate for hobby purposes.

Do the annoying thing immediately

There is nothing I hate more than dealing with bureaucracy. Paying bills by mail when I can’t do it any other way, calling up any sort of automated system, stuff like that. I usually put off very simple tasks like paying a bill or renewing car insurance for weeks or months, and it’s always sitting in the back of my mind as something I know I need to do but I really, really don’t want to.

I’m personally making an effort to put those on my daily to-do list and just getting them done. It’s so much better than sitting there and knowing there’s an annoying thing to do for weeks on end.

Daily journaling

Recently, Matthew McConaughey was on the JRE podcast(https://www.youtube.com/watch?v=BBCl9A9NlRw) and talked about how he has kept a journal every day for basically his entire life. This is something I’ve never been able to do - I’ve just kind of been going through it day by day and living life in the moment. But there was some great advice there - when things are good, keep track of what’s going well. When things are bad, see all the factors of what was going on in your life during those times as well.

At least for myself, I occasionally have bouts where life just isn’t going the way I want, and I feel anxious and depressed seemingly out of nowhere. Then at other times, everything is going great, and I don’t know why. How much of it is within my control? How much is from external factors? Without having really kept track of anything that’s going on in my life, it’s really hard to say.

I’m aiming to adopt this strategy myself now. I can say things are going pretty well for me right now. I feel good at the moment, even with all the political craziness and lockdown and isolation and having a relatively recent breakup. I don’t feel anxiety or depression, and I feel a lot of positivity, hope, and potential. I know I won’t be able to write a detailed diary entry every single day of my life, but I’m making a point to remember to do it relatively often, and when important or interesting things happen.

Conclusion

再说一次，这只是我在谈论我在做什么，而不是给你提供建议。所有的情况都是独一无二的，再加上我没有丈夫或孩子让我忙碌。不用上下班也可以腾出时间来处理这些任务。

顺便说一下，在这些系统中没有任何关于写作。我没有为写作设定任何任务、习惯、目标或系统。我只是想写就写。人们有时会问我，我是怎么写了这么多文章的，想象着我是如此高效，并且一直在做这件事。说实话，我每个月都会有一两天坐下来写作。这样做超过 5 年,你会感觉到你做了很多

最后，如果我只能恳求你每天做一件事，那就是牙线。照做就是了。只需要 15 秒。

时不时会有些需求 ,如宣传页然后要求页面滚动跟随之类的要求.最近有些想法:

• 最好不用 react 之类,最近看资料然后感觉 svelte 不错.
• 样式之类 ,个人挺头疼的
• 手机适配感觉其实挺难的,但是感觉大部分需求其实还没到用框架的底部,如宣传页面,几个页面,如果设计出的强,照着他给的宽高严格写就行了.然后加一些 meta 头信息

言归正传,页面滚动相关的 css 如下:

方案一 scrolltrigger 库

• codepen https://codepen.io/collection/AEbkkJ?cursor=ZD0xJm89MCZwPTEmdj01MzQzOTYy
  ![scrollcss][pics/scrollcss.gif]

方案二 Animate Text on Scroll

![scrollcss2][./pics/scrollcss2.gif]
Animate text along a path on scroll using SVG and a scoop of vanilla JavaScript. Tutorial by Stephen Shaw (@shshaw) of the @keyframers.
* 💻 Final Code & Demo: https://cdpn.io/pen/NWKyNqK

• 📺 Video: https://youtu.be/Tae96ze3xwY

• 💡 Inspiration: New York Times article, shared by Jen Simmons https://www.nytimes.com/interactive/2…
  Additional Resources:

• Affinity Designer Vector Design App https://affinity.serif.com/en-us/designer/

• SVGOMG by Jake Archibald https://jakearchibald.github.io/svgomg

  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 26 27

  console.clear(); var textPath = document.querySelector("#text-path"); var textContainer = document.querySelector("#text-container"); var path = document.querySelector(textPath.getAttribute("href")); var pathLength = path.getTotalLength(); console.log(pathLength); function updateTextPathOffset(offset) { textPath.setAttribute("startOffset", offset); } updateTextPathOffset(pathLength); function onScroll() { requestAnimationFrame(function () { var rect = textContainer.getBoundingClientRect(); var scrollPercent = rect.y / window.innerHeight; console.log(scrollPercent); updateTextPathOffset(scrollPercent * 2 * pathLength); }); } window.addEventListener("scroll", onScroll);

这周逛 v2 由看到有人发 js 的 this 的题目,然后说能做出来的都得算多少年薪……..个人感觉这种知识大部分都是为了应付面试,而且道格拉斯克罗克福特 说过 js 是最好的语言,但是你要用它 good part.
不过周末正好看到 相关的一篇文章,发出来,比如有时候为什么调用要加 that =this 避免找不到 还是有点作用的毕竟.

If the function is defined as an arrow function

1
2
3

const arrwoFunction = ()=>{
  console.log(this)
}

this 和父级 this 是一样.

• call or apply 不能改变 箭头函数 的 this

Otherwise, if the function/class is called with new

this 被设置成 Object.create(….prototype)的返回值

1
2
3
4
5
6
7

class MyClass{
constructor(){
console.log(
this.constructor === Object.create(MyClass.prototype).constructor
 }
// Logs true
new MyClass()

Otherwise, if the function has a ‘bound’ this value

1
2
3
4
5
6

function someFunction() {
  return this;
}

const boundObject = { hellp: "world" };
const boundFunction = someFunction.bind(boundObject);

当 boundFuncton 被调用,this 指向 boundObject

1
2
3
4

// false
someFunction() === boundObject;
//true
boundFunction() === boundObject;

Otherwise, if this is set at call-time

1
2
3
4
5
6
7
8
9
10

function someFunction() {
  return this;
}

const someObject = { hellp: "world" };

// true
console.log(someFunction.call(someObject) === someObject);
// true
console.log(someFunction.apply(someObject) === someObject);

Otherwise, if the function is called via a parent object

1
2
3
4
5
6
7
8
9

const obj = {
  someMethod() {
    return this;
  },
};

// true

obj.someMethod() === obj;

in this case the function is called as a member of obj, so this will be obj,the link is broken if the function is called without its object

1
2
3

const { someMethod } = obj;
//false
someMethod() === obj;

Otherwise, if the function or parent scope is in strict mode

1
2
3
4
5
6
7

function someFunction() {
  "use strict";
  return this;
}

// true
someFunction() === undefined;

如果父级是严格模式,不写’use strict’ 结果也是一样的

Otherwise

1
2
3
4
5
6

function someFunction() {
  return this;
}
// true

someFunction() === globalThis;

this 指向全局 this