前端月刊

原文地址：https://martinfowler.com/articles/micro-frontends.html

CodeMirror 是通过 JavaScript 实现的文本编辑器。专门用于编辑代码，带有大量的语言模式和实现更高级的插件功能。 拥有丰富的编程 API 和 CSS 主题化系统可用于定制 CodeMirror ，使它更适合你的应用和扩展新功能。 首先我们来看下一个最基础的示例…

1️⃣ 如果你曾经做成数据分析，使用过 PowerBI 和 Tableau 来进行数据分析，你会发现这两款产品对如何制作可视化图表的操作方式会有明显不一致的地方。 比如在 PowerBI 中，但你需要绘制一个图表时，需要先选择一个统计图表，然后根据当前选择的图表来配置对应必要的…

1️⃣ 如果你曾经做成数据分析，使用过 PowerBI 和 Tableau 来进行数据分析，你会发现这两款产品对如何制作可视化图表的操作方式会有明显不一致的地方。 比如在 PowerBI 中，但你需要绘制一个图表时，需要先选择一个统计图表，然后根据当前选择的图表来配置对应必要的…

1. 拖放的基本概念 拖（drag）放（drop）是 HTML5 标准的组成部分，拖放是一种常见的特性，即抓取对象以后拖到另一个位置，任何元素都可以被拖放。 2. 拖放的几个事件 需求说明：如上图，这是一个常见的三栏布局，要求图中箭头部分可上下、左右拖动，使得三个box可以根据…

在上一篇译文中，我们已经跑通了 Monaco Editor 的项目，接下来我们来具体看下，如何配置自定义语言高亮。 Monaco Editor 通过自带的语法高亮库 Monarch 来支持配置自定义语言。通过它，即可使用 JSON 创建声明式语法支持高亮。我们可以通过 mona…

打包是开发 electron 应用中最后的一个环节，也是最重要的一个步骤。如果打包遇到问题，那你前面的所有努力也就白费了。目前官方的打包工具主要包括2种，分别是 electron-packager 和 electron-builder，下面分别介绍这两种打包方式的区别以及注意事…

为方便初学者快速上手，暂时抛开那些晦涩的概念，直接跟着笔者写一个 webpack 插件，来感受一下吧。笔者这里的代码是基于 webpack 5.x 版本写的，跟 4.x 版本有一定差异。这是一篇入门文，如果已经有基础，就不需要看此文了。 我们假设这样一个场景：发布静态资源之后，…

在本文中，我将介绍 Web 编辑器是如何工作的，并且我们将创建一个自定义语言。 我们要构建的语言编辑器很简单。它声明一个 TODO 列表，然后将一些预定义的指令应用于它们。我将这种语言称为 TodoLang。以下一些示例是这个语言的说明： 我们可以使用 COMPLETE TOD…

Redis 是完全开源的，遵守 BSD 协议，是一个基于C语言实现的高性能的key-value数据库。 Redis支持数据的持久化，可以将内存中的数据保存在磁盘中，重启的时候可以再次加载进行使用。 Redis不仅仅支持简单的key-value类型的数据，同时还提供list，se…

随着产品的不断演化发展，整个应用常常不可避免的变得越来越庞大，此时首屏渲染时间或者首次加载时间都会加长。然后性能优化就会被排上日程。在众多的性能优化方案中，对模块做按需加载，无疑是最有效的方法之一。使用 webpack 的 import() 方法即可轻松实现模块的按需加载。 我…

在《没有 HTML 的 XSS ：客户端 AngularJS 模板注入》我们展示了使用 AngularJS 框架暴露交叉点的 XSS 漏洞，提供一个合适的沙箱逃逸方式。在本文中，我将研究如何开发一个在事先不可利用的上下文的沙箱转义——过滤器排序。我已经写了整个开发过程，包含各种…

NW.js 基于 Chromium 和 Node.js 创建桌面应用程序的框架. NW.js 利用 Web 技术结合 Node.js 及其模块进行桌面应用开发。在最简单的情况下，可以使用常规 Web 工作流程来开发 Web 应用。最后使用生成器将所有内容编译为一个桌面应用，然后…

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。它完全兼容 Mac、Windows 和 Linux，真正实现了跨平台的桌面端应用解决方案。 Electron的核心技术架构是由 Chromium + Node.js …

如果你希望基于 Web 技术创建一个本地桌面应用，再开源社区中有两个选择：NW.js（原 node-webkit）和 Electron（原 atom-shell）。这两者如何选择并不显而易见。这就是我创建本文对两者进行细致比较的原因。希望这对你选择合适的工具构建你的新应用有帮助…

对于开发人员来说，除了日常的编程语言外，因业务需要，我们会去学习或者设计一门在某一业务领域使用的语言，也就是我们经常看到的 DSL（领域特定语言，Domain Specific Language）。如小程序 DSL 等。 对于解析 DSL，我们可以考虑使用支持该 DSL 的现有…

1. 背景 在前端开发中，通常提到语法解析等功能，一般都是由后端负责提供接口，前端调用；或者如果要执行也是直接扔给服务端去处理；但是在一些特殊的情况下，譬如使用编辑器的时候，往往需要具备一些错误提醒、自动完成等的功能；虽然市面上也有现成的编辑器可以直接拿来使用，但是在一些特殊或…

CodeMirror 是一款非常老牌的Web编辑器，目前已经发展到 v6 版本，不过 v6 仍处于测试阶段，今天笔者以5.57.0版本进行介绍。Monaco Editor 相较就年轻得多了，尽管如此而它的名气却一点都不小；只因它与VSCode 使用的同一款核心代码。接下来笔者将…

我今年为Nullcon HackIM CTF撰写BabyJS的挑战，其想法不是使用如sqli、lfi、rce等常见漏洞类，而是选择一些新颖、有趣的东西。过去在CTF中，有很多关于pathon-jail/python-sandbox的挑战，所以我们想为什么不尝试NodeJs沙箱呢…

React 在 v16.8 提供了 Hook 特性，React Hooks 通过增强函数式组件，为 Function Component 注入一些功能，例如 useState 让原本的 Stateless Function Component 有了状态。 接下来我们从 useS…