倾城之链 | 优质网站周刊

优质网站同好者周刊(第 077 期)

倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界。此周刊,将汇聚过去一周倾城所收录的内容,以飨同好;欢迎推荐或自荐(仅限有独立域名的网站,可以是二级域名)。您如果要了解收录要求,请参见关于倾城

备注:本周刊每周五生成,首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩,以及悠然宜想亭社区;此一键生成脚本基于 Deno 编写,并在 Github 开源:nicejade/nicelinks-weekly

GitHub - vadimdemedes/ink: 🌈 React for interactive command-line apps

标签命令行 · React · 程序

🌈 React for interactive command-line apps. Contribute to vadimdemedes/ink development by creating an account on GitHub.

倾城之链 - GitHub - vadimdemedes/ink: 🌈 React for interactive command-line apps

推荐语term.ink 是基于 React 框架,用于构建交互式命令行(Command Line)应用程序的渲染器(render);它提供了与 React 在浏览器中提供的相同的基于组件的 UI 构建体验。它使用 Yoga 在终端(Terminal)中构建 Flexbox 布局,因此大多数类似 CSS 的道具,也可以在 Ink 中使用。如果您已经熟悉 React,那么您已经了解 Ink。由于 Ink 是一个 React 渲染器(renderer),这意味着支持 React 的所有功能。

Ink 这对于前端极客而言,是福音般的存在;您可以基于前端技术,快速构建命令行程序,而不用关注底层;能够极大促进您编写命令行程序的热情;进一步完善您的工具流,从而让您的效果更上一层楼。这中间,Lnk 扮演了优良循环的催化剂和基建砖;事实上,基于 Ink 已经衍生出大量命令行应用程序;在此强烈推荐了解、学习、使用。

── 出自倾城之链 - GitHub - vadimdemedes/ink: 🌈 React for interactive command-line apps

Plasmo | Iterate on every push

标签扩展 · 框架 · React

关键字:browser extension, chrome extension, developer tools, developer tooling, continuous integration, security, cybersecurity, enterprise

Plasmo is a platform for making browser extensions at lightning speed. We make it easy to build, test, and deploy browser extensions in a matter of seconds.

倾城之链 - Plasmo | Iterate on every push

推荐语Plasmo 是一个用于开发浏览器扩展的框架、平台,支持开发者快速开发测试发布「浏览器扩展」,支持所有主流浏览器(如 Chrome、Firefox、Safari 等等)。

Plasmo 所提供的框架基于 React,类似于浏览器扩展的 Next.js;通过 TypeScript 支持、自动引导 manifest.json、资产生成、自动捆绑等,享受最先进的浏览器扩展开发者体验,零配置、自动化部署。基于 plasmo 开发浏览器框架,具备哪些优势呢?官方有额外给出以下好处:

开发

使用 Plasmo 的零配置声明性扩展框架更快地迭代。

测试

在数百个站点上测试您的扩展程序,并将安全漏洞留在尘埃中。

发布

简化向每个 Web 商店的提交、更新和发布。

Plasmo 框架是由黑客为黑客制作的电池组(battery-packed)浏览器扩展 SDK 。构建您的产品,不再担心配置文件和构建浏览器扩展的奇怪特性。该项目在 Github 开源,支持开发者免费使用;如果您想再进一步增强您的浏览器扩展开发,可以考虑付费(Pro) ,从而使用规模测试、秘密扫描等高级功能。

── 出自倾城之链 - Plasmo | Iterate on every push

SvelteKit • The fastest way to build Svelte apps

标签构建 · Svelte · JavaScript

SvelteKit is the official Svelte application framework

倾城之链 - SvelteKit • The fastest way to build Svelte apps

推荐语SvelteKit ,是构建 Svelte 应用最快的方法;它是可以用于构建各种规模的 Web 应用程序的框架,具有出色的开发体验,以及灵活的基于文件系统的路由(跟 Vite、Webpack、Rollup 类似)。它具有以下功能特征:

由 Svelte 提供支持

SvelteKit 是一个由 Svelte 提供支持的应用程序框架——用更小的空间构建更大的应用程序。

两全其美

具备服务器渲染(SSR)应用程序的所有 SEO 、渐进增强,以及 SPA 的流畅导航。

