web高德maker动画
In this article, Kushagra Gour introduces Web Maker, a browser extension he created for front-end developers who want a blazing-fast, offline web playground.
在本文中，Kushagra Gour引入了Web Maker ，这是他为想要快速，离线的网上游乐场的前端开发人员创建的浏览器扩展。
If you’re a front-end developer like me, you’ve probably tried one or more of the code playgrounds out there like CodePen, JSBin, JSFiddle etc. They’re all great and do the job perfectly. I’ve mostly used them to figure out issues I’m facing, or to discuss code snippets with colleagues. But I’ve always felt a slight friction in them having to work over the internet — with an inherent delay between starting them up and being able to use them.
如果您是像我这样的前端开发人员，那么您可能已经尝试过一个或多个代码游乐场，例如CodePen，JSBin，JSFiddle等。它们都很出色，可以完美地完成工作。 我主要使用它们来解决我面临的问题，或与同事讨论代码片段。 但是，我一直感到它们必须通过Internet进行工作时会遇到一些摩擦，这在启动它们和使用它们之间存在固有的延迟。
I also wanted a quick way to hack stuff while traveling or waiting at the airport, where you’re mostly offline. Of course, you can use an editor and see the results in the browser — but in this fast-paced world, that’s slow to set up!
我还希望有一种快速的方法来旅行或在机场(大多数情况下都处于离线状态)等待时破解东西。 当然，您可以使用编辑器并在浏览器中查看结果-但是在这个快节奏的世界中，设置起来很慢！
I tried looking for something that could give me what I wanted, but couldn’t find any. In fact, I found many people looking for the same thing:
我尝试寻找可以满足我需求的东西，但找不到任何东西。 实际上，我发现很多人都在寻找相同的东西：
Wish @CodePen had an offline mode. No idea how it would work like, but still.
希望@CodePen具有离线模式。 不知道它将如何工作，但仍然如此。
— Chris Armstrong (@Armstrong) February 16, 2015
—克里斯·阿姆斯特朗(@Armstrong) 2015年2月16日
So I decided to make something myself, and created Web Maker. Now I use it to do all my web experiments — and even to develop Web Maker itself!
因此，我决定自己制作东西，并创建了Web Maker 。 现在，我用它来进行所有的Web实验-甚至开发Web Maker本身！
什么是Web Maker？ (What is Web Maker?)
Web Maker is a Chrome extension that converts your new tab (optional) into a web playground where you can write HTML, CSS and JavaScript and instantly see a preview right there. It has thousands of users and is available on the Chrome Web Store.
Web Maker是一个Chrome扩展程序，可将您的新标签页(可选)转换为网络游乐场，您可以在其中编写HTML，CSS和JavaScript，并立即在此处查看预览。 它有成千上万的用户， 可在Chrome网上应用店中使用 。
特征 (Features)
超快且可离线工作 (Super fast and works offline)
Being a chrome extension, Web Maker lives completely in your browser. There’s no network involved (unless you’re using a third-party JavaScript/CSS library). So it opens instantly. Not just initial startup, but every change you make in the code produces an instant refresh in the preview. And if there’s just a CSS change, it doesn’t even require a refresh — it just shows up.
作为chrome扩展程序，Web Maker完全存在于您的浏览器中。 不涉及网络(除非您使用的是第三方JavaScript / CSS库)。 因此它立即打开。 不仅是初次启动，而且您对代码进行的每个更改都会在预览中立即刷新。 而且，如果只是CSS更改，它甚至不需要刷新-它会显示出来。
You also have the option to save and load your creations for later editing. They’re saved in your browser’s localStorage.
您还可以选择保存和加载您的作品以供以后编辑。 它们已保存在浏览器的localStorage中。
Web Maker is also recommended by Chris Coyier on CodePen blog, if an offline web playground is what you need:
如果需要脱机网络游乐场， Chris Coyier还将在CodePen博客上推荐 Web Maker。
We get asked fairly often about an offline version of CodePen. While we think that would be cool, in all honesty, we aren’t particularly close to that. If you’re looking for a CodePen-like offline editor, and use Chrome, check out Web Maker by Kushagra Gour.
我们经常被问到有关CodePen的脱机版本的信息。 虽然我们认为这很酷，但老实说，我们并不是特别接近。 如果您正在寻找类似CodePen的离线编辑器，并使用Chrome，请查看Kushagra Gour的Web Maker。
For more on the story behind CodePen, check out the Versioning Show episode with Chris Coyier…
有关CodePen背后故事的更多信息，请查看Chris Coyier的“ Versioning Show”情节。
预处理器 (Preprocessors)
Preprocessors are an integral part of almost every developer’s toolchain. Web Maker provides you with all the most-used preprocessors out there for HTML, CSS and JavaScript — be it Markdown, Jade, SCSS, Less, JSX or TypeScript.
预处理程序几乎是每个开发人员工具链中不可或缺的一部分。 Web Maker提供了所有用于HTML，CSS和JavaScript的最常用的预处理器-Markdown，Jade，SCSS，Less，JSX或TypeScript。
添加库 (Adding libraries)
If you need to use an external JavaScript or CSS library (like jQuery or Bootstrap) in your creation, you can simply hit the Add Library button, choose one of the popular libraries from the available list, or start typing the name of any library and select it from shown auto-suggestions.
如果您需要在创建中使用外部JavaScript或CSS库(例如jQuery或Bootstrap)，则只需点击“ 添加库”按钮，从可用列表中选择一种流行的库，或者开始输入任何库的名称，然后从显示的自动建议中选择它。
多种布局可供选择 (Multiple layouts to choose from)
In addition to having multiple editor layout options, each of your saved creations remembers the layout it last used, along with the code pane sizes. So, basically, whenever you load back any creation, you get the exact same editor configuration that you last saved the creation in.
除了具有多个编辑器布局选项外，每个保存的创作还可以记住上一次使用的布局以及代码窗格的大小。 因此，基本上，每当您回载任何创建内容时，您都将获得与上次保存创建内容时完全相同的编辑器配置。
Also, you get a full screen layout to see your work in actual browser window size.
另外，您将获得全屏布局，以实际的浏览器窗口大小查看工作。
预览截图捕获 (Preview screenshot capture)
Chrome extension APIs give Web Maker immense power to do stuff that normal web apps can’t. One example is screenshot capture. Just click the Take Screenshot button anytime to take an instant screenshot of your preview.
Chrome扩展API使Web Maker拥有执行普通Web应用程序无法执行的操作的强大功能。 一个示例是截图捕获。 随时单击“ 获取屏幕截图”按钮即可获取预览的即时屏幕截图。
另存为HTML或在CodePen中打开 (Save as HTML or open in CodePen)
When you’ve done your work inside Web Maker, you don’t need to copy/paste it to some file to use somewhere else. You get a Save as HTML file option that embeds your HTML, CSS and JavaScript code inside an HTML file.
在Web Maker中完成工作后，无需将其复制/粘贴到某个文件中即可在其他地方使用。 您将获得“ 另存为HTML文件”选项，该选项将HTML，CSS和JavaScript代码嵌入HTML文件中。
Or say you want to share your creation with the world: the Open on CodePen button opens your creation inside CodePen.
或者说您想与世界分享您的创作：“ 在CodePen上打开”按钮可在CodePen中打开您的创作。
开源无处不在！ (Open source everywhere!)
I have made Web Maker open source on GitHub. I think it connects me more with the users, who can suggest features they want or log issues they face, all in one place.
我已经在GitHub上将 Web Maker 开源 。 我认为它使我与用户之间的联系更加紧密，他们可以在一处提供他们想要的功能或记录他们面临的问题。
There are many interesting logic pieces that go into making such a web playground. All those are open to see and learn from. I personally loved working on prevention of infinite loops using Esprima.
建立这样的网络游乐场有许多有趣的逻辑部分。 所有这些都是开放的，可供学习和借鉴。 我个人喜欢使用Esprima防止无限循环 。
Web Maker heavily uses some awesome, open-source projects out there like CodeMirror, Esprima, Split.js, Escodegen, Inlet.js, Emmet etc. A big shout out to them! And as I mentioned, Web Maker also uses Web Maker. ;-)
Web Maker大量使用了一些很棒的开源项目，例如CodeMirror ， Esprima ， Split.js ， Escodegen ， Inlet.js ， Emmet等。向他们大喊大叫！ 正如我提到的，Web Maker也使用Web Maker。 ;-)
您可以使用Web Maker做什么 (What You Can Use Web Maker For)
There are many interesting ways Web Maker can be used apart from the usual web development stuff. Let’s look at some of them.
除了通常的Web开发之外，还有许多有趣的方式可以使用Web Maker。 让我们看看其中的一些。
边学习边练习，无需设置麻烦 (Practice while you’re learning without setup hassle)
If you’re starting to learn web development, Web Maker is a good place to do your daily practice, assignments etc. You can focus on just writing code without getting into setting up an editor or a build process for using preprocessors.
如果您开始学习Web开发，Web Maker是进行日常练习，分配作业等的好地方。您可以专注于仅编写代码，而无需建立使用预处理器的编辑器或构建过程。
为您的应用创建独立的组件 (Create independent components for you app)
Component-based architecture is being widely adopted for designing web applications these days. Whether you’re using React, Vue or any other JavaScript framework, everyone is heading towards making your app a collection of independent components.
如今，基于组件的体系结构被广泛用于设计Web应用程序。 无论您使用的是React，Vue还是任何其他JavaScript框架，每个人都在朝着使您的应用程序成为独立组件集合的方向发展。
You can develop and try out such independent components quickly in Web Maker — and integrate them into your app when you’re happy with them.
您可以在Web Maker中快速开发和试用这样的独立组件，并在对它们满意时将它们集成到您的应用程序中。
作为Markdown编辑器 (As a Markdown editor)
Web Maker isn’t limited to just web development. Now-a-days, people generally write blog posts and articles in Markdown. And for that they generally use a Markdown editor. You can turn Web Maker into a markdown editor with live preview in seconds. (This article was written in Web Maker.)
Web Maker不仅限于Web开发。 如今，人们通常在Markdown中撰写博客文章和文章。 为此，他们通常使用Markdown编辑器。 您可以在几秒钟内将Web Maker变成带有实时预览的降价编辑器。 (本文是使用Web Maker编写的。)
在教室里教学生 (Teach students in a classroom)
Since Web Maker works offline, it’s a great platform that can be given to students in a classroom to explore things while they learn.
由于Web Maker可以脱机工作，因此它是一个很好的平台，可以为教室中的学生提供学习时探索事物的平台。
创建简化的测试用例进行调试 (Create reduced test cases for debugging)
When you’re trying to find the cause for an issue in your app, it’s worth isolating the suspected component so that you can debug in a much smaller environment without any interference from rest of the app. Web Maker’s a great tool for quickly running a piece of code like this.
当您试图在应用程序中查找问题的原因时，值得隔离可疑组件，以便您可以在更小的环境中进行调试，而不受应用程序其余部分的干扰。 Web Maker是快速运行这样的一段代码的出色工具。
存储您喜欢的代码段 (Store your favorite code snippets)
Found some interesting code snippet on a website? You don’t have to remember or note down the URL. Simply fire up Web Maker, paste in the code snippet, give it a title and save. You can open these later for reference or editing.
在网站上找到了一些有趣的代码段？ 您不必记住或记下URL。 只需启动Web Maker，粘贴代码段，为其命名并保存。 您可以稍后打开它们以供参考或编辑。
一些即将推出的功能 (Some Upcoming Features)
These are some new features I’m working on:
这些是我正在使用的一些新功能：
Import/Export. Soon there’ll be an option to export all your creations and they’ll be importable back into Web Maker. You’ll also be able to create backups to the cloud, to services like Google Drive.
导入/导出 。 很快，您将可以选择导出所有创作，并且可以将它们重新导入到Web Maker中。 您还可以创建云备份以及Google云端硬盘等服务的备份。
Editor customization. More customization settings are on their way, including the ability to set font sizes, themes and indentation.
编辑器定制 。 越来越多的自定义设置正在使用中，包括设置字体大小，主题和缩进的能力。
There’s more information on the roadmap on the GitHub issues page.
GitHub问题页面上的路线图上有更多信息。
结语 (Wrapping Up)
So, that’s an introduction to Web Maker, a browser extension I created to make life easier for front-end developers.
因此，这是Web Maker的简介，Web Maker是我创建的浏览器扩展，旨在使前端开发人员的工作更加轻松。
Because Web Maker is open-source software, you have the opportunity to mold it into something you want. You can request features, or even contribute code to get those interesting features into Web Maker.
由于Web Maker是开源软件，因此您有机会将其塑造成所需的东西。 您可以请求功能，甚至提供代码以将这些有趣的功能添加到Web Maker中。
You can also follow @webmakerApp for future updates, to suggest a feature or just to say hi if you like it!
您也可以按照@webmakerApp进行将来的更新，以建议功能或在喜欢时打个招呼！
If you’ve tried Web Maker and have any questions or feedback, please post a comment below.
如果您尝试过Web Maker，并且有任何疑问或反馈，请在下面发表评论。
翻译自: https://www.sitepoint.com/web-maker-an-offline-browser-based-codepen-alternative/
web高德maker动画
扫一扫
1924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
