web前端

从头开始构建 CodePen 类型编辑器

admin web前端 暂无评论 86 浏览

想要在您的网站上显示实时代码示例是很常见的，如果您今天想这样做，有一些服务可以提供这种能力。然而，如果你像我一样，你宁愿自己动手。在本教程中，我将为该站点构建自己的类似代码笔的编辑器。

我的目标比大多数人的用例更复杂，因为该站点使用称为MDXT的降价编译器（这是为该站点制作的自定义编译器）；我想将此处的代码包含到 MDXT 语言中。因此，考虑到这一点，我将有两个版本并回顾每个版本的工作原理。第一个版本将介绍如何将输入textarea与 链接iframe并动态更新它。第二个将保留第一个的核心方面，但旨在处理同一页面上的多个编辑器。

为了保持本文档的整洁，我不会在示例中包含样板 HTML，但如果您需要，请输入docVSCode 并将示例粘贴到 body 标记中。

独立编辑器

从编辑器的标记开始，我们将<textarea>在页面正文中包含三个标签以及一个<iframe>. 如果你跳到下面看，你可以看到每个文本区域都有一个data-lang属性。当我们到达那个点时，这将给我们一个非常性感的方法来与文档更新器交互。我没有在本教程中包含样式，因为我还没有为我的编辑器设计样式。...

<textarea data-lang="html" cols="30" rows="10"></
…
Read more

原websocket服务端与客户端代码示例

admin web前端 暂无评论 96 浏览

websocket服务端与客户端代码示例. ( json socket )

用到了ws库.

步骤:1安装ws

npm install ws

步骤2:服务端代码:

创建websocket.mjs文件,写入以下代码:

import { WebSocketServer } from "ws";

const server = new WebSocketServer({ port: 3000 });