快速构建

借助高级路由、服务器端渲染、代码拆分、离线支持等功能开始运行。

与单页应用程序不同,SvelteKit 不会在 SEO、渐进增强或初始加载体验方面做出妥协——但与传统的服务器渲染(SSR)应用程序不同,导航是即时的,具有类似应用程序的感觉。另外,需要说明的是,目前(2022.08)仍处于测试阶段,如果您想了解更多,可以参见 Github 开源项目:SvelteKit

── 出自倾城之链 - SvelteKit • The fastest way to build Svelte apps

Find and hire quality developers - Proxify

标签远程 · 酷工作 · 开发者

Proxify helps companies to hire senior and vetted developers in as little as one week. Get matched with the top 2% of developers in days, not months.

倾城之链 - Find and hire quality developers - Proxify

推荐语Proxify ,帮助公司在短短一周内,雇用高级和经过审查的开发人员。在几天内,而不是几个月内,就能与前 2% 的开发人员匹配。据其官方网站描述:22 个不同国家/地区的 350 多家公司信任 Proxify 扩展他们的开发团队。无论您的技术堆栈是什么,他们已经证明,经过审查的开发人员准备在一周内开始。Proxify 列举了应该使用他们进行招聘的原因:

在几天内而不是几个月内雇用

所有 Proxify 开发人员都经过预先审查,因此您将有一个新的团队成员准备好在几天内开始工作。不是几个月。

最好的开发商

所有开发人员都会说英语,并具有成熟的技术技能。Proxify 仅接受每月收到的 5000 多名申请者中的 2%。

有竞争力的价格

Proxify 的目标是长期结对开发人员。这就是我们比竞争对手便宜 50% 的原因。

完美的搭配

Proxify 的技术团队将帮助您找到:不仅技术合格,而且有积极性加入您的团队的开发人员。

基于 Proxify 寻求开发者,只需要三个步骤即可:

第 1 步:告诉我们您的需求

与技术经理讨论您对产品或项目的要求和目标。

第 2 步:匹配完美的开发者

几天之内,将向您展示经过精心挑选和全面审查的开发人员。

第 3 步:开始合作(无风险)

工作开始。一周内完全无风险。只有满意时才付费。

与其他平台和机构不同,Proxify 专注于帮助您以合理的价格,获得长期发展合作伙伴,而不是零时工。这就是为什么大多数团队成员都在位超过 12 个月的原因。避免惊慌失措的项目,并找到可靠的开发人员加入您的团队。

如果您是开发者,您可以通过 Proxify 平台,申请成为「开发者」,或能帮助您找到合适的工作。除了招聘业务外,Proxify 还提供了大量技术相关文章分享;有通过 Google 搜索 SPA SEO 相关答案,从而知晓 Proxify 平台的存在。

── 出自倾城之链 - Find and hire quality developers - Proxify

Render Javascript With Search Engines in Mind | Prerender

标签SEO · JavaScript · 服务

Get higher rankings by serving search engine crawlers a static HTML version of your Javascript website, without compromising your customers’ experience.

倾城之链 - Render Javascript With Search Engines in Mind | Prerender

推荐语Prerender.io ,它通过为爬虫提供 JavaScript 网站的静态 HTML 版本,在不影响客户体验的情况下获得更高的排名。是针对单页面应用(SPA)解决 SEO 问题的零侵入解决方案。

预渲染产生背景

如果您有从事现代前端开发相关工作,使用 AngularVueReact 等框架,进行单页应用开发,用户在浏览时,在浏览器动态请求并解析 JavaScript、CSS,然后渲染并呈现出最终的页面;用户体验比较好,网站性能也提高不少。但存在一个问题:网络爬虫并不会动态解析 JavaScript(事实上,Google 引擎会抓取,但效果上不是特别理想),访问所有 URL 得到的只是项目入口文件中的代码,不能得到具体的内容(完整 html 源码);如此一来,网站 SEO 就无从谈起。

除了上述提及的客户端渲染 (CSR Croswer Side Render),完全可以基于 SSR( Server Side Render 服务端渲染)、SSG(Static Site Generation 静态页面生成)、本地预渲染(诸如 Prerender SPA Plugin )等方案,从而解决 SEO 问题。且不说是否合适、会不会影响渲染速度,单就从实现角度,需要对已经采用 CSR 方案的项目,进行颇多修改,才能达成目的。

