Tailwind CSS
来编写样式,可以为开发者节省诸多时间;而且,能够优化减小代码体积、提升运行性能,是非常棒的技术套件。 快应用 开发,同样基于 Web 技术栈,理论上也完全可以使用 Tailwind CSS;在实际开发过程中,该如何使用 Tailwind CSS 呢?本文旨在对此做些许分享。
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名,生成相应的样式,然后将它们写入静态 CSS 文件。它快速、灵活、可靠,且运行时间为零。官方提供 Tailwind CLI 、PostCSS、Play CDN 等使用方式;下面主要讲下如何基于 Tailwind CLI 方式,在应用开发中使用 Tailwind CSS:
Tailwind CSS 是一种现代的 CSS 框架,它提供了一组预定义的 CSS 类,用于快速开发现代 Web 应用程序。Tailwind 的核心理念是为开发者提供一种灵活的方法来构建自定义的 UI 组件,而不需要编写大量的 CSS 代码。
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名,生成相应的样式,然后将它们写入静态 CSS 文件。它快速、灵活、可靠,且运行时间为零。
在快应用开发中引入,可以为项目带来四方面的好处:更快的编写效率、更小的代码总体积、更高的运行效率、更易于项目维护。更详细说明如下:
Tailwind CSS:当今最流行 CSS 框架;相信借助其巧妙设计、结合强大生态,您也会偏爱用它来塑造 UI;如果必须要手动编码:那无需频繁滚动编辑区,无需于 template 与 style 之间横跳,无需绞尽脑汁为类命名,无需再编写重复的 CSS……是多么美妙。
通过 npm 安装 tailwindcss
并创建 tailwind.config.js
文件,具体命令如下:
|
|
在文件中添加所有模板文件的路径 tailwind.config.js
,参考性配置如下:
|
|
@tailwind
将 Tailwind 每个层的指令添加到您的主 CSS 文件中。
|
|
运行 CLI 工具来扫描模板文件中的类并构建 CSS,参考性命令如下:
|
|
这是看起来路径简短的方式,实际上这个 input.css
和 output.css
,无论是名字,或是它存在的路径,皆可以自行指定,您可以按照自己喜欢的方式、或是团队约定俗成的形式;譬如统一存放在:src/assets/styles
目录下。
需要补充说明的是:在团队开发中,输入上述命令,略显繁琐,可以在 package.json
注入命令(如下示例);如此以下,您只需在「终端」运行 pnpm tailwindcss
或 npm run tailwindcss
命令即可。
|
|
将已编译的 CSS 文件,在 .ux
(非 app.ux
)文件中,通过 @import
方式引入;
|
|
现在,即可在 .ux
的 template
中,开始使用 Tailwind 的实用程序类来设置内容的样式,如下面这段代码示例:
|
|
当您写完保存之后,打开 output.css
即可如下的 CSS 代码:
|
|
至此,在 快应用 开发中引入 Tailwind CSS 的准备工作,已经初步完成,您可以与 Tailwind CSS
开启愉快合作之旅,从而促使高效编码、提前完工。假如,您对 Tailwind CSS
尚不熟悉,可通过查阅 Tailwind CSS Doc ,亦可在线体验—— Tailwind Playground 。
需要补充说明的是,使用 Tailwind CSS
并不破坏您原来的 CSS 书写✍🏻方式;您完全可以结合喜欢的预处理器(如 Sass、Less、Stylus),来共同工作,而无需做更多设置(如下代码示例);但我以为当您熟悉 Tailwind CSS 之后,大有可能也会“移情而别恋”。
|
|
您可以在应用开发工具的「扩展市场」,通过关键字 Tailwind
检索”Tailwind CSS IntelliSense“扩展——适用于 Visual Studio Code 的智能 Tailwind CSS 工具,用户提供自动完成、语法突出显示和 linting 等高级功能来增强 Tailwind 开发体验;略作适配即可支持 *.ux
;详细设置,可参见: Tailwind CSS IntelliSense 。
默认情况下,编辑“字符串”内容时(例如在 JSX 属性值中),开发工具中不会触发完成。更新设置 editor.quickSuggestions
可能会改善您的体验:
|
|
Tailwind CSS 生态发展繁荣超乎想象,就连其衍生产品也不可胜数;如 Flowbite ——包含 600 多个 UI 组件、部分和页面的开源库进行开发,该库使用 Tailwind CSS 的实用程序类构建并在 Figma 中设计。它不仅能充当 Tailwind CSS 插件使用,也可以拷贝到项目直接使用,还可以在线查阅效果(支持多种屏幕设备类型),挑选匹配实现方案;在仍是基于组件树构建页面的时代,极大提升页面搭建效率。如: pagination 组件:
如果您熟悉 Web 开发,针对上述教程,您可能会有诸多疑惑;实际上,笔者在实践之时,也有发现,只不过因为各种机制限制,目前只能如此。下面就与诸君分享,期可解惑:
script
标签中,引入输出 CSS 文件么?按 Web 开发习惯,在 app.ux
文件中可以直接 import
输出 CSS 文件(如下代码所示),那为何未建议如此呢?
|
|
因为这样做会报如下错误;具体是缺乏与之匹配的 loader;当然,可以使用 css-loader
和 style-loader
来处理 CSS 文件,详见 ChatGPT | You may need an appropriate loader…. 。
|
|
但在快应用开发过程中,却不能生效;因为 style-loader 的作用是将 CSS 注入 DOM,其中用到了诸多浏览器 API(document),而快应用的开发虽然是基于前端技术栈,但其运行环境止于 v8
,实际的渲染是由 Android 底层完成,并未走浏览器这条路,因此无法工作。在构建工具优化、兼容之前,通过 style
标签中引入 CSS,成了主要选择。
tailwind.config.js
禁用如此多样式?Tailwind corePlugins 部分允许您完全禁用 Tailwind 通常默认生成的类(如果您的项目不需要它们);这个设计对于快应用实在必要的紧,在上述示例中,对 text-opacity
等样式进行禁用,也是无奈之举。具体原因在于以下两点:
其一:快应用标准虽然基于 Web 技术栈,但只是 Web 标准子集,如蛮多 CSS 属性并不能很好的支持;其二:默认情况下,TailwindCSS 会将样式属性的值存储为 CSS 变量(例如 --tw-text-opacity
),以便进行动态计算和响应式设计。
如此一来,在 template 中使用类 text-red-300
、border-spacing-1
,输出的便是如下 CSS;这样的写法,在快应用中并不能得到正确解析,也就无法起到期待效果,于是禁用便成了必须要做之事。当然,这样禁用也好处:利于输出更小提及的 CSS 文件。其他属性亦复如是。
|
|
input.css
中移除 @tailwind base;
?这么做主要未解决问题: How disable default styles for : before and : after 。
|
|
在一般 Web 开发过程中,会将 base、components、utilities 等指令,都添加到 CSS 文件项目中;但,在快应用开发过程中,这无疑是累赘;因为它的存在,会使得 output.css
输出较多对项目没有裨益额外内容(如下代码所示),故而移除;这与通过 corePlugins 禁用基础样式(preflight)、禁用容器组件(container)作用类似。
|
|
theme
自定义长度单位?修改长度单位从 rem
到 px
,这也是不得已而为之。 快应用 标准对 长度单位 的支持,在 1070 及以下版本仅支持长度单位 px
和 %
。从 1080
版本开始,新增了长度单位 dp
。它无法支持 rem
,就只能自定义设置为 px
;在通过 theme
自定义长度单位,是 Tailwind CSS 官方提供的功能,以此能够实现更精细的样式控制;虽然操作不难,但属性较多、约定繁杂。后续时间如果允许,将探索 rem to px
批量转换插件来实现,以达到快速修改。如果您感兴趣,可以查阅 Tailwind CSS 完整版本配置—— config.full.js 。
在 Tailwind CSS 机制中,支持使用类名诸如 h-[100px] w-1/3
(对应生成 CSS 如下),然而,在快应用构建工具暂不支持这类名,于是乎这样写便不会生效,当然也不会造成什么问题;后续亟待打包工具优化。
|
|
在打包(Toolkit)未解决该问题之前,您可以手动写一个 class
,或者使用内联样式(style
)来兼容;在这种情况下,更推荐后者;因为引入 Tailwind CSS 的开发模式中,基本不用手写 class,即无需滚动到 style
标签或跳转 less、(s)css、文件,那么直接在 template
中使用内联更为便捷。
|
|
前文中提到,在 script
标签中 import
CSS 资源,暂时未得到支持;但,在 style
标签中 @import
的 CSS 文件,被 A、B 两个页面(*.ux
)引入,那么对应的 css 内容,就会被打入对应页面(即便有的内容没有被使用),从而导致代码体积略有增加(即便参考 如何优化「快应用」rpk 包体积? 一文中的方法,也不可避免)。这是快应用构建本身存在的问题,使用 Tailwind CSS 也不例外。后续需要打包工具优化。
以上,就是在 快应用
开发过程中,引入 Tailwind CSS 所需的操作、以及常见问题说明。肯定还有异常更多情况没有考虑到,后续会逐步补充;如果您在实际运用过程中,欢请留言交流、反馈、分享。
2023 年 07 月 05 日写于〔深圳福田〕
除此之外,闲暇时间,有构建些 Web 应用,诸如:玉桃文飨轩 (Markdown 在线转图片)、素问智聊斋(ChatGPT 在线客户端),感兴趣朋友可移步以了解更多。后续如果有写值得分享的长篇,依旧会同步至「晚晴幽草轩」。
2025 年 5 月 02 日写于〔深圳福田〕
]]> OpenAI 于 2022 年 11 月推出的超级对话模型 ChatGPT, 受到来自世界各地的认可和赞誉,令人印象深刻。然而,由于一些原因,如果没有正确搭建相应的环境(🪜),ChatGPT 在部分地区就无法正常使用。鉴于此,搭建了这个服务,以便用户能够方便地使用 ChatGPT。当然,条件允许您可前往 OpenAI 官网上注册、登录、申请专属 API KEY
。此外,为了保障用户的数据安全,本服务的操作过程中不会存储任何使用者的数据,因此可以放心使用(备注:这段介绍有使用本服务加以润色)。
补充说明:承诺后台不会保存任何数据;基于 API KEY 发起的对话内容,会同步到对应账号;如果您习惯使用桌面客户端,类似项目有: lencx/ChatGPT 。
最原始的动机,是因为:以上两点适用场景所对应的诉求,我觉得都需要。但,这并不足以缘起这个项目,更详细的阐述如下:
作为颇爱折腾的技术人员,ChatGPT 自然是要体验;有请时在美国的朋友,帮着注册®️了账号;然而,蛮多时候即便采用科学上网,设备却无法成功登陆 ChatGPT 官网地址 。恰逢一个契机——帮朋友写几行关于 ChatGPT 的示例;当痛点(Motivation:动机)碰上可执行性(Ability:能力),外加适当的 触发条件 (Trigger),福格行为模型(BJ Foog’s Behaviour Model)已全部满足,于是乎, 素问智聊斋 就有了诞生的充足理由。
早在 关于“悠然宜想亭”的由来,以及未来 一文提及,对于网站取名多是五个字;或是兴趣的原因,其后缀带有 亭台楼阁、轩榭廊舫,殿庭苑斋 其中一个;其中大部分已被使用;因为「Chat」的应为对应的是「对话、聊天」;于是,「斋」字就这么定下;AI 对应智能,所以「智聊」也就应景而生。
原本命名为「智聊问异斋」,后觉不妥,略阅资料,遂修改为 素问智聊斋
;素问:最早或于《黄帝内经》;釋名:“「素者,本也;問者,黃帝問於岐伯也」”。另有解释为:“ 即问本,探索人与自然的根本性问题 ”。当想 ChatGPT 说:“解释下「素问」”,它给出以下解释:
「素问」是一种中国古代哲学思想,它强调对本质的探究。它的核心思想是:任何事物都有其本质,而且这个本质不受时间和空间的束缚,所以要理解它,就必须通过探究本质来探索事物的真相。
前端采用了 Svelte 、 TypeScript 、 TailwindCSS 、 Flowbite 、 MDSvex 、 Vite 、 等流行技术栈,而后台则采用 Fastify 框架;在服务器上,则基于 Nginx 、 pm2 进行部署;其中 Svelte、TailwindCSS、MDSvex 等工具,极大提升了编写代码的舒适度,令人青睐有加。
关于 ChatGPT(或其他 AI 产品),相信接触过它的人们,或多或少都会有自己的感受;目前为止,吾有以下几点看法:
新注册 Open AI 账号,为 API Key 调用费用赠送 18$
,为期三个月;4 月 1 日过期之后,为使得服务能够正常运行,有继续购买它的服务。ChatGPT 的价格为:0.002
美元 1000 个 tokens(约为 750 个英文单词),GPT4 则更贵一些;当使用费用超过所能承受的能力,外加服务器使用费用,或可能考虑植入定量商业化措施。现如今,如果您认为 素问智聊斋 对您有一定价值,可以考虑为发起 赞助 。
以上介绍内容,部分使用 ChatGPT 加以润色 。截止目前,它可以协助人类,已经很多,诸如学术论文、内容创作、翻译、数据分析、研究咨询、简历和求职信、广告文案、编写小说、个人陈述、 SEO 优化等等,如果想让它更好帮助到您,可以移步 ChatGPT 中文调教指南 ,学习怎么让它在不同场景,更好听理解您的指令。
WebAssembly 起源于 Mozilla 员工的一个业余项目。2010 年,在 Mozilla 从事 Android Firefox 开发的 Alon Zakai,为了把他以前开发的游戏引擎移植到浏览器上运行,利用业余时间开发了一款名叫 Emscripten 的编译器,可以把 C++ 代码通过 LLVM IR 编译成 JavaScript 代码。
到了 2011 年底,Emscripten 甚至能够成功编译 Python 和 Doom 等大型 C++ 项目,Mozilla 此时觉得这个项目很有前途,于是成立团队并邀请 Alon 全职开发这个项目。2013 年 Alon 和其他成员一起提出了 asm.js 规范,asm.js 是 JavaScript 语言的一个严格子集,试图通过“减少动态特性”和”添加类型提示“的方式帮助浏览器提升 JavaScript 优化空间。相较于完整的 JavaScript 语言,裁剪后的 asm.js 更靠近底层,更适合作为编译器目标语言。
asm.js 只提供两种数据类型:32 位带符号整数,64 位带符号浮点数,其他数据类型比如字符串、布尔值或者对象,asm.js 一概不提供,它们都是以数值的形式存在,保存在内存中,通过 TypedArray 调用。类型的声明也有固定写法:变量 | 0
表示整数,+变量
表示浮点数。例如下面一段代码:
|
|
支持 asm.js 的引擎提前识别出了类型,可以进行激进的 JIT(即时编译)优化,甚至是 AOT(事先编译)编译,大幅提升性能。不支持 asm.js 按普通 JavaScript 代码执行也不会影响运行结果。
但是 asm.js 的缺点也很明显,那就是“底层”得不够彻底,例如代码仍然是文本格式;代码编写仍然受 JavaScript 语法限制;浏览器仍然需要完成解析脚本、解释执行、收集性能指标、JIT 编译等一系列步骤。如果采用像 Java 类文件那样的二进制格式,不仅能缩小文件体积,减少网络传输时间和解析时间,还能选用更接近机器的字节码,这样 AOT/JIT 编译器实现起来会更轻松,效果也更好。
与此同时,Google 的 Chrome 团队也在试图解决 JavaScript 性能问题,但方向有所不同。Chrome 给出的解决方案是 NaCl(Google Native Client)和 PNaCl(Portable NaCl)。通过 NaCl/PNaC1,Chrome 浏览器可以在沙箱环境中直接执行本地代码。
asm.js 和 NaCl/PNaC1 技术各有优缺点,二者可以取长补短。Mozilla 和 Google 也看到了这一点,所以从 2013 年开始,两个团队就经常交流和合作。后来他们决定结合两个项目的长处,合作开发一种基于字节码的技术。到了 2015 年,“WebAssembly” 确定为正式名称并对外公开,W3C 成立了 WASM 社区小组(成员包括 Chrome、Edge、Firefox 和 WebKit),致力于推动 WASM 技术的发展。
Web 平台的成熟催生了复杂而苛刻的网络应用,如交互式三维可视化,音频和视频软件,以及游戏。随着伴随着这一点,Web 上代码的效率和安全性变得比以往更加重要。然而,作为唯一的网络内置语言——JavaScript 并没有很好地满足这些要求,特别是作为编译目标。来自四个主要浏览器供应商的工程师们迎接挑战,合作设计了一个可移植的低级字节码,称为 WebAssembly 。它提供了紧凑的表示、高效的验证和编译,以及安全的低至无开销的执行。WebAssembly 不是致力于一个特定的编程模型,而是 WebAssembly 是对现代硬件的抽象,使其与语言、硬件和平台无关,其使用范围不只是 Web 浏览器;就目前而言,Node.js、Deno、 WebAssembly 运行时 等环境都可使用。
WebAssembly 是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如 C / C ++ 等语言提供一个编译目标,以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存,允许两者一起工作。WebAssembly 是可移植、体积小、加载快并且兼容 Web 浏览器的全新类汇编语言格式,其具有高效、安全、开放、标准等特性。
WebAssembly (缩写为Wasm)是基于堆栈的虚拟机的二进制指令格式。其设计目的不是为手写代码,而是为诸如 C、C++、Rust 等低级语言提供一个高效的、可移植的编译目标,支持在 Web 上部署客户端和服务器应用程序。
不会。在 WebAssembly 常见问题 中,作者给出了明确说明:“WebAssembly 旨在补充而非替代 JavaScript。随着时间的推移,WebAssembly 将允许许多语言被编译到 Web,而 JavaScript 具有令人难以置信的势头,并将继续保持 Web 的单一、特权( 如上所述 )动态语言。此外,预计 JavaScript 和 WebAssembly 将在许多配置中一起使用”。
执行程序
、由一序列 OP 代码(操作码)/数据对
组成的二进制文件。 字节码是一种 中间码
,它比机器码更抽象,需要 直译器转译
后才能成为机器码的中间代码(通常不是人类可读的语言)。机器语言指令
,有时也被称为 原生码(Native Code)
,是电脑的 CPU 可直接解读
的数据(即计算机只认识 0 和 1)。.wat
(WebAssembly Text Format),是另外一种输出格式,是使用 “S- 表达式” 的文本格式,可以近似理解为与二进制等价的汇编代码。部分浏览器的开发者工具支持将 WASM 转换成 WAT 查看,便于在线调试。社区提供了 wasm2wat
和 wat2wasm
等成熟的工具将二者进行转换,可以在 WebAssembly/wabt (WebAssembly Binary Toolkit) 工具集中找到,所以也是可以直接编写 WAT 再转换成 WASM。.wasm
) :WebAssembly 的最终形式,是一种低级字节码,基于 16 进制表示;无需解析,只要解码并且检查确认代码,即可编译为机器码。从 WebAssembly 诞生背景及目标来看,它所要解决的是 JavaScript 语言本身限制,不足以应对 CPU 密集型应用的问题。因此,优缺点比较对象是 JavaScript、以及 Native Client 和 asm.js 等尝试“解决 Web 上安全快速代码”的方案。
Native Client:是一个沙箱,用于在浏览器中高效、安全地运行已编译的 C 和 C++ 代码,独立于用户的操作系统。它已于 2020 年弃用,支持将于 2021 年 6 月结束。
Asm.js:代码在很多方面类似于 C,但它仍然是可以在所有当前引擎中运行的完全有效的 JavaScript。Firefox 是目前唯一可以做到这一点的浏览器。已被弃用。
WebAssembly 独立于平台、独立于硬件和独立于语言,它对设备或浏览器没有任何特殊要求,这增强了其便携性;其设计原则是与其他 Web 技术和谐共处,并保持向后兼容。代码在内存安全的沙盒环境中进行验证和执行,可以防止安全漏洞和数据损坏。此外,像其他 Web 代码一样,它遵循浏览器的同源策略和授权策略。
WebAssembly 不直接支持多线程。但是,WebAssembly 程序可以在宿主环境中执行,这个宿主环境可能支持多线程。因此,WebAssembly 程序间可以通过宿主环境来协调多线程(通过 Web Worker、共享线性内存 SharedArrayBuffer
、 WebAssembly atomics )。详情可参见文章: Using WebAssembly threads from C, C++ and Rust 。
如果应用程序使用 C/C++
、Rust 或任何其他兼容语言,WebAssembly 可以轻松地将代码或桌面应用程序用于 Web。如今(2022 年 12 月)生态已经非常丰富,除了用于 Rust 的 wasm-pack
和用于 C/C++
的 Emscripten
之外,还有 AssemblyScript 、 TinyGo 凡此种种,详情可参见: Awesome Wasm Compilers 。
尽管 WebAssembly 具有很多优点,但目前仍存在些缺陷,譬如:
runtime
)中运行;倘若环境不支持,需要使用其他方式来实现(假如要考虑兼容);显而易见,没有技术会是银弹,只有把技术放在适用的场景下才能达到事半功倍的效果;在开发效率,与运行效率两者之间,无法同时做到最优;根据不同环境、需求,做平衡才是更优的选择。因此,除了计划解决的部分,WebAssembly 携带部分缺陷在所难免;毕竟它是对 JavaScript 的补充。
WASM 并不是为了优化您的网站,而是为了在执行以下任务时将浏览器(和服务器端运行时,如 Node.js、Deno)提升到一个新的水平:
更多使用场景可参见: WebAssembly Use Cases ;任何需要大量编码和大量性能调整的事物,都是 WASM 的完美用例。如需使用 WASM 的开源项目列表,您可以访问 Made with WebAssembly 这个社区。下面是些声名远扬的项目:
为了理解 WebAssembly 是如何在 Web 运行的,需要了解几个关键概念:
postMessage
共享,一个 Module 声明了类似 ES2015 模块类似的 import 和 export。WebAssembly 的 JavaScript API 提供给开发者创建 Module、Memory、Table 和 Instance 的能力,给定一个 WebAssembly 的 Instance,JS 代码可以同步的调用它的 exports – 被作为普通的 JavaScript 函数导出。任意 JavaScript 函数可以被 WebAssembly 代码同步的调用,通过将 JavaScript 函数作为 imports 传给 WebAssembly Instance。
因为 JavaScript 能够完全控制 WebAssembly 代码的下载、编译和运行,所以 JavaScript 开发者可以认为 WebAssembly 只是 JavaScript 的一个新特性:可以高效的生成高性能的函数。
|
|
在未来, WebAssembly 模块可以以 ES2015 的模块加载形式加载,如通过 import
或 <script type="module">
,意味着 JS 可以获取、编译、和导入一个 WebAssembly 模块,就像导入 ES2015 模块一样简单。详见: WebAssembly 的 ES 模块集成提案 。
WebAssembly 给 Web 平台添加了两块内容:一种二进制格式代码,以及一系列可用于加载和执行二进制代码的 API。时值 2022 年,生态已颇具规模,详情可参见: Awesome Wasm ;主要流行的入口有:
对于 Web 开发者来说,可是使用类 TypeScript 的形式来尝试 WebAssembly 的编写,而不需要学习 C 或 Rust 的细节,那么 AssemblyScript 或将会是最好的选择。AssemblyScript 将 TypeScript 的变体编译为 WebAssembly,使得 Web 开发者可以使用 TypeScript 兼容的工具链,例如 Prettier 、VSCode Intellisense,你可以查看 AssemblyScript 文档 来了解如何使用。
补充说明,如今已有大量的工具库被编译为 WebAssembly,并做了封装;譬如 Photon (一个高性能的 Rust 图像处理库,它编译为 WebAssembly,允许在本地和 Web 上进行安全、快速的图像处理),其使用方式与其他 npm 包没有区别;在基于 Vue3 开发的作品: 玉桃文飨轩 中就有使用,如您感兴趣,可移步源码实现: markdown2png 。
一门技术到底前景如何,很难准确预测;但是它的热门程度却是可以衡量的(比如在社交媒体提及次数的增长幅度)。风险投资跟热门程度高度正相关,越热门的技术越容易拿到投资。
用户可以基于 Gartner 技术热门度曲线,判断技术处在哪一个阶段,确定它的热门程度。简单的使用规则为:”争取风险投资,要选择热门的技术;解决实际问题, 要选择可靠的技术。“
简单说,处于启动期的技术,风险很大,不确定性极高,但是一旦成功,回报可能也很高,适合创业公司;处于高原期的技术,非常可靠,风险低,有成熟的解决方案和配套工具,适合大公司和企业的内部应用。
反之,如果一门技术已处于高原期了,就代表它非常成熟;人们对它能干什么和不能干什么,都已经很是了解,也难以产生新的期待,技术本身的潜力已经不大,所以用它拿不到投资,只能用来干活。
扩展现实 (XR):是一个“包罗万象”的术语,指的是增强或取代我们对世界的看法的技术。这通常是通过将计算机文本和图形叠加或浸入现实世界和虚拟环境,甚至是两者的结合。
XR 包括增强现实 (AR)、虚拟现实 (VR) 和混合现实 (MR)。虽然所有三个“现实”都有共同的重叠特征和要求,但每个都有不同的目的和底层技术。
XR 将在元宇宙中发挥基础性作用。“互联网的下一次发展”将把真实、数字和虚拟世界融合到新的现实中,通过 Arm 驱动的“网关”设备(例如 VR 耳机或一副 AR 智能眼镜)进行访问。
XR 技术有一些基本的相似之处:所有 XR 可穿戴设备的核心部分是能够使用视觉输入方法(例如对象、手势和注视跟踪)来导航世界并显示上下文相关信息。深度感知和映射也可以通过深度和位置特征来实现。
增强现实 (AR) ,通过将我们看到的内容、与计算机生成的信息叠加在一起,增强了我们对现实世界的看法。如今,这项技术在智能手机 AR 应用程序中很普遍,这些应用程序需要用户将手机放在面前。通过从相机中获取图像并进行实时处理,该应用程序能够显示上下文信息、或提供似乎植根于现实世界的游戏和社交体验。
尽管智能手机 AR 在过去十年中取得了显着进步,但其应用仍然有限。越来越多的重点是通过可穿戴智能眼镜提供更全面的 AR 体验。这些设备必须将超低功耗处理器与包括深度感知和跟踪在内的多个传感器结合在一起,所有这些都在一个轻巧舒适的外形中,足以长时间佩戴。
AR 智能眼镜需要在用户移动时始终在线、直观且安全的导航。这需要在深度、遮挡(当 3D 空间中的一个对象从视图中挡住另一个对象时)、语义、位置、方向、位置、姿势以及手势和眼睛跟踪等功能方面取得重大进展。
虚拟现实 (VR), 完全取代了用户的视野,让他们沉浸在计算机生成的虚拟环境中。这种 XR 技术已经存在了一段时间,并在逐步改进。它主要用于娱乐体验,例如游戏、音乐会、电影或体育,但它也在加速进入社交领域。对于 VR,沉浸式娱乐体验将需要高清渲染管道、体积捕捉、6DoF 运动跟踪和面部表情捕捉等功能。
VR 还用作培训、教育和医疗保健(例如康复)的工具。为了让最终用户获得这些体验(并且也是无缝的),VR 技术的重点通常是高质量的视频和渲染以及超低延迟。
最后,VR 设备现在正在通过 RecRoom 等平台增强视频会议体验,这些平台可以在不同的虚拟世界中进行虚拟聚会。现在支持 Oculus Quest 的 RecRoom 在 2020 年 Arm 新现实系列的第三集中 出现,讨论了 VR 的沉浸式体验。
MR 介于 AR 和 VR 之间,因为它融合了真实世界和虚拟世界。此类 XR 技术存在三个关键场景。第一种是通过智能手机或 AR 可穿戴设备将虚拟对象和角色叠加到现实环境中,反之亦然。可参见 Microsoft 教程: 什么是混合现实?
2016 年风靡全球的 Pokémon Go 手机游戏,通过智能手机摄像头将虚拟 Pokémon 覆盖在现实环境中。这通常被吹捧为革命性的 AR 游戏,但它实际上是 MR 的一个很好的例子——将现实世界环境与计算机生成的对象混合在一起。
混合现实也开始用于使 VR 真实世界玩家能够叠加到视频游戏中,从而将真实世界的人物带到 Twitch 或 YouTube 等游戏流媒体平台上。以上内容,出自文章: XR、AR、VR、MR:现实有何不同? (发表于 2022 年 4 月 1 日)。
数字孪生是一种旨在精确反映物理对象的虚拟模型。 会给研究对象(例如,风力涡轮机)配备与重要功能方面相关的各种传感器。 这些传感器产生与物理对象性能各个方面有关的数据,例如,能量输出、温度和天气条件等等。 然后将这些数据转发至处理系统并应用于数字副本。
一旦获得此类数据,虚拟模型便可用于运行模拟、研究性能问题并生成可能的改进方案;所有这些都是为了获取富有价值的洞察成果,然后将之再应用于原始物理对象。
尽管模拟和数字孪生都是利用数字模型来复制系统的各种流程,但数字孪生实际上是一个虚拟环境,对于研究来说内容特别丰富。 数字孪生和模拟之间的区别主要是规模问题: 模拟通常研究的是一个特定流程,而数字孪生本身可运行任意数量的实用模拟项目来研究多个流程。
当然,二者之间的差异远不止如此。 例如,模拟通常不会从获得实时数据中受益。 但数字孪生是围绕双向信息流设计的。当对象传感器向系统处理器提供相关数据时,该信息流首次出现。然后,当处理器将其得出的洞察成果与原始源对象共享时,该信息流会再次出现。
数字孪生拥有的数据更加优质且不断更新,且覆盖了更加广泛的诸多领域;除此之外,虚拟环境还具备更强的计算能力,因此,与标准模拟相比,数字孪生能够从更有利的角度研究更多问题,具备更大的最终潜力来改进产品和流程。
4D 打印技术,是指由 3D 技术打印出来的结构,能够在外界激励下、发生形状或者结构的改变,直接将材料与结构的变形设计内置到物料当中,简化了从设计理念到实物的造物过程,让物体能自动组装构型,实现了产品设计、制造和装配的一体化融合。
4D 打印的主要构成要素可以分为四个部分:智能或刺激反馈材料、4D 打印设备、外部刺激因子、智能化设计过程。
4D 打印可应用领域有:生物、医疗领域、军事工业领域、产品设计领域、交通工具、建筑与航空航天领域、教育领域。
4D 打印让快速建模有了根本性的转变。与 3D 打印的预先建模然后使用物料成形并不一样,4D 打印直接将设计内置到物料当中,简化了从“设计理念”到“实物”的创物过程。让物体如机器般“自动”创造,不需要连接任何复杂的机电设备。为了充分应用这一新技术,Autodesk 公司的研发团队进一步设计了新软件 Cyborg,可以用于自我组装和可编程的模拟材料,实现设计的优化和材料的折叠。
虚拟助理(virtual assistant)是一种能替个人执行任务或服务的软件代理(software agent)。有时候“聊天机器人”泛指虚拟助理,亦或专指网络聊天使用的软件机器人(有时候更专指娱乐而非实用的网络聊天)。但也可以指一种职业,或者企业组织,其乃是透过网络执行远端服务。其能依据使用者输入的内容、位置感测而完成相对应的任务或提供相关服务,同时也具有从网络上寻找并提供使用者各种资讯(像是天气、交通状况、新闻、股市行情、行程或零售价格等)的能力。
至 2017 年,随着新产品进入市场,虚拟助理的功能与运用正快速扩张。一项 2017 年 5 月的线上调查显示,美国的市占率依次为苹果 Siri(34%)、Google 个人助理(19%)、Amazon Alexa(6%)及微软 Cortana(4%)。搭载这些助理的智慧扬声器也有着巨大的变化;苹果直到 2017 年 6 月才宣布其智慧扬声器。脸书的 M 虚拟助理 预计 2017 年在 Facebook Messenger 上会有数亿的用量。
虚拟助理的作业媒介:
有些虚拟助理的使用方式多样,例如 Google 智能助理在 Google Allo app 用文字,Google Home 智慧扬声器则用语音。虚拟助理,利用自然语言处理(NLP)从使用者的文字、语音输入,找到相应的可执行指令。许多助理利用人工智能的技巧,包括 机器学习 ,不断学习。
用语音启动虚拟助理,可能需要用到“唤醒词”(wake word),这是一个或一组词,例如 Alexa、“嗨,Siri”(Apple iPhone、Mac 等),“小 v 小 v”( vivo ) 或者 OK Google。
虚拟助理可提供多样的服务,尤其是 Amazon Alexa 和 Google 个人助理,日新月异,包括:
IPFS(InterPlanetary File System),一般翻译为“星际文件系统”,它由 Protocol Lab 提出,始于 2014
年,发明者: Juan Benet ;它是一种点对点(P2P)的分布式文件系统(用来存储数据的技术);但更确切的说 IPFS 是一种传输协议。IPFS 将 HTTP 视为对手,宣传上要对标 HTTP。
IPFS 它是一个基于内容寻址的、分布式的、新型超媒体传输协议。 IPFS 支持创建完全分布式的应用。 它旨在使网络更快、更安全、更开放。 IPFS 是一个分布式文件系统,它的目标是将所有计算设备连接到同一个文件系统,从而成为一个全球统一的存储系统。实现互联网中永久可用、数据可以永久保存(理论上,访问量越大,越能保证)。
HTTP(超文本传输协议)是目前最常用的传输协议。在网上找到想要的内容,就要输入网址,网址多是 HTTP 开头。HTTP 通过域名、IP 及多个中心服务器的中转,再进行文件的上传下载。HTTP 的功绩无可取代,现在人们上网都要依赖于 HTTP。但 HTTP 也存在一些问题,比如性能效率不是非常高,过度依赖于中心服务器与主干网络等等。
IPFS 与之相比,它是一种多中心化的解决方案,内容寻址不是通过域名、IP,而是通过唯一 HASH 密钥来进行数据寻找。IPFS 是个分布式文件存储系统,文件数据并不储存在一个中心化的服务器中,而是存储在网络上所有符合条件的电脑中。当然,IPFS 不止如此,还有很多其他的特性,层次与应用范围也超过了简单的 P2P 下载。
如果您对 IPFS 感兴趣,可以参见 IPFS 入门笔记 、 IPFS 如何冲击我们熟知的网络世界 等文章。
2022 年 11 月 ~ 12 月 03 日写于〔深圳福田〕
prerender
项目由 Prerender.io 出品(其内部基于 Headless Chrome,与 Google Puppeteer 类似),也可以使用 Prerender.io 提供的服务;它旨在加快向搜索爬虫提供内容的速度,从而提高您的 SEO 分数。只需注册、登录、按照说明进行 Nginx 配置即可;相比自己部署的 prerender
服务,有更快的速度、更多可选项设置、强大的仪表盘、缓存管理器以及其他缓存相关活动操作。
prerender 的原理是,配置 nginx,判断出是爬虫来访时,先将请求页面地址发送给 prerender 服务,由 prerender 服务渲染出页面内容,再将页面内容返回给爬虫。
Prerender is a node server that uses Headless Chrome to render HTML, screenshots, PDFs, and HAR files out of any web page. The Prerender server listens for an http request, takes the URL and loads it in Headless Chrome, waits for the page to finish loading by waiting for the network to be idle, and then returns your content.
虽然说 Prerender.io 提供了抓取及缓存服务,但当内容超过 1000 条就要收费,对于中小项目,或许得不偿失;当然,完全可以架设自己的 prerender 服务,只要拥有可控制的服务器即可「操作非常简单」。Github prerender 项目中对于如何使用,已经做了详细说明。为使得内容可以快速给到搜索爬虫,最好可以对内容做缓存(基于 Redis 或 memory-cache 都可以)。有在 Github 开源项目: prerender-spa-server ,如果您有类似需求,克隆之,基于 pm2 做下持久化部署即可。
Prerender 是使用 Headless Chrome 来呈现 HTML 的节点服务器,即在你的服务器,要安装 google chrome
,否则该服务无法正常工作。
搭建 prerender 服务之外,还是要针对项目搜索爬虫,做下额外处理,使之取到预渲染结果。如今,多半 Web 应用都采用 nginx 来配置; 倾城之链 亦是如此;只需在原有配置文件加些判断即可,示例代码如下:
|
|
修改完配置文件后,记得要使用命令 nginx -s reload
重新加载。一切配置妥当,即可发起测试,以验证结果是否符合预期;在终端使用 curl 工具,对目标网址发起访问即可;需要说明的是,网址后面需要添加 ?_escaped_fragment_
标记,主动触发 prerender 渲染服务,以模拟搜索爬虫来源。示例如下:
|
|
前文提及需要安装 google chrome
,对于它的版本,截止 2022 年 11 月,已经升级至 107.*
;您的项目中,对于它的版本,应该尽可能的高些(如果在 70 以下,很有可能出现问题,渲染出的 html 跟实际不相符,莫问吾如何知道💧)。关于在 linux 环境,如何安装新版本的 google chrome
,可参见文章: How to Install Google Chrome Using Terminal on Linux 。主要步骤如下:
|
|
以上,即是「如何 Prerender 为 SPA 做 SEO 优化」的主要内容;这种方案,对于主代码侵入性小,效果跟 SSR 方案也别无二致。虽然说 Google 能够对 SPA 页面通过 JavaScript 抓取,各种因素,效果肯定不如渲染后 HTML;感兴趣的朋友可以尝试;如有疑问,欢请留言评论。
比如可能在腾讯云服务器报如下错误:
2022-11-12T05:02:49.270Z Starting Prerender
2022-11-12T05:02:49.272Z Starting Chrome
2022-11-12T05:02:49.279Z Prerender server accepting requests on port 3000
2022-11-12T05:02:49.292Z Chrome connection closed… restarting Chrome
2022-11-12T05:02:49.293Z Chrome died immediately after restart… stopping Prerender
需要首先检查 Prerender 配置是否正确,配置示例如下:
|
|
假如确定配置的话,尝试使用 sudo
权限再次运行,重新修改 chromeLocation
路径(在腾讯云上遇到过此问题,用此办法得以解决)代码示例如下:
|
|
需要补充说明的是,基于 Prerender 为 SPA 做 SEO 优化,即需要在服务器端 运行 google chrome
,以获得真实渲染呈现的 HTML;如果将这个 Prerender 服务与其他服务混搭与统一服务器,受抓取频率、服务器配置 等影响,或可能引发 CPU 、内存占用过多问题;如有条件,可分开部署。服务一旦搭建,或可能被别有用心之人利用,需要提前防范;在 prerender-spa-server 最新代码中,增加了域名白名单限制。 倾城之链 基于这种方案改善 SEO,通过近一个月观测,效果还可以。以上,大致是全部内容;如果您感兴趣,欢请留言评论。
2022 年 11 月 10 日写于〔深圳福田〕;2022 年 12 月 08 日更新。
倾城之链。
Web 应用、小程序、快应用。
倾城之链,新一代开放型导航平台,为云集全球「优质网站」而生。在这里,您可以便捷的探索互联网中那更广阔的世界,同时还能分享为您所欢喜的网站。
在这个信息化的世界,海量的讯息可能让您不知所措;担心错过她而努力汲取的同时,却可能错过更多;「倾城之链」的存在,即是为您解决这种困扰;在这里,您可以浏览全球各类智慧的结晶;丰富视野的同时,可以标注抑或分享您喜欢的站点,从而为更多挖掘讯息的人提供建设性参考。
在当今这信息化时代,即便是再小的个体,也当有自己的品牌。=然而,独立的才是自己的。「倾城之链」作为一个开放平台,鼓励您创造属于您的个人品牌,烙印着自己的风格,替自己代言、发声。如果您已经这样做了,您可以尽情分享在这里,让更多人知道,且从中受益。当然,您也可以分享出您欢喜的其他有意思站点,让您的见识惠及更多人。
推荐语
,使用户能轻易知道该网站价值;业余独立开发者杨轩帅,目前在国内一家智能手机研发公司做快应用相关;工作内容繁杂,侧重工具型产品的思考与设计,当然也仍会写些代码;出于对高效工作的追求,比较热衷与创造一些好产品 / 工具;相比之下,业余时间写代码会更多一些。
目前仍是一名业余独立开发者
。工作内外,都有很多想法,以及一些痛点;个人非常倾向将其抽象出来,加以设计,用代码实现出一个工具,或是一款产品,为自己和他人都能带来价值;即便只有自己用,也觉得很酷(极客范儿)。
从另一角度回答这个问题,有必要理解下其定义;『独立开发者』,一般指的是“从产品立项、设计、开发、推广、到盈利的闭环全部独立完成的人”。也想有更多志同道合朋友,组成一个团队,聚集起来完成一款产品;但这并不容易,只能是自己事必躬亲,孤军奋战。
因此,目前所开辟的业余项目,包括倾城之链在内,涉及的全部工作,都须自己去完成;在不擅长的领域,难免捉襟见肘,比如 UI 设计、交互设计,运营推广、监控运维等环节。但,始终保持学习,并积极实践,受益匪浅。
那些年,在搭建这个人博客平台 ──「晚晴幽草轩」之时,就有深刻的认识到:当今时代,即便是再小的个体,也当有自己的品牌;这一观点在过去很多文章中,都有极力的去呈现、宣扬。然而,这种影响力毕竟有限,况且对于那些优质品牌,也无法起到实质性作用。要知道,当今时代,最重要莫过于「信息」;对信息的承载,可以说绝大部分是源于网络;而信息在网络中传播,起着绝对作用的则是各类网站;故此,不难得出:对于很多品牌最佳的承载,即「专属网站」;因此,在 2016 年初,就决心自己开发一款产品,为这观点以布道,使那优秀能广传;这即是「倾城之链」得诞生的动机与起源;整体而言呢,可总结为以下几点:
假如您对「倾城」 想要了解更多,可参见早期撰写的文章:
倾城之链支持用户注册、登录,以提交推荐的网站。截至目前,从开发到运营,乃至推广,仍由「@轩帅」完成;主要负责审核推荐网站、重设「主题 & 标签」、编写推荐语、发布倾城周刊等工作(其中大部分精确性工作,比如生成周刊,通过 Node.js 或 Deno 编写脚本来完成)。遇见特别有用的产品,会通过小程序或网址推给同事或朋友。得空,也前往 Product Hunt、阿酷导航等平台,发现更多有价值 Web 应用。
从 2019 您开始,主要推广方式变更为:私域互链(还维护了其他几个网站)、购买 Google ADS(谷歌广告)、社区发推广帖、友情链接、SEO 优化。Google Ads 有两段时间,因为每次点击价格问题折腾蛮多,其他的就是不定期增加投入、修改广告内容描述、以及设计并制作广告素材;关乎广告素材制作,虽留有谷歌自适应广告素材,制作心得分享一文,至今也不得其法,只能不断设计然后交有 Google 机器学习去评判,不理想就撤掉重新再来。社区发帖,有在以下平台尝试:
2019-10
2019-12
2020-04
2020-11
2021.02
2021-03
2021.10
2022.09
2022.10
2022.10
从流量角度来看,社区发帖所能带来的流量有限,不及投放一天 Google 广告;值此市场低迷之际,持续广告投入,也非长久之计。优化 SEO,从用户所需——「搜索行为」来攫取黄金,相比之下,是更为明智的选择;这也是目前主要努力方向之一。
盈「利」:如果特指金钱;目前方式仅有:广告收入(包含:微信公众号、Google AdSense、小程序广告)。实际上,利,也可以是掌握技术、开阔思维、获取信息、获取数据、收获经验、节省时间等等。「倾城」的初衷与维护,以及后续可能的发展,在时间、得到和失败的洗礼中,逐渐变迁,这「盈利方式」也跟随变化,有必要在此,对其过往趋利方式做下总结:
当然,所学到零碎技能,远不止这些;此外,收录千款 Web 应用,从而了解很多效率工具、创意产品,对工作和生活,都有一定积极意义。目前来看,在这可量化的价值中,占比最多的莫过于,由「倾城」间接促进提高的工作薪酬。未来,探索用户对象、构建盈利模式,亦是努力侧重点。
过去这几年的业余时间,很大部分给了娱乐;其余不多的“雨露”,则在产品设计及臆想,倾城运营及推广等方面做了“均沾”;如今回顾,虽说有些决策只是蹉跎了岁月,但成长总是需要过程,也就能够释怀。但以下几个方面,在之后的折腾中,实该避免:
认知
,近期工作总是围绕的主题,五看三定,久思已倦🤮。但,不可否认,做产品须先做好对其认知:服务客户是谁?竞争对手有哪些?如何错位/对位竞争?市场盘子有多大?如何为客户带来价值?盈利模式是什么?未来商业价值何在?…..将这些准确思考并评估清晰,再做长短期规划、可行性分析、实际落地,相信是更棒的选择。互联网从业人员
;至于内容,则依旧保持开放,不乏包括技术、有趣、人文、信息、资源等。蹭热点
式经营没有本质区别;相信越来越多人意识到:税后收入及多种收入来源的必要性(经营资产、远离负债)。就自媒体或独立开发者而言,经营长期性内容、打造专属品牌,综合来看或是更可取的选择。备注:这 五看三定
模型,最早源自 IBM 战略制定方法论;五看分别是:看行业/趋势(行业现状,及未来发展趋势)、看市场/客户(市场规模、发展趋势、市场需求、客户痛点)、看竞争(分析竞争对手、知己知彼)、看自己、看机会(市场空间有多大、战略机会点);根据「五看」得到的输出,在战略制定阶段需要“三定”:定战略控制点(即:竞争优势)、定目标(可量化)、定策略(具体的方案、阶段里程碑、实施策略等)。
倾城之链 是在 2017 年初,源于个人所需,外加技术修炼,而开启的独立项目;无论是之前抑或是以后,我自己始终是她的最为忠实的用户;为此,无论「倾城」是否持续盈利,甚至是账面上的亏损,依旧会持续维护。目前而言,为「倾城」所制定的路线图有如下几条(欢迎各界对倾城
感兴趣的朋友,提出您宝贵的建议):
2022 年 10 月 15 日 ~ 11 月 02 日,写于〔深圳福田〕
豆豆的小说《遥远的救世主》中提到:“有道无术,术尚可求,有术无道,止于术”,深以为然。道是方向,术是法则;认清事物的本源、把握事物之规律,有助于后续更好掌握知识、技能,从而解决需求和问题。故而,本篇分享,主要围绕学习方向、如何学习等方面进行。托尔斯泰曾说:“多么伟大的作家,也不过就是在书写他个人的片面而已”,意识流派相关(技术)分享亦是如此,望朋友们带着思考,辩证看待,吸取觉得有用部分即可。
备注:本文写于 2022/07/10 ~ 2022/07/21〔深圳福田〕;起源于内部分享,首发于最新基于 Wiki.js 搭建的网站:前端异空间| 清风明月阁。
原本并无前端,写的人多了,也便有了这前端;而如今,它或也被唤为:大前端。前端起源初衷,原本只是方便科学家看文档、传论文,而诞生的静态网页(1991)。那么,前端技术现而今可以用来做什么?时至今日,历经近 30 年巨变,前端技术栈,可以涉及的领域越来愈多:
额外可参考链接:
以人为镜,可以明得失;以史为镜,可以知兴替。截止目前, Chrome 浏览器所占份额,在 70% 左右(实际上,如果按 v8
引擎来算,远比这个高很多);了解前端这 20 余年发展历史,可以让你更好地把控这份工作。至少,你会明白,现在从事这项工作,相对是更幸福的,你无需再为兼容 IE 而头疼不已;工具的进化,让你能更「便捷」开展这项工作;时代的发展让(大
)前端开发者,越发显得重要,再无需背负”切图仔”之名。
当然,在新的时代,伴随新老更替,在摒弃兼容那些陈旧的同时,也会迎来各种「新的挑战」;比方说,更多设备(IOT、穿戴设备、VR)将会基于不同应用形态,运行基于「前端技术栈」所编写的产品;就目前而言,除了运行在浏览器外,微信小程序、快应用、桌面应用、 穿戴设备,基于前端技术栈产品,已渗透颇多。
多阅读,多编码,多改进;勤于总结,保持激情 & 好奇 & 专注(孰能生巧)。
学习方向:从前面的历史中,我们可以了解到,一些中间性产物如 IE 浏览器、DreamWeaver、以及 jQuery,Backbone.js 等,已然完成了其历史使命;而我们所要学习的,除了基础知识技能(&必要工具)外,即过度至而今流行技术。如在工作中遇到历史遗留产物,可秉承“「学以致用」”的原则,再去了解。
学习起点:如今的前端,涉及场景已非常之多;其所牵扯的技术栈,更是多不可数;浏览器、编辑器、框架、构建、发布、网络、调试、测试、模块化、优化、工程化、后台…… 乃至近几年陆续流行开来的各类小程序、快应用等,万变不离其宗,都是围绕前端三剑客: HTML,CSS,JavaScript 而扩展开来的存在。其中: HTML 为骨架,CSS 为外貌,JavaScript 为交互。
循序渐进:在后面的诸多课程中,都是以这三项基础而开展。或编写、或框架、或调试、或编译、或工程化。而我们所要完成的大作业,也是跟这三剑客息息相关。可喜的是,前端入门,堪称是最为简单的了:用任何编译工具,新建立一个文件(即便是写一个 index.txt) ,写入些内容后将其保存为 index.html (也可以是 htm),用浏览器打开,就可以看到所呈现出的简单页面。
早年,在一篇博文 如何写一手漂亮的 Vue 中,有写几句随言:
身在程序的江湖,如你是一位即将出征武士,对决于浩瀚无尽的需求大军;那么你不仅需要一副好的体格,还需要一身技艺:而这
软件工程学
(抑或加算法)就好比内功(查克拉);而所使用的各家语言
,则好如武学招式(独孤九剑?);那加以利用的各种工具,当如随身利器(小李飞刀?);那属于自己一套极致开发流程,便是轻功(凌波微步?)……如是斯言,那么作为开发者的你,几技傍身耶?
如今,多年过去,对其中阐述的观点,依旧认可。如果将编程开发工作中,需要用到的「软硬技能」,对标成行走江湖的「文治武功」, 以我目前的思考看来,至少需要:基本功、轻功、内功、谋略策略等。
万丈高楼平地起,扎实的基本功,或可让以后的精修之路,能更加快捷。就这些年经历来看,最重要的基本功当数「学习能力」(自学
);这么谈颇有些抽象,可将其拆分为:问题搜索能力、文档阅读能力、感知分析能力、逻辑思维能力、问题抽象能力等等。这些能力,皆非朝夕可至,需要长期坚持正循环:「学习
、运用
、改进
」。好如肠胃的消化能力,即便通过常年修理那,已经具备,但仍需勤加养护,否则就会导致反噬。如何修炼「自学习能力」,每个人都有自己的方法,在此就不多赘谈。
“首先得是一位程序员,然后才是一位「前端程序员」”。诸如计算机原理、数据结构、网络等大学时代所学的基础知识,也该属于必备基本功。于前端开发而言,额外需要具备的基本功是:
Web 前端三剑客:Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript (前端 Web 开发,是将数据转换为图形界面的实践,供用户使用 HTML,CSS 和 JavaScript 通过数字交互查看数据并与之交互)。——维基百科。
HTML(5) :(超文本标记语言 —— HyperText Markup Language)是构成 Web 世界的基石。
JavaScript(6) :JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
CSS(3) :层叠样式表(Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
温馨提示:良好的基本功,至少需要勤奋好学、端正心态、持之以恒。
在掌握了武学基本功之后,与人切磋,就好比是要解决「各类需求」,合乎时宜的招数/套路(如独孤九剑),显得很重要。Web 网页开发,只借助 Web 前端三剑客,当然可以完成,可在如今时代,势必是低效的选择。选择合适「框架」,诸如 React 、 Vue.js ,来提升开发效率,则为更为明智的选择。
工欲善其事,必先利其器。「工具
」的重要性,实在无须多言;它,从生到死,这期间的每时每刻,它几乎都陪伴着你我。在编程开发中,配备适合自己的工具,犹如上阵杀敌携带的「兵器」,从长期效果看,大有「失之毫厘差之千里」之势;就自己而言,使用 MacOS 开发,远比基于 Windows 系统要高效,而且心情、心境也会好很多。对于工具选取,建议认真对待。前端开发中,所常用工具粗列有:
国漫《秦时明月》中,白凤有句台词,非常喜欢:“轻功不代表武功,但速度决定了你我的距离”。在软件开发中,智能化
、自动化
趋势越发明显,作为程序员如不能尽快适应,其所面临的窘境可想而知;势必会在科技的浪潮中捉襟见肘;所以这更加要求从业者能快准稳的去解决需求,同时保持知识技能的不断 更新
。
而这 快
字,自然是业务技能熟练度多半取决定性作用,但如果能简化、优化的工作流机制,势必锦上添花。而这个话题,所涉及的点线面,非一言可蔽之;这需要在渐进的学习探索中,不断去变化更新。但至少一个当前的准则是:即便不能全自动,至少也须半自动化。
当前阶段,所能给出的建议是:摒除盲忙,予勤于思;善于去发现效率问题,利用抽象思维,剥离精确性部分,借助已有工具或代码脚本,来代替人工手动处理,从而提升整理效率,并形成复用;再之后,坚持、反复坚持。
金庸先生在《倚天屠龙记》中写道:他强由他强,清风拂山岗;他横由他横,明月照大江。他自狠来他自恶,我自一口真气足。在编程开发中,亦是同理;拥有扎实功底,掌握「核心原理」,方能在不断变迁的浪潮中,快速掌握精髓,紧跟时代步伐,从而利于不败之地。
何为编程内功?编程通用性知识,如算法、数据结构、重构、性能优化、面向对象编程、函数式编程等,当然可算为内功。但,可以更宽泛去看,任何工具或框架,在能够熟练使用基础上,深层次
掌握其设计、优劣,这便也是在修炼内功。就拿汽车而言,会开只是掌握了这个代步工具的玩儿法;能清楚知晓其构造,坏了可修,有部件能组装,这个阶段才算是增添了份「技能」。
内功修炼,非朝夕可至。在上述方向上的精修,实际就是内功的提炼,尤其在解决所遇到些问题时,这是自我提升的良机。编程通用性知识,如函数式编程、面向对象编程、设计模式,也可以逐步学习深入;此外,抽空建议读一读《代码大全》、《重构 · 改善既有代码的设计》等著作。
《孙子兵法·谋攻篇》中写道:上兵伐谋,其次伐交,其次伐兵,其下攻城。在编程开发领域,尤其明显── 必要时,再编写必要的代码。程序员,不该只是需求的实现者;更须参与到产品设计阶段,贡献自己所知、所学,以促进产品更有可行性、良好体验。即便到了实现阶段,也该先「三思(设计)后行(编码)」。Elon Musk 在经历生产系统过程中的惨痛教训后,总结五步工作法,与君共勉:
优秀工程师犯的最大错误,就是持续优化一个不该存在的东西。所以我要求所有人走完基于第一性原理的流程,第一步是约束和优化需求,让它不繁琐;第二步是删除冗余的零件或工艺步骤;如果你没有把你删除的东西的 10% 又加回来,那意味着还可以继续删除;第三步是简化和优化的迭代;第四步是加快生产速度,第五步是实现自动化;因为我也经常犯这种顺序性的错误,所以我经常告诫自己这才是正确的顺序。—— Elon Musk
概括性来讲即为:验证你的需求、最少的流程、简化和优化、加速迭代、自动化。对于工作中遇到的诉求,或者接下来所要完成的「大作业」,建议参考黄金圈理论(The Golden Circle):在关注事物之时,更多关注背后的 WHY
, 而不要只看到外部的 WHAT
;并构建持续的迭代循环(Why => How => What),以此驱动:做正确的事 & 正确的做事。当然,真正做到这些,需要涉及到敏捷思维、产品思维、沟通技巧、项目架构等,可循序渐进、次第体悟、不断更善。
JavaScript
库,革命性创新,设计独特、性能出众,简单易用;JavaScript
框架,灵活、高效、易用、成熟;题目:做一款「代办清单/To Do List」类 Web 应用;具体交互设计、UI 设计不限,可参考优秀 Web 或原生应用。
目的:“学以致用”,旨在训练各位学习能力(包含:如何 搜索
、提问
、使用框架、工具、及发现、解决未知问题)和思维能力(包含产品思维、敏捷思维、逻辑思维等)。
时间:直至本次培训结束;有效时间,大致三个周。
技术栈:不限;框架可以是 React、Vue.js 或 Web Components;构建工具可选 Vite、Webpack 或 rollup.js。
主要方向 | 具体说明 | 评分占比 | 备注说明 |
---|---|---|---|
项目、代码规范 | 语义化命名、简洁代码设计等,需符合业界通用规范 | 20% | 前端项目开发规范意见 - 项目规范 |
组件封装设计 | 合理的设计组件,达到易读、易维护、易扩展之目标 | 20% | 组件设计原则 Black Pearl |
功能有用且丰富 | 覆盖基本功能,并能在此基础上附加有价值的创新 | 20% | 具体可参见 Trello、TickTick 等应用 |
UI、交互设计 | 设计良好,且适配 PC、Pad、Phone 等多端设备 | 20% | 通过 CSS,以及适当的 DOM 区分即可 |
代码提交规范 | 按每个功能点进行提交,Commit Message 写清晰 | 10% | 前端项目开发规范意见 - 代码规范 |
提前完成交付 | 本作业相对较为简单,不应花费太多时间,至少保证如期完成 | 10% | 合理分配时间,建议先构思产品设计、探究如何实现、再动手编码 |
备注:原文首发于:浅谈关于「函数式编程」的理解 | 宜想悠然亭,@2022 年 05 月 30 日。
非函数式的示例代码如下:
|
|
你可能会觉得这个例子太过普通。但,这就是函数式编程的准则:不依赖于外部的数据,而且也不改变外部数据的值,而是返回一个新的值给你。
再看一段复杂一点,却较为 实用的代码示例 :
|
|
可以使用 throttle
来节流函数,如:requestSearchFunc;这个技术其实就是 Currying 技术(把一个函数的多个参数分解成多个函数, 然后把函数多层封装起来,每层函数都返回一个函数去接收下一个参数这样,可以简化函数的多个参数)。从这个技术上,你可能体会到函数式编程的理念:把函数当成变量来用,关注于描述问题而不是怎么实现,这样可以让代码更易读。
过程式编程,主要要采取过程调用,或函数调用的方式来进行流程控制;它主要关注:一步一步地解决问题。这是完全有效的编码方式,但当您希望应用程序扩展时,它存在许多缺点。而函数式编程( Functional Programming)关注的是:描述要做什么,而不是如何做(describe what to do, rather than how to do it)。
举例来说,对于一个英文名数组,需要将其中短横线命名,转化为大驼峰格式。基于传统过程式编程,可能你不会想太多,直接将想法用代码来表达出来,临时变量、循环语句,用的飞起:
|
|
这是可以达成目标的答案,它完全面向过程;虽然在编码时候,能够将想法淋漓尽致表现出来。但对于阅读的人,十分不够友好。因为这中间夹杂了复杂的逻辑,充斥了大量临时变量、循环、状态变化等等;通常您需要:从头读到尾才知道它具体做了什么,而且一旦出问题,很难定位。当然,你也可以将如上代码,拆分成几个函数:
|
|
如此一来,阅读代码时,需要考虑的上下文少了许多,也就更容易。不像第一个示例,如果没有合理的注释说明,你还需要花些时间来理解。而把代码逻辑封装成了函数后,就相当于:给每个相对独立的程序逻辑取了个名字,于是代码成了自解释的。幸好,在这份代码中,函数间调用,没有依赖共享的变量,否则将会更加复杂。但,仍是充斥了临时变量、循环,增加代码量的同时,也加大了理解之难度。
如果基于函数式编程思想,那会是怎样的代码呢?
|
|
如上代码(有借助 ramda ——「实用的函数式 JavaScript 工具库」来实现),虽依然把程序的逻辑分成了函数,不过这些函数都是 Functional 的。因为它们有三个症状:
从这个编程思路,可以清晰看出,函数式编程的思维过程是完全不同的,它的着眼点是函数,而不是过程,它强调的是:通过函数的组合、变换去解决问题,而不是通过写什么样的语句去解决问题;当你的代码越来越多的时候,这种函数的拆分和组合,就会产生出更加强大的力量。
函数式编程 ,或称函数程序设计、泛函编程(英语:Functional Programming),是一种编程范式,它将电脑运算视为函数运算,并且避免使用程序状态以及易变对象。比起指令式编程,函数式编程更加强调程序执行的结果,而非执行的过程;倡导利用若干简单的执行单元,让计算结果不断渐进,逐层推导复杂的运算,而不是设计一个复杂的执行过程。
在函数式编程中,函数是头等对象,意思是说一个函数,既可以作为其它函数的输入参数值,也可以从函数中返回值,被修改或者被分配给一个变量。
不仅最古老的函数式语言 Lisp 重获青春,而且新的函数式语言层出不穷,比如 Erlang、clojure、Scala、F#等等。目前最当红的 Python、Ruby、Javascript,对函数式编程的支持都很强,就连老牌的面向对象的 Java、面向过程的 PHP,都忙不迭地加入对匿名函数的支持。越来越多的迹象表明,函数式编程已经不再是学术界的最爱,开始大踏步地在业界投入实用。
也许继”面向对象编程”之后,”函数式编程”会成为下一个编程的主流范式(paradigm)。未来的程序员恐怕或多或少都必须懂一点。—— 函数式编程初探 @阮一峰 (2012 年)
函数,即是一种描述集合和集合之间的转换关系,输入通过函数,都会返回有且只有一个输出值。函数实际上是一个关系,或者说成一种映射,而这种映射关系是可 组合
的,当知道一个函数的输出类型,可以匹配另一个函数的输入,那他们就可以进行组合。如上述代码中提及的 convertName
函数。
在编程世界中,需要处理的逻辑,其实只有“数据”和“关系”,而关系就是 函数
。一旦映射关系(函数)找到了,问题即能迎刃而解;剩下的事情,就是让数据通过这种关系,然后转换成另一个数据而已。
所谓 “第一等公民” (First Class),指的是函数与其他数据类型一样,处于平等地位,可以赋值给其他变量,也可以作为参数,传入另一个函数,或者作为别的函数的返回值。如上文中代码:
|
|
无状态(Statelessness)和数据不可变(Immutable data),这是函数式编程的核心概念:
为了实现这个目标,函数式编程提出函数应该具备的特性:没有副作用和纯函数。
所谓”副作用”(side effect),指的是函数内部与外部互动(最典型的情况,就是修改全局变量的值),产生运算以外的其他结果。
函数式编程强调没有”副作用”,意味着函数要保持独立,所有功能就是返回一个新的值,没有其他行为,尤其是不得修改外部变量的值。
引用透明(Referential transparency),指的是函数的运行不依赖于外部变量或”状态”,只依赖于输入的参数,任何时候只要参数相同,引用函数所得到的返回值总是相同的。
有了前面的第三点和第四点,这点是很显然的。其他类型的语言,函数的返回值往往与系统状态有关,不同的状态之下,返回值是不一样的。这就叫”引用不透明”,很不利于观察和理解程序的行为。
所谓惰性执行(Lazy Evaluation),指的是函数只在需要的时候执行,即:不产生无意义的中间变量。像上面👆的例子,函数式编程跟命令式编程最大的区别就在于:几乎没有中间变量,它从头到尾都在写函数,只有在最后的时候才通过调用 convertName
产生实际的结果。
迭代在函数式语言中常用递归来完成,用递归来实现控制流程的机制,是函数式编程的一个非常重要的特点。我想您当然知道 递归
的害处,那就是如果递归很深的话,stack 受不了,并会导致性能大幅度下降。所以,我们使用尾递归优化技术——每次递归时都会重用 stack,这样一来能够提升性能。尾递归的实现,其实是基于编译器的识别和优化的,编译器发现一个函数是尾递归,就会把它实现为与命令式编程中的迭代差不多的汇编码。
pipe
与 compose
的共同点是:都返回“组合函数”,区别则是执行的顺序不同,前者是从左向右执行,后者则是从右向左执行。正如您在函数式编程中看到的,它希望使用小的(理想情况下是纯函数)函数来解决问题。这种方法也非常具有可 扩展性
,并且函数可以 重用
。
没有更好和更坏的范式。有经验的开发人员,可以看到每种范式的优点,并为给定的问题选择相对更合适的。过程式编程,并不是说你不能使用函数;函数式编程也不会阻止你使用“类”。这些范式,只是以一种随代码增长而有益的方式,来帮助解决问题。
Obsidian 是一个强大的知识库、一款好用的笔记应用程序,位于纯文本
Markdown
文件的本地文件夹之上。其目标是:永远成为你第二个大脑。人脑是非线性的:人们总是从一个想法跳到另一个想法。你的第二个大脑应该同样工作。在 Obsidian 中,建立和跟随连接 是无摩擦的。像园丁一样照顾你的笔记;在一天结束时,坐下来惊叹于您自己的知识图谱。── 出自 倾城之链 | Obsidian 。
Obsidian ,它不仅是极其好用的文本编辑工具,而且还是一款强大的知识库;但,在这里就不对知识库作探讨,主要就其极致的文本编辑体验,结合自己短暂的实践体验,来跟朋友们分享下 Obsidian 的优势:
要着重称赞的就是 Obsidian 的插件,这在 Markdown 编辑器工具中是少见的。首先,这种机制本身就很赞,不将所有功能,都集成于应用本身,而按需给予,善莫如是,使其能在轻量与强大中平衡;其次,有了这种机制,即能允许用户介入,参与贡献,无疑是为产品功能丰富,提供了绝佳的途径。
备注:Obsidian 插件,安装与使用,都非常方便;前往 Obsidian Plugins,检索您想要的插件;如果您已安装并打开 Obsidian,点击 Open in Obsidian
,即可快速在 Obsidian 中,打开该插件;点击 install
安装之后,再点击 enable
即可启用该插件(如下截图)。对于有需要按键才能作用的插件,您还可以修改快捷键
以及其他设置参数。
下面,跟大家分享些个人所喜欢的插件:
Add improved navigation, formatting, and manipulation to markdown tables in Obsidian
Markdown 的表格语法比在 Word 中插入表格还要麻烦,一旦想要增改某个内容,更是灾难。该插件则大大简化了表格输入的流程。
要创建表格,请创建一个 |
字 符,然后键入表格的第一个标题并按 Tab
,就会触发插件的自动补全语法。之后通过 Tab
/ Shift + Tab
来在表格之间移动光标,通过 Enter
完成输入;顷刻之间,就能写完您想要的表格,实在是完美。
如果您想了解更多,可参见 Github 源码: tgrosinger/advanced-tables-obsidian 。
为 Obsidian 笔记加上「盘古之白」,排版强迫症者的福音。 | A small plugin aims to add space between Chinese Characters and English Alphabet, and it is a boon for typographically compulsive people.
这个小插件,旨在增加汉字和英文字母之间,添加空格,使得整个排版更加专业且美观;这对于排版强迫症的人来说,是一个福音(我个人非常喜欢,先前是借助 Prettier 或其他工具,来实现)。
如果你想了解更多,可以参见 Github 源码: Obsidian Pangu Plugin 。
A plugin for Obsidian which allows syntax highlighting for code blocks in the editor.
这对于程序员(软件开发)来讲,非常有价值;它能让编辑界面的代码,页面的元数据都有高亮效果;而且支持的格式极多,如 xml
、json
、ts
、js
、html
、css
、python
、bash
等等。值得一提的是,在代码区域,可以放心使用 Tab
按键,无需担心会清空你选中的代码,其效果跟在代码编辑器中是一致的,体验极佳。
如果你想了解更多,可以参见 Github 源码: Editor Syntax Highlight Obsidian Plugin 。
Create markdown-backed Kanban boards in Obsidian
Kanban
,这款插件可以为 Obsidian 增加看板模块;让你可以使用看板,来管理任务或笔记。它有两种看板创建方式:使用命令添加新的看板,也可以使用右键菜单创建;而且可以在 Markdown 和看板中,随时切换,如果你想要用 Obsidian 管理日常任务的话,它是非常好的插件。
关于如何创建和使用看板,可参见: 创建看板 ;最简单的方式是:右键单击文件夹,并选择 New Kanban board
。值得一提的是,Obsidian 的看板功能,其使用体验,在笔者看来要比 Giuhub 、 Gitlab 、 Trello 要用很多,强烈推荐。
如果你想了解更多,可以参见 Github 源码: Advanced Tables for Obsidian 。
Display the outline of current file or linked pane
Outline 是一款大纲插件,可以根据标题自动为 Obsidian 文档生成目录大纲,可以快速预览所有标题,也可以用来快速跳转到指定位置,如果你经常写长文章的话会非常有用,Outline 是官方插件,到核心插件中启用即可自动开启。具体操作为:打开设置(command + ,
) => Core Plugin => 发起检索 Outline
=> 选择开启。
This repository contains a plugin for Obsidian for viewing Markdown notes as Mind Maps using Markmap.
Mind Map 是一款 思维导图
插件,它可以为你的 Markdown 文本转换为思维导图,可以更清晰地查看文章的结构和内容,还支持一些简单的操作,比如放大缩小、拖拽、收起展开节点等,你还可以一键复制思维导图图片,分享或保存到其他位置。
如果你想了解更多,可以参见 Github 源码: Obsidian Mind Map 。
Insert links (URLs) into a selected text “notion-style” using regular
Ctrl/Cmd + V
当想要在鼠标选中的单词上插入 URL 时,基于 Markdown 语法,并不是很方便;此时你可以安装 Paste URL into selection
这款插件;启用该插件后,只需要选中文字再 Cmd + V
(or Ctrl V
Windows 系统) 键,就可以直接添加链接,比富文本编辑器中操作,还要方便许多。
如果你想了解更多,可以参见 Github 源码: Paste URL into selection 。
Consolidate checklists across all files into a single view
Checklist 是一款待办任务增强插件,它可以为 Obsidian 的侧边栏增加一个任务栏,你可以在该栏目下查看到所有笔记中的待办任务,可以快速跳转到任务的位置,也可以直接在任务栏上勾选完成任务。其用法如下:
#todo
将显示在此侧边栏中;- [ ]
-> - [x]
)或单击侧栏中的清单项目来完成清单项目,这将为您更新 .md
文件;如果你想了解更多,可以参见 Github 源码: obsidian-checklist-plugin 。
This plugin for Obsidian creates a simple Calendar view for visualizing and navigating between your daily notes.
Calendar 是一款为增强 Daily notes 而制作的日历插件,它可以在侧边栏上增加日历模块,你可以用它来快速跳转到特定时间的每日笔记,而且你还可以用它来为没有每日笔记的日期创建笔记,可以为之前的日期创建,也可以创建未来的笔记。其用法如下:
在设置菜单中启用插件后,您应该会看到日历视图出现在右侧边栏中。该插件会读取您的每日笔记设置,以了解您的日期格式、每日笔记模板的位置以及它创建的新每日笔记的位置。
如果你想了解更多,可以参见 Github 源码:obsidian-calendar-plugin。
如今,Obsidian 插件市场,所蕴含的宝藏已十分丰富,大凡能想到优化点,都已有人贡献出良好的设计方案。如果您有自己独特诉求,完全可以基于Obsidian,定制属于自己的插件,只需阅读相关文档,懂些 JavaScript 编程基础即可。具体可参见文章:为 Obsidian.md 创建插件 或 How to create your own Obsidian Plugin。
窃以为,好的工具与强大工具,其最大区别在于:前者会让使用者觉得自己跟软件本身都很强;而后者只会让使用者觉得工具很强。Obsidian 就属于前者,它能让用户 0 配置,即能快速上手使用;又能很好支持愿意折腾的朋友,在上面各种折腾,附加额外功能,实在是值得称赞。如今,只使用了没几天,尚有更多玩法儿,等待探索;欢迎各路朋友,分享您宝贵的建议和意见。
原文首发于个人最新博客:地表最强 Markdown 文本编辑工具——Obsidian | 悠然宜想亭。
根据先前的些许经验,要使得本地全文检索,拥有良好体验,至少要包含以下几个方面:
关键字
,能快速、准确检索到结果;检索关键字
,最好可以按照匹配程度高低来排序;分词
搜搜,增加 -
、\*
等匹配方式(一般来讲,满足以上三条已足够);下面,与大家分享下,如何通过简洁操作,做到以上三条:
基于类 Gitbook 默认方案来创建索引。如快应用文档,其数据来源于:search_plus_index.json;在本地编译 md 文件时,将所有其内容纯文本化,作为数据源,并将其他信息如路径、标题、关键字等,一并存储于该 JSON 文件;发起关键字检索时,只需读取该 json 内容,并逐个遍历;将存有关键字的项 push 至结果数组,从而展示给用户就好。
|
|
|
|
基于 Lunr.js (A bit like Solr, but much smaller and not as bright.)结合 nodejieba(”结巴”中文分词的 Node.js 版本),来实现中文全文搜索。
Lunr.js is a small, full-text search library for use in the browser. It indexes JSON documents and provides a simple search interface for retrieving documents that best match text queries.
Lunr.js 是一个用于浏览器的小型全文搜索库。它索引 JSON 文档并提供一个简单的搜索界面,用于检索与文本查询最匹配的文档。它具有以下功能特征:
基本原理:Lunr 将字符串拆分为单词
标记,然后经过一系列处理(score
计算分数、metadata
元数据),最终组装成为结果对象数组;关于这块儿详细信息,可参见 Lunr.js 核心概念;值得一提的是,Lunr 不能很好支持中文,因此对于中文分析,有借助 nodejieba
做了处理。具体创建索引的过程,参见如下代码(基于 Gatsbyjs 的实现):
|
|
|
|
|
|
|
|
先前基于 Gatsbyjs 搭建一个静态网站,上文中提及的代码,完整版可参见:blog.nicelinks.site | search。在线示例:倾城周刊、快应用消息中心。
标题是广告的第一行,最多可以包含 30 个字符。最多可以添加 3 个标题,这些标题将与其他素材资源组合以生成广告。在实际显示时,标题的长度取决于展示广告的网站。如果需要省略内容,则会以省略号结尾。
最多可添加 5 个标题。以上是 Google 对标题的要求。下面是我对倾城之链广告标题的探索:
Google Ads 素材,其尺寸要求比例为:1.91
: 1
;内容,不能用不太相关的(如单纯的美女照片);格式,无要求(png
、jpeg
、jpg
都可以,想必 Google 本身也会对上传的素材,另做处理)。
考虑没有系统学习过设计,另外也缺乏相应灵感;在制作过程中,有尝试用了多款图片编辑器软件:
Google Ads,会针对性给出建议(有明确的优化得分),包括出价和预算、广告与附加信息等。这个「广告与附加信息」中,就含有针对素材资源的建议;当 Google “发现”您的某些自适应型展示广告的广告效力低于“极佳”水平 ,就会给出建议;根据建议就可以把不理想的素材撤掉,下面是近两月业余时间,所制作的一些图;有划分为理想素材和不理想素材(根据 Google Ads 的建议):
自适应型展示广告是一种基于素材资源的广告,这意味着您可以通过上传各种素材资源(如图片、标题文字、徽标和广告内容描述)来制作此类广告,而且 Google 会通过这些素材资源的组合来生成广告,以便在展示时提供最佳用户体验。
当然,Google 广告引擎本身会有学习的过程,在不断投递过程中,素材是否合适,也是在持续变化;因此下面提及的状态,也会有所更新(本文的描述,却不会持续跟进,望周知)。
Google 展示广告可投放到超过 300 万个网站和超过 65 万款应用中,并可在 Gmail 和 YouTube 等 Google 产品和服务中展示。本指南将以自适应型展示广告为重点,为您讲解如何制作展示广告的素材资源。
自适应型展示广告是一种基于素材资源的广告。素材资源就是广告的组成部分,例如标题、广告内容描述、图片或徽标。在制作基于素材资源的广告时,您需要提供标题、广告内容描述、图片和徽标。Google 会运用机器学习算法在整个网络上用无数种排列方式对这些素材资源进行组合,并会持续优化,以便获得更好的效果。
如何制作谷歌自适应广告素材,在 Google 广告素材最佳做法指南中,已经给出了较为详细的说明,大体总结如下:
图片是自适应型展示广告中最重要的元素。您可以上传自己的图片,也可以从 Google 图片库中选择。制作自适应型展示广告时,您最多可以上传 15 张图片,可使用的图片宽高比有 2 种,分别为 1.91:1(横向)和 1:1(方形)。最少要上传 2 张图片,其中至少有 1 张是宽高比为 1.91:1 的横向图片。
根据广告版式,上传的图片可能会以不同的尺寸显示。系统会调整图片的大小,以适应特定的广告尺寸。
图片有助于用户了解您的商家、产品和品牌,是广告取得理想效果的关键所在。
为了取得最理想的效果,请避免使用模糊、歪斜、上下颠倒、不清晰、带有边框、反色或过度使用滤镜的图片。
请勿在图片上方叠加徽标,因为某些广告版式可能本来就会加徽标。不过,如果徽标已融入到图像中,那便没有问题。
避免在图片上方插入文字。请注意,素材资源组合在一起后,您插入的文字可能会显得重复,例如当叠加的文字与标题非常相似的时候。另外,在尺寸较小的广告中,叠加文字会难以辨认。不过,如果文字是自然嵌入的或已融入到图片中,那便没有问题。例如,照片中出现的文字标志就属于自然嵌入的文字。
提供按钮(承诺不存在的功能,例如:“播放”、“下载”或“关闭”)属于违反 Google Ads 政策的行为。
请使用单一图片。不建议使用拼贴的图片。
请避免在数字合成背景(包括全白背景)上展示产品,而应使用有实景和自然阴影与光线的优质照片。
除了上述 Google 指南中提及的做法外,需明确:素材是否合适,也是在持续变化;针对素材、标题,或许在某个时间段内,是理想甚至最佳的,但这并非永恒如此;因此,需要间断性查看 Google Ads 建议(优化得分),从而及时做出调整。
原文首发于:谷歌自适应广告素材,制作心得分享 | 悠然宜想亭。
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界。此周刊,将汇聚过去一周倾城所收录的内容,以飨同好;欢迎推荐或自荐(仅限有独立域名的网站,可以是二级域名)。您如果要了解收录要求,请参见关于倾城。
备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
Autocomplete for your terminal.
推荐语:Fig 将 VSCode 样式的可视化自动完成添加到您的终端,无需任何配置,可以让您的操作更加快捷。支持数百个 CLI 工具,当您键入时,Fig 会在您现有的 macOS 终端中弹出子命令、选项和上下文相关的参数;有下载安装初步尝试了下,实在是丝滑,提示也非常贴合所想。Fig 适用于 iTerm、Hyper、VSCode 和 macOS 终端,具有以下功能特性:
Fig 的完成都是开源的,并由社区的贡献提供支持。更值得称赞的是,使用 Fig.js API,可构建您自己的应用程序,详情可参见:Fig 文档。如果您也是终端操作爱好者,那么 Fig 即将成为您的最爱工具。
── 出自倾城之链 - Fig
关键字:美叶, UI 设计, 视觉设计, APP 截图, 应用设计, 插画, 设计师, 创意, 原创, 平面设计, UI, UX, UE, GUI, 截屏, 设计网站, 设计原图, 网页设计, 图标, H5, 设计, 灵感
美叶,为设计师,创意人提供有价值的设计参考。灵感采集,优质素材获取,时刻 Follow 最新流行设计趋势。
推荐语:美叶,为设计师,创意人提供有价值的设计参考,让灵感获取变轻松。美叶目前有上线应用墙(精美应用截屏推荐)、读课学堂(设计师入门进阶课堂)、标志库(优秀标志分类展示)、插画师(优秀插画师及作品推荐)等版块儿。
── 出自倾城之链 - 美叶
Discover trending open-source projects and their alternatives.
推荐语:LibHunt,发现流行的开源项目和它们的替代品。其目标是成为开发者寻找库和开源项目以完成其工作的首选网站。它监测 Reddit、HackerNews 和 Dev.to 上发布的所有信息(几乎是实时的)。然后,如果一个开源资源库被提及,我们就会记录下来,并利用它来编制流行和类似项目的清单。
@StanBright:“作为一个拥有 15 年以上经验的软件工程师,我经历了许多编程语言,我注意到每一种新语言都有类似的需求模式。总的来说,LibHunt 是满足我自己需求的一个体现,它的想法是让它对更多的软件开发者同伴有用。我的想法是,它可以有足够的帮助和普及,这样我就可以从中赚到足够的钱(通过赞助)来支持和改进它,直到可预见的几十年“。
如果您对编程语言的流行度感兴趣,您应该查看最流行的编程语言的 LibHunt 索引。
── 出自倾城之链 - LibHunt - Trending open-source projects and their alternatives
The Simple and Definitive hand-crafted SVG Icons Library.
推荐语:Iconoir,简单而权威的手工制作的 SVG 图标库;它是最大的开源库之一,目前拥有 1000 多个 SVG 图标,设计在 24x24 像素的网格上。您可以检索想要的图标,下载即可直接使用,当然也可以通过安装 npm 包来使用;没有高级图标,没有新闻通讯,不需要电子邮件注册。
── 出自倾城之链 - Iconoir | Free Icons
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
最好的人生是什么样呢?没钱人追求富贵,有钱人追求素淡。没事业拼命奋斗,有事业总想退出。每个人想要的东西都不同。但历经沧桑后你会发现,真正好的人生,无非就是一家三口,父母双全,工作不累,赚钱不少,生活安稳,岁月静好。平平安安过好每一天,就是最好的人生。── 网络 · 佚名
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭。是造物者之无尽藏也,而吾与子之所共适。
推荐语:清风明月阁,基于 Wiki 搭建的 Web 应用,名字取自:“惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色”。年与时驰,意与岁去,念其功能之丰盈,特在此:记余之所造,录吾之所闻,享愚之所学,载我之随感…..人生漫短,白首时回顾,堪凭这些许文字以自怜。
初衷:早先搭建的十余个网站,有些实属为体验「网站构建工具」而起;岁月蹉跎中折腾多了,那种兴之所至、行之所往的冲动,早已隐去;而今,却又“重蹈覆辙”,实在是感念 Wiki.js 之强大,一时为其蕴藏的「哲思」所着迷;一直以来呢,也在探索文档、Wiki 最佳撰写工具;而前段时间,又恰巧购得云服务器一台;这好奇的念头,与适宜的环境,结合的恰到好处,于是,便有了“清风明月阁”。
── 出自倾城之链 - 清风明月阁
关键字:Motion Capture, 3D Animation, AI Animation, AI Motion Capture, Mocap, Animation Software, Motion Tracking
Plask is a browser-based AI motion capture tool and animation editor. With any camera, creators can digitize their movements, automate animation work, collaborate with colleagues, and export them all on one platform.
推荐语:Plask,一款基于浏览器的免费 AI 动作捕捉和动画工具。只需在网络摄像头上录制视频。智能 AI 将为您捕捉动作,让动画变得轻而易举。使用 Plask 基于浏览器的编辑工具编辑您的动画,只需一处即可找到所有必要工具,让您的动画完美无缺。Plask 支持您直接在浏览器中共享、查看和协作。使用 Plask 在浏览器中管理您的想法和项目。无论您是单独工作还是与团队合作,它都可以无缝集成到您的工作流程中。它支持大多数专业文件格式,包括 GLB、FBX、BVH 等。每个人的动画,为每个人服务,使用 Plask
,专业质量的工具唾手可得!
── 出自倾城之链 - Plask
SVG Wave is a minimal svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs.
推荐语:Svg Wave,一个免费且漂亮的渐变 SVG 波形图生成器。它支持您自由的对波浪 🌊 进行调整,如波浪的高度、图层数量、弯曲度,颜色等等,也支持重制、反转等操作,以便您可以生成自己满意的图形;除此外,Svg Wave 还支持生成波浪动画(只适用于 Chrome 浏览器);它可以导出 SVG
、PNG
两种格式。另外值得一提的是,Svg Wave 这个网站设计的干净、清爽,看着令人颇为舒适。
── 出自倾城之链 - Svg Wave - A free & beautiful gradient SVG wave Generator.
Download Free Stock Video Footage, Stock Music & Premiere Pro Templates for your next video editing project. All assets can be downloaded for free!
推荐语:Mixkit,为您的下一个视频项目提供很棒的免费资源,如:视频剪辑、库存音乐(100 多个免费的 Ambient Stock 音乐曲目。从梦幻般的背景音乐到大气、郁郁葱葱的器乐,用我们的环境音乐曲目之一设定完美的基调。)、声音效果和视频模板。他们精心策划了一些世界上最有才华的创作者的剪辑、曲调和模板,所有内容都是免费提供的。Mixkit 的免费图书馆正在快速增长,每周都有新的视频资产被添加进来,你总能找到完美的高质量项目来下载,并在你的项目中使用。您可以根据需要下载视频、声音和模板,无需署名或注册。如果您从事或有意愿从事视频相关内容创造,Mixkit 是您非常值得关注的网站。
── 出自倾城之链 - Mixkit - Awesome free assets for your next video project
标签:JavaScript
· Framework
· 评论系统
一款基于 Valine 衍生的简洁、安全的评论系统。
推荐语:Waline,一款基于 Valine 衍生的简洁、安全的评论系统。可以将 Waline 等价成 With backend Valine。它具有以下功能特征:
除了以上特征外,Waline 已经完成非常多优质功能,诸如:邮件( 微信、 QQ、Telegram)通知,评论管理、评论删除、登录支持、Akismet、文章统计、多语言同步、基于 IP 的发布评论频率限制、 IP 黑名单、 重复内容检测、置顶评论、其它数据库支持(已支持 LeanCloud, MySQL, MongoDB, SQLite, PostgreSQL, CloudBase, Deta, 轻服务, GitHub)等等。最值得一提的是,它支持独立部署,您可以基于 Docker(docker-compose 或 Node),部署在自己的服务器上。
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
我曾七次鄙视自己的灵魂: 第一次,当它本可进取时,却故作谦卑; 第二次,当它在空虚时,用爱欲来填充; 第三次,在困难和容易之间,它选择了容易; 第四次,它犯了错,却借由别人也会犯错来宽慰自己; 第五次,它自由软弱,却把它认为是生命的坚韧; 第六次,当它鄙夷一张丑恶的嘴脸时,却不知那正是自己面具中的一副; 第七次,它侧身于生活的污泥中,虽不甘心,却又畏首畏尾。 ── 黎巴嫩裔美国诗人、画家 · 纪伯伦《我曾七次鄙视自己的灵魂》
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
早先搭建的十余个网站,有些实属为体验「网站构建工具」而起;岁月蹉跎中折腾多了,那种兴之所至、行之所往的冲动,早已隐去;而今,却又“重蹈覆辙”,实在是感念 Wiki.js 之强大,一时为其蕴藏的「哲思」所着迷;一直以来呢,也在探索文档、Wiki 最佳撰写工具;而前段时间,又恰巧购得云服务器一台;这好奇的念头,与适宜的环境,结合的恰到好处,于是,便有了“清风明月阁”。
给网站命名,向来谨慎,却总也是“因循守旧”,大多没有新意;从最早 2014 年的晚晴幽草轩,到今年(2021)的悠然宜想亭,格式上,都是一个调子:截取喜欢的诗词,结合建筑名为后缀。那些年喜欢李商隐那句:“天意怜幽草,人间重晚晴”,便有了最初的两个网站,这在晚晴幽草轩,天意人间舫一文中有过记载。
多年来,深(身)陷代码中,久未涉足文学诗词,按照如上惯例,为此站取名时,为求其名能“达意”且兼具雅致,好一阵搜肠刮肚;亭台楼阁、轩榭廊舫,殿庭苑斋之中,已用亭、轩、舫、苑,又因此站基于 Wiki.js 所建,在当时或者如今回头看,择以「阁」字,这存在必然性。而在诗词的甄选中,之处有意取李太白的“若非群玉山头见,会向瑶池月下逢”中「群玉」、「瑶池」;虽说雅致,但究竟与心境不能完全契合;斟酌时,须臾之间,灵光乍现,脑海浮现苏子瞻《前赤壁赋》中一段经典:
“逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也,而又何羡乎!且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭。是造物者之无尽藏也,而吾与子之所共适。”
其雅致、其意境、其哲思,莫有与心之所愿更契合者,于是立即便定下了,名曰:清风明月阁;工作生活中,自觉总也是”一肚子不合时宜“,今为这网站命此名,怕是为数不多的一次“合乎时宜”;感谢苏子赐名!
漫画《四月一日灵异事件簿》中,有写道:“思想、语言是会束缚人的东西,不但自己的会束缚自己,别人的也会束缚自己”,对此深表认同:愚顽的脑袋里如再被束缚,接收到任何与之相悖的理念,都是引发愤怒的毒物。这个时代,关乎“求同存异”,于虚拟网络中或可“被存在”;而生活的现实中,却是难以“存活”。这些年,关乎“思想的表达、语言的阐述”,所引发的后果,远胜海啸山洪,且是司空见惯;即便朋友恋人间的好心建议(或提议),轻起口角,重则仇恨;如此往复,伤痕累累,乃至近乎“四海无人对夕阳”的悲苦……于是乎,痛定思痛后,终可懂得海明威
为何如此说:
我们花了两年学会说话,却要花上六十年来学会闭嘴。大多数时候,我们说得越多,彼此的距离却越远,矛盾也越多。在沟通中,大多数人总是急于表达自己,一吐为快,却一点也不懂对方。两年学说话,一生学闭嘴。懂与不懂,不多说。心乱心静,慢慢说。若真没话,就别说。── 曼妙句子。
耳聪可以闻世声,目明堪能睹世事,这是与生俱来的本领;人间真实,纷呈精彩,阴阳相生,优劣混合;犹为凡夫俗子,免不了阐述下自己看法,一抒心中块垒,也为“两肩抬道义”;倘若付与人当面说,恐引纷争,实非余愿;“夫唯不争,故天下莫能与之争”,于是乎,在自建平台,以文字形式,承载所学、所思、所感、所悟,或是最佳之选。明朝文学家、画家陈继儒,在《小窗幽记》中写道:
带雨有时种竹,关门无事锄花;拈笔闲删旧句,汲泉几试新茶。余尝净一室,置一几,陈几种快意书,放一本旧法帖;古鼎焚香,素麈挥尘,意思小倦,暂休竹榻。饷时而起,则啜苦茗,信手写汉书几行,随意观古画数幅。心目间,觉洒洒灵空,面上俗尘,当亦扑去三寸。但看花开落,不言人是非。
其中所描绘心性境界,实在令人殷羡,而这也正是所追求的完美。至于“汉书几行、平思几许”,置于这人间网络中,赠予有缘人;期之如“江上之清风,山间之明月”,与人无害,偶可参考,吾愿足矣。
2021 年 12 月末,记之于深圳。
]]>备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界。倾城博客,旨在汇聚倾城之链所收录的内容,以博文的形式承载,提供检索功能,且具备极致丝滑访问体验,以飨同好者。
推荐语:倾城博客,基于 GatsbyJS 所搭建的网站,汇聚倾城之链所收录的内容,以文章的形式承载,并提供检索功能,提供给广大用户。倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。关于倾城之链更多详情,可参见云集优站,尽在「倾城之链」、云集优站,尽在「倾城之链」其二等文章阐述。
── 出自倾城之链 - 倾城博客
关键字:upscale, upscale.media, let’s enhance, 2x image, 2x upscale, 2x upscale image, 4x image, 4x image upscale, 4x image, enhance image, enhance photo, higher resolution, higher resolution image, online upscale, online upscale image, low quality to high quality, high quality image, enhance picture, enhance resolution, image quality enhancer, image resolution enha
Upscale your image to 2x or 4x without losing any textures or details with our AI tool. Use our super-resolution tool and bring new life to your images.
推荐语:AI Image Upscaler,免费的(永久) AI 工具,可将图像分辨率提高 4 倍(big),而不会降低质量,并为您的所有个人和业务需求做好准备。其使用非常方便,上传、拖放图像或粘贴 URL,即可开始;需点击几下,就能基于强大的 AI 技术升级和增强您的图像;它支持 png、jpeg、jpg、webp 等格式。值得一提的是,它有以下独特的功能:
Upscale.media 适合所有人:
轻松增强低质量图像,为其他创意任务节省时间;从绘画到数字艺术,从肖像到风景,从徽标到产品目录图像,任何东西都可以升级。
通过清晰的图像提高在线产品的转化率;通过使用 Upscale.media 处理不同平台的高分辨率要求来简化您的工作流程。
将来自社交媒体的压缩图像放大多达 400%;增强从未如此简单,但在人工智能的帮助下,它可以在几秒钟内完成,而无需花费昂贵的工具。
借助 Upscale.media,任何人现在都可以升级和增强图像,无论他们是专业摄影师还是新手。
── 出自倾城之链 - AI Image Upscaler - Enlarge & Enhance your Images for Free
分享各種行動工作技巧、雲端生活應用,善用數位工具改變你我的工作效率與生活品質。
推荐语:電腦玩物,是作者 Esor Huang(异尘行者)的个人部落格;Esor,是本站唯一的作者与站长;主要涉及云端办公室、数位笔记、时间管理等让人生更美好工作方法;在電腦玩物上可以读到 Esor 的这些文章:
为什么在这个社群时代,作者还在努力写个人部落格(Blog 博客)呢?Esor 这样写道:“因为我希望把自己的完整想法、深入经验用精准文字记录并传播,能够跟网路上的你们彼此激荡。我期许自己在電腦玩物上的文章,有别于单纯的软体和服务介绍,而是更强调软体和服务背后的「数位工作思维及方法」,并说明实际应用后带来的「生活改变」,我分享的主题将会涵盖数位应用、时间管理到生活旅游中的科技人文观察,目前部落格每日点阅数超过 8 万,累积浏览人次更已突破一亿三千万人“。
近期,因为時間管理 Q&A:下班後如何避免滑一下手機就沒時間了?4 步驟調整習慣这篇文章,从而了解到電腦玩物这个网站,有志于提升自己的朋友们,不妨考虑关注下,闲来品读,增加阅历,开阔思维。
── 出自倾城之链 - 電腦玩物
简单强大实用的艺术二维码生成器。
推荐语:二维码梦工厂,是一款简单、强大、实用、在线的二维码生成器,可以为文本、网址、微信公众号生成二维码;其目标是使得用户:“不会 PS、AI 也可以做出精美的艺术二维码”。
值得一提的是,二维码梦工厂不仅提供高级编辑功能,而且提供很多精选模板,对精美二维码感兴趣的朋友,可以关注下。
── 出自倾城之链 - 二维码梦工厂 · 简单强大实用的艺术二维码生成器
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
真正的快乐,不是狂喜,亦不是苦痛,在我很主观的来说,它是细水长流, 碧海无波,在芸芸众生里做一个普通的人,享受生命一刹间的喜悦,那么我们即 使不死,也在天堂里了。── 现代 · 三毛《雨季不再来》
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
Website of Swedish surreal photographer Erik Johansson.
推荐语:ERIK JOHANSSON,一个承载超现实主义摄影的网站;Erik Johansson(生于 1985 年),是来自瑞典的摄影师和视觉艺术家。他的作品可谓是结合照片创造的超现实世界。Erik 主要从事个人项目,以及在世界各地举办展览。与传统摄影不同,他不捕捉瞬间,而是借助相机和想象力捕捉想法。目标是在单个帧中捕捉故事,并使其看起来尽可能逼真,即使场景本身包含不可能的元素。最后,一切都归结为解决问题,找到一种方法来捕捉不可能的事情。
对 Erik 来说,在他的作品中保持高度的现实主义总是很重要的。他想让观众觉得他们是场景的一部分。尽管他的工作包括大量后期制作和组合照片,但他总是试图在现场用相机捕捉尽可能多的东西。这通常意味着构建道具并使用创造性的方式来规划拍摄。
以逼真的方式组合图像时,光线和透视是至关重要的部分,如果某些部分无法在现场拍摄,则必须在受控环境中构建类似的场景。了解从创意和规划、摄影和后期制作的每一步,对于使一切无缝融合非常重要。每张照片和部分都有其目的。
Erik 总是自己做所有的后期制作,以完全控制最终结果。创意、摄影和后期制作都是相互关联的。最终图像并不比用于捕捉它的照片更好。就像照片不会变得比想法更强大。
Erik 的个人作品中没有计算机生成的、插图的或库存照片,只有他自己的照片的复杂组合。这是一个漫长的过程,他每年只创作大约 10 张新图像。如果您想了解更多关于图像如何变为现实的过程,请查看这些幕后视频。
Erik 既是一名摄影师,又是一名修图师,这使他能够创造出你能想象到的任何东西。了解过程中的每个步骤,可以完全控制从草图到最终图像的整个工作过程,以确保高质量的逼真结果。以这种方式创建图像需要大量的工作和准备才能获得逼真的结果。Erik 可用于全球委托项目。
关键字:网络广告人社区, 广告, 市场营销, 广告人才, 广告公司, 创意广告, 营销策划, 广告词, KPI, 广告设计, 品牌营销案例, 国外创意, 国外创意案例, 国外广告, 广告社区, 营销案例, 社会化媒体, 视频广告, 病毒营销案例, 公益广告, 微信营销
网络广告人社区(iwebad.com)致力于分享国外创意广告、网络营销、市场营销案例
推荐语:网络广告人社区((webad),创建于 2007 年 12 月,是一家致力于原创翻译国外营销案例的垂直类传媒网站。创立的前几年,主要是分享国外创意 Banner;随着国内外互联网环境的改变,各种营销方式层出不穷,网站也由此扩展出整合营销、品牌营销、移动营销、病毒营销、社会化营销、活动网站、邮件广告等广告类型,设有 IT、金融、汽车、房地产、电信、日化用品、消费电子、食品饮料八大行业广告案例。网站现拥将近 10000 部国外案例,及 4000 多支创意 TVC,所传播视频在优酷、土豆、56 等视频网站累计播放量超过 5000 万次。
── 出自倾城之链 - 网络广告人社区 - 分享国内外创意广告和网络营销及市场营销案例
Smartmockups enables you to create stunning high-resolution mockups right inside your browser within one interface across multiple devices.
推荐语:Smartmockups,轻松在线创建令人惊叹的产品模拟图。即使人在旅途,也可直接在浏览器中制作专业模板;忘了花上数小时学习如何使用 Photoshop 的痛苦吧。通过 Smartmockups,能直接在浏览器中,在一个界面中跨多个设备创建令人惊艳的高分辨率模板。它具有以下功能特点:
即使不是设计能手,也可享用产品模板的强大功能,Smartmockups,你值得拥有。
── 出自倾城之链 - Create stunning product mockups easily and online - Smartmockups
A free app to quickly beautify your screenshots. You can add background gradients, tweak shadows, add rounded corners and more. You can save the image or copy it to clipboard.
推荐语:Pika,免费和开源网络应用程序,可快速美化您的屏幕截图(将无聊的屏幕截图变成漂亮的可共享图像)。您可以添加背景渐变、调整阴影、添加圆角、调整间距等等。其使用也非常简单,选择图片即可开始操作(支持粘贴截图);您可以将图像保存为 PNG 文件或将其复制到剪贴板。
── 出自倾城之链 - Pika – Create beautiful screenshots quickly
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
你还年轻。不相信明天的青年就是对自己的背叛。人要生活,就一定要有信仰。信仰什么?相信一切事物和一切时刻的合理的内在联系,相信生活作为整体将永远延续下去,相信最近的东西和最远的东西。── 弗兰兹·卡夫卡 《午夜的沉默》
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
Generate meta tags in one click for the best SEO of your website, rank high in search results, and appear unique when someone shares your link!
推荐语:metaSEO,一个 SEO 相关的工具网站;支持一键生成元标签(meta tags,会增加社交相关属性,如 twitter:description
等),为您的网站提供最佳的搜索引擎优化,使得在搜索结果中排名靠前;当有人在推特(twitter)等平台分享您的链接时,会显得很独特。实际使用,需要您自己输入网站名称、描述、关键字以及预览图片网址等信息(这一点,其实可以继续优化:先抓取,没有获取到再让用户自己填写)。
── 出自倾城之链 - metaSEO - Meta tags for best SEO
关键字:微信书, 自编书, 朋友圈印书, 相册, 微博印书, 博客印书, QQ 相册印书, QQ 说说印书, QQ 日志印书, 途牛游记印书, 电子书, 印刷, 礼品, 朋友圈做书, 博客做书, 微博做书, QQ 空间做书, 公众号文章做书
社交网站内容自动导出成电子书、印刷书,微信书、博客做书、QQ 日志做书、QQ 说说做书、QQ 相册做书、途牛游记做书、微博做书、朋友圈印书、公众号文章印书等,自动排版,在线编辑
推荐语:更点,一个在线自编书平台;支持在线编辑书和相册,图文编排,实时预览;适合:微信书、博客书、QQ 说说日志书、微博书、纪念册、写作书。可导入各社交网站内容,制作旅游集、宝宝相册、博客日志书等。已经支持:微信书、新浪/网易/搜狐博客成书、QQ 日志/说说成书、公众号文章成书、微博成书、美篇文章成书、知乎专栏成书、豆瓣日记成书等。鲜有接触类似产品,有尝试导入公众号内容来编书,一番操作,与预期似乎不太相符。
── 出自倾城之链 - 更点 - 自编书平台: 微信书 博客印书 QQ 空间印书 微博印书
A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
推荐语:GraphQL 是一种 API 查询语言和运行时,用于使用现有数据完成这些查询。GraphQL 为您的 API 中的数据提供了完整且易于理解的描述,让客户能够准确地询问他们需要什么,更容易随着时间的推移发展 API,并启用强大的开发人员工具。
GraphQL 是一种用于 API 的查询语言,也是一种服务器端运行时,用于使用您为数据定义的类型系统执行查询。GraphQL 不依赖于任何特定的数据库或存储引擎,而是由您现有的代码和数据支持。使用中,主要步骤为:描述您的数据、询问你想要的、获得可预测的结果;您可从以下几个特征说明,来更充分了解它:
GraphQL 由 Facebook 开发,并于 2012 年首次应用于移动应用。GraphQL 规范于 2015 年实现开源。现在,它受 GraphQL 基金会监管。值得一提的是,著名开源框架 GatsbyJS 就基于 GraphQL 所构建,您可以通过使用它快速体验 GraphQL 的强大。
── 出自倾城之链 - GraphQL | A query language for your API
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
推荐语:Next.js,一个用于 生产环境的 React 框架,为您提供生产所需的所有功能的最佳开发人员体验:混合静态和服务器渲染、TypeScript 支持、智能捆绑、路由预取等。无需配置。它具有以下功能特征:
Next.js 正在为变得更好而努力,如今,越来越多的公司在使用并喜爱 next.js,您可以 Next.js Showcase 了解到基于它所构建的精美网站。
── 出自倾城之链 - Next.js by Vercel - The React Framework
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
你的眼睛可真好看
里面有晴雨、日月、山川、江河、云雾、花鸟
但我的眼睛更好看
因为我的眼里有你
── 当代 · 余光中《你的眼睛真好看》
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
关键字:NASA, Image, Video
NASA Image and Video Library.
推荐语:NASA 图像和视频库,带你看宇宙太空相关图片、视频、及声音;支持检索。它用于再现 3 维模型的图像、音频、视频和计算机文件,例如任何格式的纹理贴图和多边形数据;您可以将此材料用于教育或信息目的,包括照片集、教科书、公共展览、计算机图形模拟和 Internet 网页。此一般权限扩展到个人网页。NASA 拥有大量 在线图像 和 视频库,包括 历史图像、 当前任务、 天文图片、 地球图像 以及 搜索 NASA 图像的方法。
关键字:windi, windicss, tailwind, tailwindcss, vitejs, svelte, vue
Next generation utility-first CSS framework.
推荐语:Windi CSS 下一代实用优先的 CSS 框架;如果您已经熟悉 Tailwind CSS,可以将 Windi CSS 视为 Tailwind 的按需替代品,它提供更快的加载时间,与 Tailwind v2.0 完全兼容,并具有许多额外的酷炫功能。
“当我的项目变大了,大约有几十个组件时,初始编译时间达到了 3s,热更新用 Tailwind CSS 花了 1s 多。“,基于这样的痛点,作者创造了 Windi CSS;通过扫描您的 HTML 和 CSS 并按需生成实用程序,Windi CSS 能够在开发中提供更快的加载时间和快速的 HMR,并且不需要在生产中清除。
Windi CSS 支持 Tailwind CSS 的所有 Utilities(实用程序类),无需任何额外配置。您可以像往常一样,在组件和样式表中使用实用程序类,只有您使用的 Utilities (实用程序类)才会生成相应的 CSS;这对 Web 前端开发者,非常有用。
── 出自倾城之链 - Windi CSS
关键字:网盘, 云盘, 私有云, 企业网盘, 企业云盘, 企业私有云, 私有云存储, 在线办公, 云网盘, 私有云搭建, 在线 office, 资源管理器, 协同办公, 文档管理
可道云 KodExplorer(原芒果云)提供私有云存储/企业网盘/企业云盘和在线文档管理解决方案,助力企业实现办公协作、Office 在线编辑、安全存储访问和组织权限控制。
推荐语:KodExplorer 可道云 ,原名芒果云,是基于 Web 技术的私有云在线文档管理解决方案。Kod,读音通 code,意为“代码,编码”,中文名为“可道”。Kod 取义于著名计算机科学家 Linus Torvalds 的名言:“Talk is cheap. Show me the code.“。KodExplorer 可道云具有以下功能特征:
借助可道云,五分钟即可完成私有云平台的初步搭建和使用;采用 Ajax+Json 进行数据通信,毫秒级的响应速度;全平台兼容,对硬件设施要求低,有助于企业挖掘现有硬件潜力,降低部署成本。
沿用了 Windows 操作界面和习惯方式,与本地完全一致的操作体验,用户无须学习即可适应,是私有云里的小米系统,对传统私有云的交互方式构成了革命性的改变。 在线操作,本地体验。支持 100 多种所有格式包括文档、多媒体、工程图件与矢量图件的在线预览和播放,支持文本文档、office 文档的在线编辑,支持在线编程,支持文档分享、离线下载等功能。
全平台兼容性:Win、Linux、Mac (Apache、Nginx、IIS)。从百元级别的智能路由器和盒子产品,到 NAS 网络存储设备,到服务器面板,服务器,硬件集成,ERP 集成,私有云、公有云、SaaS 服务搭建等各种场景都可自如适用。
支持私有云的局域网部署,多元化的群组和用户权限设置和管理;采取多种加密、防护和强制提醒手段来增强安全性。
可道云内建插件和应用市场,为私有云提供了强大的可拓展性;同时,可道云提供开放的 API 接口,用户可以根据自己需求方便地与 ERP、OA 等业务系统集成和开发,完善企业业务模块,与现有业务系统完美融合。
KodExplorer 最初由雾渺的个人兴趣开发而来,至今已经五年有余。正如 Linus Torvalds 的名言中所表达的那样,我们认为代码及其衍生的产品是与用户最好的沟通桥梁,能够表达我们的追求、坚持和情感,也是我们作为开发者耕耘的意义所在。KodExplorer 产品发布以来,一直以提供极致的产品体验为己任,持续更新,不断优化,获得了广大用户的肯定和支持。项目当前由杭州可道云网络有限公司开发和运营,亦将秉承 KOD 内在的产品信念,致力于用优秀的产品,为用户提供安全可控、可靠易用、高扩展性的私有云解决方案。
用户只需通过简单环境搭建,即可使用 KodExplorer 快速完成私有云、私有网盘、在线文档管理系统的部署和搭建。KOD 提供了类 Windows 用户界面,延续了 Windows 平台的操作逻辑和使用习惯,支持 100 余种文件格式的在线预览,使得用户的私有云产品可以拥有本地操作一样方便、快捷、安全的体验;为企业用户提供了了文件在线存储与管理、分享和跨平台访问、群组与权限、生产流转、审批存档等全生命周期的在线文档管理的解决方案。
── 出自倾城之链 - 可道云-私有云存储&协同办公平台企业网盘企业云盘网盘云盘
关键字:Surmon 博客, surmon-china, 苏尔蒙, Vue 博客, 前端技术开发博客, JavaScript 技术
来苏之望。本是浪蝶游蜂,自留半亩石池,但求直抒胸臆,挥墨九云之中。
推荐语:surmon.me,使用 Vue(3) 构建的个人博客网站,承载了作者对技术、编码、人生等思考;作者将网站划分为明殿、宁静寺、无色庵、丹青阁、茫涯、狂浪生、伯乐、善巧堂、四方馆等模块,来分别承载技术、Github、Vlog、内推、Freelancer、评论、旅行、主页等内容。站在个人角度看,对于技术、或者生活思考,都蛮有深度,感兴趣同学,不妨关注下。
Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM & API
推荐语:css.gg,一个非常棒的图标
相关资源网站;是拥有 700+ 开源 CSS、SVG 和 Figma UI 的图标库,可用于 SVG Sprite、样式组件、NPM 和 API;这对 Web 开发非常有用;其每个图表,有纯 CSS、SVG、TSX(react)等多种实现,另外提供了修改颜色、一键拷贝等功能,不仅拿来就能使用,而且还可以学到相关技巧。
── 出自倾城之链 - 700+ CSS Icons, Customizable, Retina Ready & API
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
人们总是用一生来等待开始新的生活,这是很常见的现象。等待是思维的一个状态,意味着你需要未来,而你不要现在。你不要此时此刻,你把希望寄托于未来。丧失对当下时刻的意识,会大大地降低你的生命质量。── 埃克哈特·托利(德国出生的加拿大移民) 《当下的力量》
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。
备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly。
关键字:webdesign, ui, ux, ui kit, gradients, backdrop, sketch, photoshop, freebie, free, web, webdev, css3, css, colors, animation, psd, palette, colour, background
Come to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop and Sketch. This collection is curated by top designers and totally free.
推荐语:WebGradients.com 💎 是 180 个线性渐变的免费集合(同类网站还有 uiGradients ),您可以将其用作网站任何部分的内容背景。轻松复制 CSS3 跨浏览器代码并立即使用!他们还准备了每个渐变的 .PNG
版本。作为奖励,还有Sketch 和 Photoshop
包 。值得一提的是,该系列由顶级设计师策划,完全免费。发现这网站后,有在曼妙句子中运用,产生非常出色的效果。
── 出自倾城之链 - Fresh Background Gradients | WebGradients.com 💎
来画是有创意的 AI 动画短视频制作平台,仅需几张图片,几段文字和声音简单组合,即可在短时间内生成一个有趣的动画短视频。丰富视频模板素材免费用!对于企业用户,还有动画高端定制服务。
推荐语:来画,一站式数字创作创意平台(隶属深圳市前海手绘科技文化有限公司(简称“来画”),于 2015 年 7 月 30 号在深圳前海注册),累计了数千万用户,产生了上千万部作品,目前是国家文化和旅游部、新华社、人民日报的合作伙伴。
秉持“科技创新,让创作更简单,让创意更美好”的使命,来画着力打造了来画动画(动画短视频云端创作平台)、来画演示(创意演示工具)、来画视频(AR视频演示工具)、来画设计(新一代设计软件)、来画白板(实时协作的在线白板软件)等 5 大系列工具产品,并搭建了创意服务供给平台来画梦工厂,以及数字创意职业教育培训平台来画学园,为企业和个人真正提供高效、卓越的数字创意服务。
来画动画,动画视频云端智能创作平台。拥有 Web 端、APP 端两大视频创作工具,平台上配置了海量的视频模版和素材,以动画风格为主,实拍类素材为辅。用户只通过简单的模块化操作、拖拽与编辑,就能轻松将图片、文字、音乐、人物角色、道具、图表等素材完美结合,真正实现“像做PPT一样做动画”。
2021 年,来画推出了一个真人与内容实时互动的 AR 视频演示工具,也是首个将视频制作、视频录制、视频会议结合在一起的视频演示产品,让演示内容和真人完美融合,让会议、汇报、演讲、课件等变得生动有趣。
2021年7月,来画演示(来画Perfoo)重磅登场,这是一款拥有上帝视角的创意演示工具,让创意冲破空间的束缚,开启前所未有的酷炫演示体验。它颠覆了 PPT 的线性叙事结构,采用从整体到局部的全新演示方式,让用户清晰、准确地表述自己的逻辑想法,打造出立体思维导图式的演示内容,随时随地掌控全局。同时也能帮助观众更快速地理解内容,跟随演示者的思维去发现、去思考。
无边界画布功能,打破传统演示内容编辑的界限,将用户置身上帝视角,可以在画布上随意放置各种想要展示的内容,加上镜头缩放、旋转、平移等多种转场特效,整个演示过程就像 3D 动画电影一样,极具视觉冲击力和电影故事感。
来画设计,简单、智能的新一代设计软件,解决专业图表设计难题和日常设计需求。平台上拥有海量的数据可视化模板,只需简单拖放,即可轻松做出专业的数据图表、商业报告、思维导图、宣传海报等,让你的内容展示更具吸引力、说服力,适用于商务汇报、项目总结、政府报告、教育培训等众多场景。
同时,平台上线了精美的平面设计模板,包括新媒体配图、电商海报、来画动画配图、信息图表等类型,即使不懂设计,不会PS,直接换字换图,也能快速搞定。轻松解决金融宣传、微课教育、知识科普等各种设计难题。
来画白板,一款实时协作的在线白板软件。可以随时随地将团队聚集在一起,开启在线讨论和创意分享。
在平台上,创作者可自由邀请其他成员加入白板,进行会议讨论和头脑风暴。使用画笔、便签、形状条等功能,可以表达更多的想法和建议;添加箭头、符号、图标等元素,能更好地梳理想法,展示其中的逻辑与关系;你还可以使用表情进行评论、点赞,让整个讨论过程更加有趣,更有吸引力。
来画梦工厂是来画精心打造的创意服务供给平台,提供动画定制、创意定制、短视频大赛、创作者联盟、手绘城市墙、视频营销等多项创意服务,依靠个性化表达、高质量内容,致力于解决数字化经济中全行业品牌升级和发展难题。
来画学园是顺应 5G 时代下数字经济和文化科技的发展浪潮,以“授人以鱼不如授人以渔”为办学理念,着力打造的数字创意职业教育培训平台。它分为线上线下两大板块,线上搭建用户社区:来画数创公社;线下打造培训基地:来画数创职业教育基地和来画数创成长教育基地,实现全方位、多渠道的高效数字创意教育培训,为短视频业态注入新活力。
Build Web3 projects in minutes with smart contracts you control, tools that accelerate your workflow and intuitive SDKs and widgets for developers.
推荐语:thirdweb,轻松构建 web3 应用程序和游戏;您控制的智能合约,加速您的工作流程的工具。面向开发人员的直观 SDK 和小部件。
背景故事:Furqan(一名连续创业者)与一群试图启动 NFT 和 web3 项目的团队合作。在那段时间里,他们了解到,开发这些体验的最大障碍是学习新的编程语言和区块链。这就是为什么我们推出了 thirdweb:一个让构建 web3 应用程序和游戏变得难以置信的简单的平台。通过将他们的智能合约与你的钱包(你拥有的)进行部署,来解决区块链的复杂性,并提供SDK、小工具和接口,将 web3 功能整合到任何应用程序、游戏或 DAO 中。
通过 thirdweb,你可以推出 NFT,创建市场,引入新的社会代币,创建 NFT 的包等等。你可以通过团队权限、自定义版税分割,和你熟悉的语言的 SDK 来完成这些工作。Javascript, Typescript, Python, Golang, Unity 等等。目前,thirdweb 已经在为超过 1000 名开发者、区块链游戏、市场、DAO、NFT 投放和正在建立 web3 生态系统的创作者提供加速。
在 ProductHunt 有网友评价道:作为一个长期接触 web3 的开发者,我很高兴发现了 thirdweb:一个直观、简单的平台,让你只需点击几下,就可以轻松地使用分散的所有权创建应用程序、游戏、体验和项目。thirdweb 消除了学习新的编码语言的头痛问题,并为你提供所需的工具,使你的业务更上一层楼!为创作者、开发游戏工作室、消费者品牌和许多许多人提供了一个完美的解决方案。
── 出自倾城之链 - thirdweb
Looking for the best SEO Audit Tool to analyze and grade your website? SEOptimer is the web’s best SEO Checker. Improve your website, rank better in Search Engines and win more customers with beautiful SEO Reports. Audit your SEO today!
推荐语:SEOptimer,免费的 SEO 审计和报告工具分析网站,可以改善您的网站,在搜索引擎中获得更好的排名,并通过漂亮的 SEO 报告赢得更多客户。SEOptimer 非常适合数字机构和 SEO 自由职业者。
SEOptimer 有以下三个目标:用漂亮的白标 SEO 审计报告,给他们的客户和潜在客户留下深刻印象;通过提供定制的可嵌入审计表格,在他们的代理网站上产生新的业务线索 ;为代理提供全套 SEO 工具,而成本相对较低;该团队将根据客户反馈不断构建功能并进行产品更新;欲了解更多,你可以参考其公开路线图:SEOptimer 。
── 出自倾城之链 - Analyze Websites With Free SEO Audit & Reporting Tool - SEOptimer
Easily create even complex LaTeX tables with our online generator – you can paste data from a spreadsheet, merge cells, edit borders and more.
推荐语:TablesGenerator.com 是一个在线表格转换工具;支持 LaTeX、Html、Text、Markdown、MediaWiki 等多种格式互相转换。Markdown 等语言越来越流行,但用 Markdown、Html 来书写表格数据,颇为不便,基于 TablesGenerator.com 则可以解决这困难。另外值得一提的是,其体验很好,可以轻松编辑内容,支持在线预览、一键拷贝、导入、导出。
── 出自倾城之链 - Create LaTeX tables online – TablesGenerator.com
对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下客服微信),🤲 。
我认为,至深的平和,一定经过命运浮沉的洗礼,一定经过生离死别的考验,一定经过爱与恨的煎熬。一切都经过了,一切都走过了,一切都熬过了,生命的底色里,增了韧,添了柔。这时候平和下来的生命,已经沉静到扰不乱,已经稳健到动不摇,已经淡定到风打不动。── 当代作家 · 马德
倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。