server.on("connection", (socket) => {
  // send a message to the client
  socket.send(JSON.stringify({
    type: "hello
…
    
Read more

2023 Web Components 现状

admin web前端 暂无评论 103 浏览

最近，我写了一篇关于如何构建你的第一个 Web 组件的文章，以及一些关于基本的 v1 Web 组件规范的历史和解释。但自 2020 年 v1 获得完全支持以来，Web Components 的世界发生了更多的变化。未来还有更多的计划。让我们看一些使用当前标准构建的值得关注的例子，以及调查一些将在 2023 年及以后推出的新的 Web Components 标准工作[1]。…

    
Read more

chatGPT等AI技术会代替前端开发的工作吗?

admin web前端 暂无评论 175 浏览

在过去的几个月里，我与许多早期职业开发者交谈过，他们对 AI 越来越感到焦虑。他们已经看到来自 GPT-4 等工具的越来越令人印象深刻的演示，他们担心当他们精通 HTML/CSS/JS 时，他们将没有任何工作要做。

这种情绪现在遍布推特：

推文截图：任何只有前端技能的人都应该立即使他们的技能多样化，因为他们的工作不会很快消失。

我完全不同意。我认为 Web 开发人员的工作不会有任何进展。我已经厌倦了在网上传播。

因此，在这篇博文中，我将分享我对将要发生的事情的假设。事情将会改变，但不会像人们所说的那样可怕。…

        
Read more

Vue.js有什么优点,为什么会流行?

admin web前端 暂无评论 42 浏览

Vue.js是计算机发展的趋势使然

计算机的历史总是遵循分久必合合久必分的趋势，最开始Web前端硬件和浏览器的性能不够，为了用户体验和性能，开发者会选择像 Rails 类似的框架 来进行服务端模板渲染以提升性能，但是服务端模板渲染的技术弊端是，当前端界面复杂度达到PC软件的规模时，界面的调整太依赖于后端和DOM结构树的查询节点树，一旦要更新页面布局和设计时就需要后端改动一下，前端也改动一下，一旦前端界面大改时，JQuery这种依赖模板和DOM查询节点的方法就会很被动，因为界面布局和结构发生巨变时，DOM节点查询链条很容易断裂，代码也不敢轻易变动和删除，导致项目越久，代码冗余越多，项目也变得很难维护。…

Read more

如何终止 JavaScript 中的脚本运行

admin web前端 暂无评论 59 浏览

我怎样才能像 PHPexit或 那样退出 JavaScript 脚本die？我知道这不是最好的编程实践，但我需要这样做

“exit”函数通常会退出程序或脚本，并带有一条错误消息作为参数。例如 php 中的 die(...)

die("sorry my fault, didn't mean to but now I am in byte nirvana")

JS 中的等效项是使用throw关键字发出错误信号，如下所示：

throw new Error();

你可以很容易地测试这个：

var m =
…
Read more

作为绝对初学者学习 Web 开发

admin web前端 暂无评论 106 浏览

想作为初学者学习 Web 开发，但不确定从哪里开始？

很难知道学习编码的最佳方法，因为那里有大量资源。但是现在，您所需要的只是 Web 开发的基础知识——对下一步的方向进行一般性解释。

首先，这是您作为 Web 开发新手需要遵循的步骤。

学习 Web 开发基础知识的步骤：

  1. 了解网站工作原理、前端与后端以及使用代码编辑器的基础知识
  2. 学习基本的 HTML、CSS 和 JavaScript
  3. 学习工具：包管理器、构建工具、版本控制
  4. 学习 Sass、响应式设计、JavaScript 框架
  5. 学习后端基础知识：服务器和数据库、编程语言

我建议按顺序执行步骤 1、2 和 3。然后，根据您是想专注于更多的前端还是后端，您可以按任何顺序执行步骤 4a 或 4b。…

                
Read more

关于html5：脚本和样式元素的HTML“nonce”属性的目的是什么？

admin web前端 暂无评论 503 浏览

What’s the purpose of the HTML “nonce” attribute for script and style elements?

W3C说HTML5.1中有一个新的属性，叫做nonce，用于style和script，可以被网站的内容安全策略使用。

我在google上搜索了一下，但最后还是没有得到它，这个属性实际上做了什么，在使用它时会发生什么变化？

 

 相关讨论

 

  • 看起来这对你的站点来说只是一个额外的安全措施，你把它添加到一个链接或表单中，当页面被服务时，如果这个nonce与你的不匹配，那么你就不服务于页面了。
  • @皮特，你是说没人能装你的script和style？像hotlink禁令？
  • 它也适用于普通页面和表单验证

 

 

nonce属性使您能够"白名单"某些内联script和style元素，同时避免使用csp unsafe-inline指令(这将允许所有内联script和style指令)，因此您仍然保留一般不允许内联script和style的关键csp功能。

因此，nonce属性是一种告诉浏览器特定脚本或样式元素的内联内容不是由某些(恶意)第三方注入到文档中，而是由控制文档的服务器的人故意放入文档中的方法。

https://developers.google.com/web/fundamentals/security/csp/如果您必须使用，它提供了一个很好的示例，说明如何使用nonce属性，具体步骤如下：

 

  • 对于您的Web服务器收到的针对特定文档的每个请求，让您的后端从加密安全的随机数生成器(如EDNnf03nceIOfn39fn3e9h3sdfa)生成一个包含至少128位数据的随机base64编码字符串。那是你的现在。
  • 以步骤1中生成的nonce为例，对于任何要"白名单"的内联script/style，使后端代码在通过线发送之前在文档中插入nonce属性，该nonce作为值：
    1
    <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">…
  • 使用步骤1中生成的nonce，将nonce-预先发送给它，并使您的后端生成一个csp头，其中包含script-src或style-src的源列表值：
    1
    Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

 

因此，使用nonce的机制是一种替代方法，而不是让您的后端生成您希望允许的内联script或style的内容散列，然后在CSP头中的相应源列表中指定散列。

…
Read more

一文搞懂 script 标签

admin web前端 暂无评论 913 浏览

前端开发应该都知道 HTML 中 <script> 标签的作用——引入 JS 代码，不过由于脚手架和打包工具的普及，我想很少有人再亲手写 <script> 了。本期就借机写一下这个快被遗忘了的 <script> 教程，看看大家是否真的掌握了这个元素。

基本功能

废话不多说了，直入正题。<script> 引入 JS 的方式主要有三种：内联、外置，以及动态引入。

内联

直接将 JS 代码写到 script 标签内：

 

<html>
  <head>
    <script>
      console.log("Hello");
…
    
Read more