已经发现了一个影响使用自定义协议处理程序的 Electron 应用的远程代码执行漏洞。该漏洞已被分配 CVE 标识符 CVE-2018-1000006。
🌐 A remote code execution vulnerability has been discovered affecting
Electron apps that use custom protocol handlers. This vulnerability has been
assigned the CVE identifier CVE-2018-1000006.
🌐 Such apps can be affected regardless of how the protocol is registered, e.g.
using native code, the Windows registry, or Electron's
app.setAsDefaultProtocolClient API.
macOS 和 Linux 不受此问题影响。
🌐 macOS and Linux are not vulnerable to this issue.
我们已经发布了包含此漏洞修复的新版本 Electron：
1.8.2-beta.5、
1.7.12、
和 1.6.17。
我们强烈建议所有 Electron 开发者立即将他们的应用更新到最新的稳定版本。
🌐 We've published new versions of Electron which include fixes for
this vulnerability:
1.8.2-beta.5,
1.7.12,
and 1.6.17.
We urge all Electron developers to update their apps to the latest stable
version immediately.
🌐 If for some reason you are unable to upgrade your Electron version,
you can append -- as the last argument when calling app.setAsDefaultProtocolClient,
which prevents Chromium from parsing further options.
The double dash -- signifies the end of command options,
after which only positional parameters are accepted.
Electron 有了一个新网站，网址是 electronjs.org！我们已将原来的静态 Jekyll 网站替换为 Node.js 网络服务器，这让我们能够更灵活地进行网站的国际化，并为更多令人兴奋的新功能铺平了道路。
🌐 Electron has a new website at electronjs.org! We've replaced
our static Jekyll site with a Node.js webserver, giving us flexibility to
internationalize the site and paving the way for more exciting new features.
我们已开始着手对网站进行国际化，目标是让全球开发者都能轻松进行 Electron 应用开发。我们正在使用一个名为 Crowdin 的本地化平台，该平台可以与 GitHub 集成，并在内容被翻译成不同语言时自动创建和更新拉取请求。
🌐 We've begun the process of internationalizing the website with the
goal of making Electron app development accessible to a global audience of
developers. We're using a localization platform called Crowdin that integrates
with GitHub, opening and updating pull requests automatically as content is translated into different languages.
🌐 Though we've been working quietly on this effort so far,
over 75 Electron community members have already discovered the project
organically and joined in the effort to internationalize the website and
translate Electron's docs into over 20 languages. We are seeing
daily contributions from people all over the world, with translations for
languages like French, Vietnamese, Indonesian, and Chinese leading the way.
🌐 If you're multilingual and interested in helping translate Electron's docs
and website, visit the electron/electron-i18n repo, or jump right into
translating on Crowdin, where you can sign in using your GitHub account.
🌐 There are currently 21 languages enabled for the Electron project on Crowdin.
Adding support for more languages is easy, so if you're interested in
helping translate but you don't see your language listed,
let us know and
we'll enable it.
🌐 As of today, any Electron app can easily have its own page on the Electron
site. For a few examples, check out
Etcher,
1Clipboard, or
GraphQL Playground, pictured
here on the Japanese version of the site:
有一些非常棒的 Electron 应用，但它们并不总是容易找到，而且并不是每个开发者都有时间或资源去建立一个完善的网站来推广和分发他们的应用。
🌐 There are some incredible Electron apps out there, but they're not always easy
to find, and not every developer has the time or resources to build a proper
website to market and distribute their app.
🌐 Using just a
PNG icon file and a small amount of app metadata,
we're able to collect a lot of information about a given app.
Using data collected from GitHub, app pages can now display screenshots,
download links, versions, release notes, and READMEs for every app that
has a public repository. Using a color palette extracted from each app's icon,
we can produce bold and accessible colors
to give each app page some visual distinction.
🌐 The Homebrew package manager for macOS has a subcommand called cask
that makes it easy to install desktop apps using a single command in your
terminal, like brew cask install atom.
我们已经开始收集流行 Electron 应用的 Homebrew cask 名称，并且现在在每个有 cask 的应用页面上显示安装命令（针对 macOS 访问者）:
🌐 We've begun collecting Homebrew cask names for popular Electron apps and are now
displaying the installation command (for macOS visitors) on every app page
that has a cask:
🌐 We've moved the site from electron.atom.io to a new domain: electronjs.org.
Electron 项目诞生于 Atom 内部，Atom 是 GitHub 基于 web 技术构建的开源文本编辑器。Electron 最初被称为 atom-shell。Atom 是第一个使用它的应用，但人们很快就意识到，这个神奇的 Chromium + Node 运行时可以用于各种不同的应用。当像微软和 Slack 这样的公司开始使用 atom-shell 时，很明显这个项目需要一个新的名字。
🌐 The Electron project was born inside Atom, GitHub's open-source text editor
built on web technologies. Electron was originally called atom-shell. Atom
was the first app to use it, but it didn't take long for folks to realize that
this magical Chromium + Node runtime could be used for all kinds of different
applications. When companies like Microsoft and Slack started to make use of
atom-shell, it became clear that the project needed a new name.
🌐 And so "Electron" was born. In early 2016, GitHub assembled a new team to focus
specifically on Electron development and maintenance, apart from Atom. In the
time since, Electron has been adopted by thousands of app developers, and is now
depended on by many large companies, many of which have Electron teams of
their own.
支持 GitHub 的 Electron 项目，比如 Atom 和 GitHub Desktop，仍然是我们团队的优先事项，但通过迁移到一个新的域名，我们希望能够帮助澄清 Atom 和 Electron 之间的技术区别。
🌐 Supporting GitHub's Electron projects like Atom and GitHub Desktop is still a
priority for our team, but by moving to a new domain we hope to help clarify
the technical distinction between Atom and Electron.
之前的 Electron 网站是使用流行的基于 Ruby 的静态网站生成器 Jekyll 构建的。Jekyll 是构建静态网站的绝佳工具，但网站已经开始超出它的能力范围。我们希望拥有更多动态功能，例如正确的重定向和动态内容渲染，因此 Node.js 服务器成为显而易见的选择。
🌐 The previous Electron website was built with Jekyll, the popular Ruby-based
static site generator. Jekyll is a great tool for building static websites, but
the website had started to outgrow it. We wanted more dynamic capabilities like proper redirects and dynamic content rendering, so a Node.js server was the obvious choice.
🌐 The Electron ecosystem includes projects with components written in many
different programming languages, from Python to C++ to Bash. But JavaScript is foundational to Electron, and it's the language used most in our community.
通过将网站从 Ruby 迁移到 Node.js，我们旨在降低希望为网站做出贡献的人的入门门槛。
🌐 By migrating the website from Ruby to Node.js, we aim to lower the barrier to
entry for people wishing to contribute to the website.
🌐 The new website is hosted on Heroku. We use deployment pipelines and the
Review Apps
feature, which automatically creates a running copy of the app for every pull
request. This makes it easy for reviewers to view the actual effects of a
pull request on a live copy of the site.
我们想向世界各地所有贡献了时间和精力帮助改进 Electron 的朋友们表示特别感谢。开源社区的热情在 Electron 的成功中起到了不可估量的作用。谢谢大家！
🌐 We'd like to give special thanks to all the folks around the world who have
contributed their own time and energy to help improve Electron. The passion of
the open-source community has helped immeasurably in making Electron a success.
Thank you!
在 Google Chromium 中发现了一个远程代码执行漏洞，影响所有最近版本的 Electron。任何访问远程内容的 Electron 应用都容易受到此漏洞的攻击，无论是否启用了 [沙箱选项]。
🌐 A remote code execution vulnerability has been discovered in Google Chromium
that affects all recent versions of Electron. Any Electron app that accesses
remote content is vulnerable to this exploit, regardless of whether the
sandbox option is enabled.
我们发布了两个新的 Electron 版本 1.7.8 和 1.6.14，其中都包含了对该漏洞的修复。我们强烈建议所有 Electron 开发者立即将他们的应用更新到最新的稳定版本：
🌐 We've published two new versions of electron 1.7.8 and 1.6.14,
both of which include a fix for this vulnerability. We urge all Electron
developers to update their apps to the latest stable version immediately:
npm i electron@latest --save-dev
要了解有关保持你的 Electron 应用安全的最佳做法，请参阅我们的 [安全教程]。
🌐 To learn more about best practices for keeping your Electron apps secure,
see our security tutorial.
electron npm 包现在包含一个 TypeScript 定义文件，提供了对整个 Electron API 的详细注释。这些注释可以提升你的 Electron 开发体验，即使你使用的是普通的 JavaScript。只需 npm install electron 就可以在你的项目中获取最新的 Electron 类型定义。
🌐 The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotations can improve your Electron development
experience even if you're writing vanilla JavaScript. Just
npm install electron to get up-to-date Electron typings in your project.
TypeScript 是由微软创建的一种开源编程语言。它是 JavaScript 的超集，通过添加对静态类型的支持来扩展语言。近年来，TypeScript 社区发展迅速，在最近的 Stack Overflow 开发者调查中，TypeScript 被评为最受喜爱的编程语言之一。TypeScript 被形容为“可扩展的 JavaScript”，GitHub、Slack 和 Microsoft 的团队都在使用它来编写可扩展的 Electron 应用，这些应用被数百万人使用。
🌐 TypeScript is an open-source programming language created by Microsoft. It's
a superset of JavaScript that extends the language by adding support for
static types. The TypeScript community has grown quickly in recent years,
and TypeScript was ranked among the
most loved programming languages
in a recent Stack Overflow developer survey. TypeScript is described
as "JavaScript that scales", and teams at
GitHub,
Slack,
and
Microsoft
are all using it to write scalable Electron apps that are used
by millions of people.
🌐 TypeScript supports many of the newer language features in JavaScript like
classes, object destructuring, and async/await, but its real differentiating
feature is type annotations.
Declaring the input and output datatypes expected by your program can
reduce bugs by
helping you find errors at compile time, and the annotations can also serve
as a formal declaration of how your program works.
🌐 When libraries are written in vanilla Javascript, the types are often vaguely
defined as an afterthought when writing documentation. Functions can often
accept more types than what was documented, or a function can have invisible
constraints that are not documented, which can lead to runtime errors.
TypeScript 通过 定义文件 解决了这个问题。TypeScript 定义文件描述了一个库的所有函数以及其预期的输入和输出类型。当库的作者在发布的库中打包 TypeScript 定义文件时，该库的使用者可以直接在编辑器中探索它的 API 并立即开始使用，通常无需查阅库的文档。
🌐 TypeScript solves this problem with definition files.
A TypeScript definition file describes all the functions of a library and its
expected input and output types. When library authors bundle a TypeScript
definition file with their published library, consumers of that library can
explore its API right inside their editor
and start using it right away, often without needing to consult the library's
documentation.
🌐 Many popular projects like
Angular,
Vue.js,
node-github
(and now Electron!) compile their own definition file and bundle it with their
published npm package. For projects that don't bundle their own definition file,
there is
DefinitelyTyped,
a third-party ecosystem of community-maintained definition files.
从版本 1.6.10 开始，每个 Electron 版本都包含自己的 TypeScript 定义文件。当你从 npm 安装 electron 包时，electron.d.ts 文件会随安装的包自动打包。
🌐 Starting at version 1.6.10, every release of Electron includes its own
TypeScript definition file. When you install the electron package from npm,
the electron.d.ts file is bundled automatically with the
installed package.
安装 Electron 最安全的方法是使用确切的版本号：
🌐 The safest way to install Electron is using an exact version number:
如果你已经在使用第三方定义，例如 @types/electron 和 @types/node，你应该将它们从你的 Electron 项目中移除，以防止任何冲突。
🌐 If you were already using third-party definitions like @types/electron
and @types/node, you should remove them from your Electron project to prevent
any collisions.
🌐 The definition file is derived from our
structured API documentation,
so it will always be consistent with Electron's API documentation.
Just install electron and you'll always get TypeScript definitions that are
up to date with the version of Electron you're using.
🌐 Once your editor is configured for TypeScript, you'll start to see more
context-aware behavior like autocomplete suggestions, inline method reference,
argument checking, and more.
🌐 If you're new to TypeScript and want to learn more, this
introductory video from Microsoft
provides a nice overview of why the language was created, how it works,
how to use it, and where it's headed.
🌐 Because TypeScript is a superset of JavaScript, your existing JavaScript code is
already valid TypeScript. This means you can gradually transition an existing
JavaScript project to TypeScript, sprinkling in new language features as needed.
🌐 If you encounter any issues using Electron's new TypeScript definition files,
please file an issue on the
electron-typescript-definitions repository.
🌐 When people use GitHub in their job or OSS activities, they tend to receive many notifications on a daily basis. As a way to subscribe to the notifications, GitHub provides email and web notifications. I used these for a couple of years, but I faced the following problems:
🌐 I was spending a lot of time and energy trying to prevent those problems, so I decided to make an issue reader for GitHub to solve these problems efficiently, and started developing Jasper.
🌐 Jasper is used by developers, designers, and managers in several companies that are using GitHub.
Of course, some OSS developers also are using it.
And it is also used by some people at GitHub!
🌐 This "stream" is the core feature of Jasper. For example, if you want to see "issues that are assigned to @zeke in the electron/electron repository", you create the following stream:
repo:electron/electron assignee:zeke is:issue
创建流并等待几秒钟后，你可以看到符合条件的问题。
🌐 After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.
🌐 As you may have noticed by looking at these, streams can use GitHub's search queries.
For details on how to use streams and search queries, see the following URLs.
🌐 Jasper also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.
🌐 These features enable rapid and simple desktop application development. It is awesome! If you have any product idea, you should consider using Electron by all means.
🌐 I had a hard time figuring out the "stream" concept. At first I considered using GitHub's Notifications API. However I noticed that it does not support certain use cases. After that I considered using the Issues API and Pull Requests API, in addition to the Notification API. But it never became what I wanted. Then while thinking about various methods, I realized that polling GitHub's Search API would offer the most flexibility. It took about a month of experimentation to get to this point, then I implemented a prototype of Jasper with the stream concept in two days.
注意：轮询最多每 10 秒进行一次。这对于 GitHub API 的限制来说已经足够了。
🌐 Note: The polling is limited to once every 10 seconds at most. This is acceptable enough for the restriction of GitHub API.
🌐 This week we caught up with @feross and @dcposch to talk about WebTorrent, the web-powered torrent client that connects users together to form a distributed, decentralized browser-to-browser network.
WebTorrent 使用开放的 Web 标准，将网站用户连接在一起，形成一个分布式、去中心化的浏览器到浏览器网络，以实现高效的文件传输。
🌐 Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer.
🌐 Imagine a video site like YouTube, but where visitors help to host the site's content. The more people that use a WebTorrent-powered website, the faster and more resilient it becomes.
🌐 Browser-to-browser communication cuts out the middle-man and lets people communicate on their own terms. No more client/server – just a network of peers, all equal. WebTorrent is the first step in the journey to re-decentralize the Web.
🌐 In the early days, BitTorrent used TCP as its transport protocol. Later, uTP came along promising better performance and additional advantages over TCP. Every mainstream torrent client eventually adopted uTP, and today you can use BitTorrent over either protocol. The WebRTC protocol is the next logical step. It brings the promise of interoperability with web browsers – one giant P2P network made up of all desktop BitTorrent clients and millions of web browsers.
🌐 Some torrent apps like Vuze already support web peers, but we didn't want to wait around for the rest to add support. So basically, WebTorrent Desktop was our way to speed up the adoption of the WebTorrent protocol. By making an awesome torrent app that people really want to use, we increase the number of peers in the network that can share torrents with web peers (i.e. users on websites).
🌐 One of the most exciting uses for WebTorrent is peer-assisted delivery. Non-profit projects like Wikipedia and the Internet Archive could reduce bandwidth and hosting costs by letting visitors chip in. Popular content can be served browser-to-browser, quickly and cheaply. Rarely-accessed content can be served reliably over HTTP from the origin server.
🌐 The Internet Archive actually already updated their torrent files so they work great with WebTorrent. So if you want to embed Internet Archive content on your site, you can do it in a way that reduces hosting costs for the Archive, allowing them to devote more money to actually archiving the web!
还有一些令人兴奋的商业用例，从 CDN 到通过 P2P 交付应用。
🌐 There are also exciting business use cases, from CDNs to app delivery over P2P.
🌐 What are some of your favorite projects that use WebTorrent?
用 WebTorrent 构建的最酷的东西，毫无疑问，可能是 Gaia 3D 星图。它是一个流畅的 3D 交互式银河系模拟。数据通过 torrent 在你的浏览器中加载。飞越我们的恒星系统时，你会被震撼，同时意识到与宇宙的浩瀚相比，我们人类是多么渺小。
🌐 The coolest thing built with WebTorrent, hands down, is probably Gaia 3D Star Map. It's a slick 3D interactive simulation of the Milky Way. The data loads from a torrent, right in your browser. It's awe-inspiring to fly through our star system and realize just how little we humans are compared to the vastness of our universe.
🌐 You can read about how this was made in Torrenting The Galaxy, a blog post where the author, Charlie Hoey, explains how he built the star map with WebGL and WebTorrent.
🌐 We're also huge fans of Brave. Brave is a browser that automatically blocks ads and trackers to make the web faster and safer. Brave recently added torrent support, so you can view traditional torrents without using a separate app. That feature is powered by WebTorrent.
所以，就像大多数浏览器可以渲染 PDF 文件一样，Brave 也可以渲染磁力链接和种子文件。它们只是浏览器本地支持的另一种内容类型。
🌐 So, just like how most browsers can render PDF files, Brave can render magnet links and torrent files. They're just another type of content that the browser natively supports.
🌐 One of the co-founders of Brave is actually Brendan Eich, the creator of JavaScript, the language we wrote WebTorrent in, so we think it's pretty cool that Brave chose to integrate WebTorrent.
🌐 Why did you choose to build WebTorrent Desktop on Electron?
有一种说法认为 Electron 应用很“臃肿”，因为它们在每个应用中都包含了完整的 Chrome 内容模块。在某些情况下，这在一定程度上是正确的（Electron 应用的安装包通常约为 40MB，而特定操作系统的应用安装包通常约为 20MB）。
🌐 There is a meme that Electron apps are "bloated" because they include the entire Chrome content module in every app. In some cases, this is partially true (an Electron app installer is usually ~40MB, where an OS-specific app installer is usually ~20MB).
然而，在 WebTorrent Desktop 的情况下，我们几乎使用了每一个 Electron 功能，并且在正常操作进程中使用了许多 Chrome 功能。如果我们想为每个平台从零实现这些功能，开发我们的应用将需要多几个月甚至数年的时间，或者我们只能发布单个平台版本。
🌐 However, in the case of WebTorrent Desktop, we use nearly every Electron feature, and many dozens of Chrome features in the course of normal operation. If we wanted to implement these features from scratch for each platform, it would have taken months or years longer to build our app, or we would have only been able to release for a single platform.
只是为了让大家了解，我们使用了 Electron 的 dock 集成（显示下载进度）、菜单栏集成（在后台运行）、协议处理器注册（打开磁力链接）、防止休眠（在视频播放时防止休眠）以及 自动更新。至于 Chrome 的功能，我们也用了很多：<video> 标签（播放多种视频格式）、<track> 标签（支持字幕）、拖放支持，以及 WebRTC（在原生应用中使用起来并不简单）。
🌐 Just to get an idea, we use Electron's dock integration (to show download progress), menu bar integration (to run in the background), protocol handler registration (to open magnet links), power save blocker (to prevent sleep during video playback), and automatic updater. As for Chrome features, we use plenty: the <video> tag (to play many different video formats), the <track> tag (for closed captions support), drag-and-drop support, and WebRTC (which is non-trivial to use in a native app).
🌐 Not to mention: our torrent engine is written in JavaScript and assumes the existence of lots of Node APIs, but especially require('net') and require('dgram') for TCP and UDP socket support.
WebTorrent 库作为一个开源副项目已经开发了两年。我们在四周内完成了 WebTorrent Desktop。 Electron 是我们能够如此快速构建和发布应用的主要原因。
🌐 The WebTorrent library has been in development as an open source side project for two years. We made WebTorrent Desktop in four weeks. Electron is the primary reason that we were able to build and ship our app so quickly.
🌐 Just as Node.js made server programming accessible to a generation of jQuery-using front-end programmers, Electron makes native app development accessible to anyone familiar with Web or Node.js development. Electron is extremely empowering.
🌐 Yes, the webtorrent npm package works in Node.js, in the browser, and in Electron. The exact same code can run in all environments – this is the beauty of JavaScript. It's today's universal runtime. Java Applets promised "Write Once, Run Anywhere" apps, but that vision never really materialized for a number of reasons. Electron, more than any other platform, actually gets pretty darn close to that ideal.
🌐 What are some challenges you've faced while building WebTorrent?
在应用的早期版本中，我们在提升用户界面性能方面遇到了困难。我们将种子引擎放在与主应用窗口绘制相同的渲染进程中，结果不出意外，每当种子引擎进行大量 CPU 活动（例如验证从节点接收到的种子块）时，应用就会变得很慢。
🌐 In early versions of the app, we struggled to make the UI performant. We put the torrent engine in the same renderer process that draws the main app window which, predictably, led to slowness anytime there was intense CPU activity from the torrent engine (like verifying the torrent pieces received from peers).
🌐 We fixed this by moving the torrent engine to a second, invisible renderer process that we communicate with over IPC. This way, if that process briefly uses a lot of CPU, the UI thread will be unaffected. Buttery-smooth scrolling and animations are so satisfying.
🌐 Note: we had to put the torrent engine in a renderer process, instead of a "main" process, because we need access to WebRTC (which is only available in the renderer.)
🌐 One thing we'd love to see is better documentation about how to build and ship production-ready apps, especially around tricky subjects like code signing and auto-updating. We had to learn about best practices by digging into source code and asking around on Twitter!
🌐 We think the current version of WebTorrent Desktop is excellent, but there's always room for improvement. We're currently working on improving polish, performance, subtitle support, and video codec support.
🌐 The Electron 1.6.3 beta release contains initial support for the macOS Touch Bar.
新的 Touch Bar API 允许你添加按钮、标签、弹出窗口、颜色选择器、滑块和间隔符。这些元素可以动态更新，并且在与之交互时也会触发事件。
🌐 The new Touch Bar API allows you to add buttons, labels, popovers, color
pickers, sliders, and spacers. These elements can be dynamically updated and
also emit events when they are interacted with.
这是该 API 的第一个版本，因此它将在接下来的几个 Electron 版本中不断发展。请查看发行说明以获取更多更新，并针对任何问题或缺失的功能提交问题。
🌐 This is the first release of this API so it will be evolving over the next
few Electron releases. Please check out the release notes for further updates
and open issues for any problems
or missing functionality.
你可以通过 npm install electron@beta 安装此版本，并在 TouchBar 和 BrowserWindow Electron 文档中了解更多信息。
🌐 You can install this version via npm install electron@beta and learn
more about it in the TouchBar
and BrowserWindow
Electron docs.
🌐 Below is an example of creating a simple slot machine game in the touch bar.
It demonstrates how to create a touch bar, style the items, associate it with a
window, handle button click events, and update the labels dynamically.
const{ app,BrowserWindow,TouchBar}=require('electron'); const{TouchBarButton,TouchBarLabel,TouchBarSpacer}=TouchBar; let spinning =false; // Reel labels const reel1 =newTouchBarLabel(); const reel2 =newTouchBarLabel(); const reel3 =newTouchBarLabel(); // Spin result label const result =newTouchBarLabel(); // Spin button const spin =newTouchBarButton({ label:'🎰 Spin', backgroundColor:'#7851A9', click:()=>{ // Ignore clicks if already spinning if(spinning){ return; } spinning =true; result.label=''; let timeout =10; const spinLength =4*1000;// 4 seconds const startTime =Date.now(); constspinReels=()=>{ updateReels(); if(Date.now()- startTime >= spinLength){ finishSpin(); }else{ // Slow down a bit on each spin timeout *=1.1; setTimeout(spinReels, timeout); } }; spinReels(); }, }); constgetRandomValue=()=>{ const values =['🍒','💎','7️⃣','🍊','🔔','⭐','🍇','🍀']; return values[Math.floor(Math.random()* values.length)]; }; constupdateReels=()=>{ reel1.label=getRandomValue(); reel2.label=getRandomValue(); reel3.label=getRandomValue(); }; constfinishSpin=()=>{ const uniqueValues =newSet([reel1.label, reel2.label, reel3.label]).size; if(uniqueValues ===1){ // All 3 values are the same result.label='💰 Jackpot!'; result.textColor='#FDFF00'; }elseif(uniqueValues ===2){ // 2 values are the same result.label='😍 Winner!'; result.textColor='#FDFF00'; }else{ // No values are the same result.label='🙁 Spin Again'; result.textColor=null; } spinning =false; }; const touchBar =newTouchBar([ spin, newTouchBarSpacer({size:'large'}), reel1, newTouchBarSpacer({size:'small'}), reel2, newTouchBarSpacer({size:'small'}), reel3, newTouchBarSpacer({size:'large'}), result, ]); letwindow; app.once('ready',()=>{ window=newBrowserWindow({ frame:false, titleBarStyle:'hidden-inset', width:200, height:200, backgroundColor:'#000', }); window.loadURL('about:blank'); window.setTouchBar(touchBar); });
🌐 Radio has has always had a big share of listeners. It’s moving off the airwaves and onto the Internet. Now you can rent music on demand — it’s a radio revival! A lot of new products and services have emerged because of this, but streaming radio still leaves someone else in control of your music and how you experience it.
🌐 We wanted a product that was entirely focused on music you own. Something that made it easy to discover and buy new music directly from artists or labels.
🌐 Since the app is free, we may open source it later on. Right now we don’t have the bandwidth to manage that. We also have very specific ideas for features and the direction we want to take things. We have an active beta community and we take our feedback to heart.
🌐 Our Voltra Audio Archive is a cloud-backup service designed specifically for music. We don’t compress or share data blocks. Your music collection is physically backed up for you.
对于艺术家和唱片公司，我们的 Pro 会员 提供工具，帮助他们触及更多相关的观众，例如分析工具和专业艺术家网页。
🌐 For artists and labels, our Pro Membership offers tools to help them reach more relevant audiences, such as analytics and professional artist webpages.
🌐 Design and usability are incredibly important to us. We want to give listeners a distraction-free listening experience! There are a some interesting music players and stores out there. But many of them are more advanced and harder to use than their creators realize. We want to make Voltra accessible to as many people as possible.
🌐 We also don't take a cut from the artist or the label. That’s a key differentiator for us. It’s really important because it lowers the barrier for artists to get their music to market.
🌐 While designing Voltra, we considered UI conventions from native apps and the web, we also thought a lot about what we could remove. We have an active private beta group who have given us critical feedback over the last few months.
🌐 We found that album art and photography are really important to people. Many players are just lists of files. One of the cool things about owning physical albums is the album art, and we wanted to put emphasis on this in the Voltra desktop app.
🌐 We also made sure not to mess with people's files. We use file watching so you can put your files wherever you want, and we don't rename them or move them for you. We have an embedded database to track the state of the watched directories so that we can track what's new, even when the process isn't running.
🌐 We spend a lot of time focused on performance. We started with frameworks but moved to vanilla Javascript. In our experience, the generalized abstractions they provide outweigh the performance penalties and ceremony that they introduce.
我们现在可以很好地处理非常大的收藏。大收藏可能意味着成千上万张图片！由于在渲染进程中可以直接使用 Node.js 的文件系统模块，这使得根据 DOM 事件快速延迟加载和卸载大量图片变得非常容易。
🌐 We handle very large collections pretty well at this point. Large collections means possibly tens of thousands of images! Having Node.js’ file system module directly available from the render process made it really easy to lazy load and unload lots of images super quickly based on DOM events.
🌐 In general setImmediate and requestIdleCallback have been super important tools for performing lots of processing while keeping the UI responsive. More specifically, distributing CPU-bound tasks into separate processes really helps to keep the user interface responsive. For example, we moved the actual audio context into a separate process, communicating with it over IPC to avoid potential interruptions from a busy UI.
🌐 The browser’s sandbox is too restricted for our app. But we are also developing a web player. So it’s a huge win that we can share almost 100% of the code between the two implementations.
我们最初是用 Swift 开发原生应用。我们发现的主要问题是，我们重复造了很多轮子。网络拥有世界上最大的开源生态系统。因此，我们很快就转向了使用 Electron。
🌐 We actually started by building a native app with Swift. The main problem we found was that we were reinventing a lot of things. The web has the world’s largest open source eco-system. So we pretty quickly switched to Electron.
此外，最重要的是，使用 Electron 你只需开发一次，它就应该能在所有主要平台上正常运行™。虽然不能保证绝对无误，但为每个平台进行原生编码的成本肯定超过 Electron 所引入的其他任何成本。
🌐 Also, and most importantly, with Electron you develop once and it should Just Work™ on all the major platforms. It’s not guaranteed, but the cost of coding natively for each platform definitely outweighs any other costs that electron introduces.
我们希望看到 Electron 支持一个统一的打包工具。这个打包工具对于 Electron 的重要性，相当于包管理器对 Node 的重要性。用户社区中有多个打包工具，每个工具都有其有趣的特性，但也各有缺陷。社区达成共识将有助于引导贡献者的精力投入方向。
🌐 We would like to see Electron endorse a single packager. The packager is as important to Electron what the package manager is to Node. There are multiple packagers in user-land, each with interesting features but each with bugs. Consensus by the community would help to direct the energy being spent by contributors.
🌐 We‘re currently developing a mobile app, and working with artists and labels to add their music to the Voltra shop. Hey! If you’re an artist or label, sign up now! We plan on opening up the shop when we reach our goal of 10 million tracks.
🌐 Electron is based on Google's open-source Chromium, a project that is not
necessarily designed to be used by other projects. This post introduces
how Chromium is built as a library for Electron's use, and how the build
system has evolved over the years.
🌐 The Chromium Embedded Framework (CEF) is a project that turns Chromium into
a library, and provides stable APIs based on Chromium's codebase. Very
early versions of Atom editor and NW.js used CEF.
🌐 To maintain a stable API, CEF hides all the details of Chromium
and wraps Chromium's APIs with its own interface. So when we needed to
access underlying Chromium APIs, like integrating Node.js into web pages, the
advantages of CEF became blockers.
所以到最后，Electron 和 NW.js 都直接改用 Chromium 的 API。
🌐 So in the end both Electron and NW.js switched to using Chromium's APIs
directly.
🌐 Even though Chromium does not officially support outside projects, the codebase
is modular and it is easy to build a minimal browser based on Chromium. The core
module providing the browser interface is called Content Module.
🌐 To develop a project with Content Module, the easiest way is to build the
project as part of Chromium. This can be done by first checking out Chromium's
source code, and then adding the project to Chromium's DEPS file.
NW.js 和 Electron 的早期版本都使用这种方式进行构建。
🌐 NW.js and very early versions of Electron are using this way for building.
🌐 The downside is, Chromium is a very large codebase and requires very powerful
machines to build. For normal laptops, that can take more than 5 hours.
So this greatly impacts the number of developers that can contribute to the
project, and it also makes development slower.
作为 Content 模块的用户，在大多数情况下 Electron 不需要修改 Chromium 的代码，所以一个明显的方法来改进 Electron 的构建是将 Chromium 构建为共享库，然后在 Electron 中链接它。这样开发者在为 Electron 做贡献时就不再需要重新构建整个 Chromium。
🌐 As a user of Content Module, Electron does not need to modify Chromium's code
under most cases, so an obvious way to improve the building of Electron is to
build Chromium as a shared library, and then link with it in Electron. In this
way developers no longer need to build all off Chromium when contributing to
Electron.
🌐 The libchromiumcontent project was created by
@aroben for this purpose. It builds the Content
Module of Chromium as a shared library, and then provides Chromium's headers
and prebuilt binaries for download. The code of the initial version of
libchromiumcontent can be found in this link.
🌐 By using libchromiumcontent and brightray together, developers can
quickly build a browser without getting into the details of building Chromium.
And it removes the requirement of a fast network and powerful machine for building
the project.
在 Windows 上，一个共享库可以导出的符号数量是有限制的。随着 Chromium 代码库的增长，libchromiumcontent 导出的符号数量很快就超过了这个限制。
🌐 On Windows there is a limitation of how many symbols one shared library can
export. As the codebase of Chromium grew, the number of symbols exported in
libchromiumcontent soon exceeded the limitation.
🌐 By taking this approach, though Chromium kept adding new exported symbols,
libchromiumcontent could still generate shared library files by stripping more
symbols.
🌐 As a huge project, the linking step takes very long in Chromium when building.
Normally when a developer makes a small change, it can take 10 minutes to see the
final output. To solve this, Chromium introduced component build, which builds
each module in Chromium as separated shared libraries, so the time spent in the
final linking step becomes unnoticeable.
🌐 With Chromium continuing to grow, there were so many exported symbols in
Chromium that even the symbols of Content Module and Webkit were more than the
limitation. It was impossible to generate a usable shared library by simply
stripping symbols.
🌐 As introduced earlier there are two build modes in Chromium. As a result of
shipping raw binaries, we have to ship two different distributions of binaries
in libchromiumcontent. One is called static_library build, which includes
all static libraries of each module generated by the normal build of Chromium.
The other is shared_library, which includes all shared libraries of each
module generated by the component build.
在 Electron 中，调试版本链接的是 shared_library 版本的 libchromiumcontent，因为它下载体积小，且在链接最终可执行文件时耗时短。而 Electron 的发布版本则链接的是 static_library 版本的 libchromiumcontent，因此编译器可以生成完整的符号，这对于调试非常重要，同时链接器能够进行更好的优化，因为它知道哪些目标文件是需要的，哪些是不需要的。
🌐 In Electron, the Debug version is linked with the shared_library version of
libchromiumcontent, because it is small to download and takes little time
when linking the final executable. And the Release version of Electron is
linked with the static_library version of libchromiumcontent, so the compiler
can generate full symbols which are important for debugging, and the linker
can do much better optimization since it knows which object files are needed
and which are not.
🌐 So for normal development, developers only need to build the Debug version,
which does not require a good network or powerful machine. Though the Release
version then requires much better hardware to build, it can generate better
optimized binaries.
🌐 Being one of the largest projects in the world, most normal systems are not
suitable for building Chromium, and the Chromium team develops their own build
tools.
早期版本的 Chromium 使用 gyp 作为构建系统，但它存在速度慢的问题，对于复杂项目，其配置文件也变得难以理解。经过多年的开发，Chromium 切换到了 gn 作为构建系统，它速度更快且具有清晰的架构。
🌐 Earlier versions of Chromium were using gyp as a build system, but it suffers
from being slow, and its configuration file becomes hard to understand for complex
projects. After years of development, Chromium switched to gn as a
build system, which is much faster and has a clear architecture.
🌐 One of the improvements of gn is to introduce source_set, which represents
a group of object files. In gyp, each module was represented by either
static_library or shared_library, and for the normal build of Chromium,
each module generated a static library and they were linked together in the
final executable. By using gn, each module now only generates a bunch of
object files, and the final executable just links all the object files together,
so the intermediate static library files are no longer generated.
🌐 This improvement however made great trouble to libchromiumcontent, because
the intermediate static library files were actually needed by libchromiumcontent.
解决这个问题的第一次尝试是使用 修补 gn 以生成静态库文件，虽然它解决了问题，但离一个体面的解决方案还差得远。
🌐 The second try was made by @alespergl to
produce custom static libraries from the list of object files.
It used a trick to first run a dummy build to collect a list of generated
object files, and then actually build the static libraries by feeding
gn with the list. It only made minimal changes to Chromium's source
code, and kept Electron's building architecture still.
正如你所见，与作为 Chromium 一部分来构建 Electron 相比，将 Chromium 构建为一个库需要更多的努力并持续进行维护。然而，后者取消了构建 Electron 对高性能硬件的需求，从而使更广泛的开发者能够构建和贡献 Electron。这一努力完全值得。
🌐 As you can see, compared to building Electron as part of Chromium, building
Chromium as a library takes greater efforts and requires continuous
maintenance. However the latter removes the requirement of powerful hardware
to build Electron, thus enabling a much larger range of developers to build and
contribute to Electron. The effort is totally worth it.
🌐 The WordPress.com Desktop app provides a seamless cross-platform experience that allows you to focus on your content and design with no browser tabs to distract you — or to keep your sites sidelined but accessible. In combination with our browser support and mobile app you can build your site anywhere, in whatever way helps you get your work done.
🌐 It's actually using exactly the same technology you get when visiting WordPress.com in your browser. However, it's all locally hosted, so it has minimal load times. With the benefit of native features such as being in your dock, notifications, etc., you really can focus on your WordPress sites and blogging.
🌐 At the end of 2015 we rebuilt much of WordPress.com in the form of Calypso, an open-source modern JavaScript app using React. We started looking at Electron and with some changes to Calypso were able to get it running locally. It was a compelling experience and we thought there was a lot of value in developing it further.
🌐 We had several teams working on Calypso. To make a full multi-platform GUI client that matched this using traditional desktop technologies would have taken more work. By using Electron, a small team of 2-4 of us were able to leverage the other team’s efforts and build the Desktop app in a couple of months.
🌐 What are some challenges you've faced while building WordPress Desktop?
我们很快就让应用运行了初始版本，但将其调整为在桌面应用中最佳运行花费了更多时间。应用面临的一个大挑战是，你实际上是在自己的机器上运行一个 Calypso 的副本——它完全是基于 API 的用户界面。这其中涉及了大量的桥接工作，并且所做的更改也反馈回了 Calypso 本身。
🌐 We got an initial version of the app running very quickly, but tuning it to behave optimally as a desktop app took a lot more time. One big challenge with the app is that you're actually running a copy of Calypso on your own machine - it’s purely an API driven UI. There was a lot of bridging work involved in this, and changes were fed back to Calypso itself.
此外，为不同平台打包应用也花费了大量精力——我们提供 Windows、macOS 和 Linux 版本——而且这些平台之间有足够多的差异，使得这项工作很棘手。
🌐 Additionally a lot of effort was spent packaging the app for different platforms - we provide Windows, macOS, and Linux versions - and there are sufficient differences to make this tricky.
当时 Electron 相对较新，我们不断遇到一些问题，这些问题很快就得到了解决（有时甚至当天就能解决！）。
🌐 At the time Electron was relatively new and we kept running into issues that were shortly fixed (sometimes the same day!)
Electron 已经提供了我们桌面应用所需的大部分功能，而且自我们开始使用以来，它发展得非常迅速。话虽如此，一些在桌面应用中理所当然的功能，如拼写检查和查找/替换，在 Electron 中直接实现起来则更困难。
🌐 Electron already provides most of what we need for the Desktop app, and it's progressed rapidly since we started using it. That said, there are some areas that are taken for granted in a desktop app, such as spell checking and find/replace, that are harder to replicate with Electron as-is.
我们也希望看到一些更新的 Chrome 技术被引入到 Electron 中。我们特别热衷于尝试 WebVR。
🌐 We’d also love to see some of the newer Chrome technologies filtering down into Electron too. We’re particularly keen on experimenting with WebVR.
我们选择 Electron 的主要原因，也是它最大的优势，是其非常活跃且开放的社区。Automattic 一直相信开源。这是我们的核心信念之一，而 Electron 项目和社区也遵循许多开放和积极的核心理念。
🌐 The main reason we chose Electron, and it's biggest strength, is the very active and open community. Automattic has always believed in open source. It is one of our core tenets, and the Electron project and community follows a lot of the core beliefs of being very open and positive.
🌐 The great thing about our model is that the Desktop app benefits from any new Calypso feature - there are constant improvements. We’re hoping we can add additional features to the app such as offline support, which would really take the app into native territory, and better system notifications.
🌐 Are there any teams at Automattic working on other Electron apps?
是的，在我们对桌面应用的努力之后，Simplenote 团队决定使用 Electron 来构建适用于 Windows 和 Linux 的桌面应用（已经存在原生 Mac 客户端）。Simplenote Electron 应用 也是开源的，并可以在 Github 上获取。
🌐 Yes, after our efforts on the Desktop app, the Simplenote team decided to use Electron to build desktop apps for Windows and Linux (a native Mac client already exists). The Simplenote Electron app is also open source and available on Github.
我们还即将推出使用 Electron 的 Raspberry Pi 集成。
🌐 We've also got an upcoming Raspberry Pi integration that uses Electron.
🌐 Any Electron tips that might be useful to other developers?
将已签名的桌面软件分发给用户对我们来说相对较新，尤其是针对 Windows。我们撰写了一篇关于为 Windows 应用进行代码签名的文章，其中包括整个进程以及我们为正确完成它所遇到的一些难题。
🌐 The process of shipping signed desktop software is relatively new to us, especially for Windows. we wrote up an article for Code Signing a Windows App which includes the process and a few of the hurdles we went through to do it right.