预渲染方案好处

而在服务端使用「预渲染」方案,则无需对现有项目改造,代码零侵入完成。其思路是:对于用户正常访问,提供构建的源码,走客户端渲染;而对于搜索引擎爬虫,则在后台启动无头浏览器,返回渲染完成后抓取 HTML 内容。Github 开源项目 prerender 即是基于这种理念:通过向 Google 和其他搜索引擎,提供预渲染的 HTML 来解决 SEO;它使用 Headless Chrome 将 javascript 呈现的页面呈现为 HTML 的节点服务器。与预渲染中间件一起使用。您可以克隆该项目,部署在自己的服务器,结合 Nginx 配置,即可开启您 SPA 项目的 SEO 之路。

Prerender.io 提供什么服务?

prerender 项目由 Prerender.io 出品(其内部基于 Headless Chrome,与 Google Puppeteer 类似),也可以使用 Prerender.io 提供的服务;它旨在加快向搜索爬虫提供内容的速度,从而提高您的 SEO 分数。只需注册、登录、按照说明进行 Nginx 配置即可;相比自己部署的 prerender 服务,有更快的速度、更多可选项设置、强大的仪表盘、缓存管理器以及其他缓存相关活动操作。

需要说明的是,Prerender.io 必须与您的 Web 服务器/后端/CDN 集成,以具有确定哪些请求将被转发到 Prererender 的机制。Prerender.io 是如何工作的?可以参见 Prerender.io 文档 | 入门说明

为什么使用 Prerender®

相比于客户端渲染、服务器端渲染,很多场景下,动态渲染更有用武之地;服务器可以区分「人类」和「机器人」,为人类提供完整的体验,为机器人提供轻量级的 HTML 版本。为何推荐使用 Prerender?官方给出了以下几个可以说服你的答案:

让 Google 和您的用户满意

Prerender 的中间件会检测 Google 何时访问您的网站,从而生成易于抓取的版本。人类用户可以看到动态的 Javascript 版本,让您控制他们的体验。

谷歌推荐

Google 和 Bing 建议使用动态呈现解决方案来解决 JavaScript 呈现问题。事实上,Google 的文档特别推荐 Prerender®,因此您可以专注于开发并将 SEO 留给营销人员。

简单、可靠、可扩展的服务

只需快速安装我们的中间件即可。Prerender 的托管服务以 99.9% 的服务承诺负责其余的工作。

开源和社区支持

Prerender® 由关心软件的行业专家组成的热情社区维护。无论您的配置如何,他们都有解决方案。您甚至可以构建自己的服务器。

本站「 倾城之链 」是基于 Vue 等技术栈所开发的单页应用(SPA),且没有基于 SSR、SSG 做首屏、SEO 优化。早期基于 prerender 对搜索爬虫做了预渲染处理,由于没有进一步折腾,效果一般。目前采用 Prerender.io 提供的免费服务,可以在仪表盘看到:Googlebot 抓取频率相对很高,越来越多页面「缓存命中」;百度和必应的抓取频率比起 Google 要低太多;整体效果正在持续观察中。如果您也为单页应用 SEO 问题而发愁,Prerender.io 是非常值得关注和使用的服务。

── 出自倾城之链 - Render Javascript With Search Engines in Mind | Prerender

对倾城之链感兴趣的朋友,可通过 Web,小程序,快应用等渠道进行访问(后续将支持更多,如 VsCode 插件,Chrome 扩展等)。您有任何问题,欢迎随时向我们反馈(您可以通过官网反馈渠道,或添加如下倾情打赏),🤲 。

倾城之链 - 倾情打赏

本期文末寄语

心体澄彻,常在明镜止水之中,则天下自无可厌之事;意气和平,常在丽日光风之内,则天下自无可恶之人。当是非邪正之交,不可少迁就,少迁就则失从违之正;值利害得失之会,不可太分明,太分明则起趋避之私。── 明 · 洪应明 《菜根谭》

倾城之链作为一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。

微信公众号 - 晚晴幽草轩

您可能感兴趣的文章