Hasty Briefsbeta

全部标签

javascript

共 41 篇

双语

Leaflet.js
2 months ago
- Leaflet is a lightweight (42 KB) open-source JavaScript library for creating interactive maps on mobile and desktop.
- It offers a simple, well-documented API with essential features like tile layers, markers, popups, vector layers, GeoJSON, and image overlays.
- Interaction features include drag panning, scroll wheel zoom, pinch-zoom, double-click zoom, keyboard navigation, and events.
- Visual features include smooth animations, retina support, and a clean default design for markers, popups, and controls.
- Customization is supported via pure CSS, HTML/image markers, custom map projections, and a modular build system.
- Performance is optimized with hardware acceleration, smart rendering, and no external dependencies.
- Browser support covers Chrome, Firefox, Safari 5+, Opera 12+, IE9-11, Edge, and major mobile browsers.
- The library is community-driven, encouraging contributions, bug reports, and help on forums like Stack Overflow and GitHub.
EU tells firms to label AI-generated content from Sunday
2 months ago
- 浏览器中禁用了JavaScript，需要用户操作才能继续。
- 网站的必需部分加载失败，可能是由于浏览器扩展、网络问题或浏览器设置。
- 故障排除步骤包括检查连接、禁用广告拦截器或使用其他浏览器。
Recursion is lying to you
2 months ago
- 递归对于自然递归问题（树遍历、分治）很优雅，但每次调用都会消耗栈空间，导致深度较大时出现栈溢出。
- 尾调用优化（TCO）理论上可以重用栈帧，但JavaScript运行时很少可靠地实现它；即便是正确的尾递归代码仍然可能溢出。
- 斐波那契示例表明，指数分支和栈溢出是两种不同的故障模式，需要不同的修复方法。
- 一张运行时TCO支持表（2026年5月）显示，Chrome/V8、Node.js、Deno、Firefox、Safari和Bun都缺乏可靠的TCO，因此不能假设可移植性。
- 生产安全的替代方案包括迭代重写和蹦床模式，后者保持递归风格的同时避免栈增长。
- 实用检查清单：永远不要假设TCO，使用实际边界进行测试，对于深层或用户驱动的输入优先使用迭代，仅将递归视为用于自然有界深度的可读性工具。
Beej's Bit Bucket
2 months ago
- 在JavaScript中，原型继承与基于类的继承不同：对象的原型是对其构造函数原型属性的隐式引用。
- 如果在对象上找不到某个属性，则会沿着该对象的原型链向上查找，直到找到该属性或到达原型链的末端。
- 通过将一个构造函数的原型设置为另一个构造函数的实例，可以形成一条链来实现继承；之后修复构造函数属性以保持正确的引用非常重要。
Javascript obfuscation tricks
2 months ago
- 函数可以通过注释读取自身，从而允许嵌入和使用任意字符串数据；移除注释的反混淆器会破坏代码。
- 堆栈跟踪的行号和列号可以用作加密密钥；重新格式化或移除函数会改变这些数字，导致解密失败。
- 可以通过异步分叉炸弹（例如异步函数两次调用自身）触发浏览器崩溃，从而在开发者工具中隐藏崩溃位置。
- 变量名可以通过对象键迭代提取为字符串，从而允许在标识符中存储数据，并通过eval强制名称完整性。
- 为了阻止基于LLM的反混淆，嵌入带有噪声的威胁性Base64指令，使模型拒绝执行，或者通过使每个代码段都必不可少来超载上下文窗口。
Overview of JavaScript Virtualization Obfuscation
2 months ago
- 没有代码保护是牢不可破的，因为计算机必须查看指令才能执行它们，因此目标是抽象程序执行。
- 虚拟化混淆涉及创建一个幻想CPU，将输入代码编译为其指令集，并在解释器中运行，类似于Java虚拟机。
- Web保护（JavaScript）通常比二进制保护更容易破解，因为二进制安全领域更为成熟。
- 一个基本示例展示了程序作为指令ID和操作数的数组，以及一个循环来解释诸如push和add之类的指令。
- 监控程序内存可以破解此类虚拟化代码，就像可执行程序一样。
Try-Catch Control Flow Obfuscation
2 months ago
- JavaScript异常处理可被利用来创建非线性代码流，从而混淆分析。
- 攻击者可强制try块中的错误跳转到catch块，从而隐藏实际预期功能。
- catch块执行真实逻辑，通常根据try块中设置的状态进行条件检查。
- 链式使用多个try-catch块会创建复杂的执行路径，只有通过特定的错误链才能到达特定代码。
- 必须避免使函数总是抛出错误的行为过于明显，因为这会让模式更易被检测。
Beej's Bit Bucket
2 months ago
- This demo explains building a custom drag-and-drop system with JavaScript and CSS, using jQuery for ease while implementing core functionality manually.
- The system moves elements by setting their CSS 'position' to 'absolute' and updating 'left' and 'top' properties relative to the container.
- Drag mode is initiated on mousedown, items follow the mouse during move, and on mouseup, the drop is processed with collision detection on droptargets.
- To avoid the element's corner sticking to the mouse, the system remembers the mouse offset on the element at click and adjusts positioning accordingly.
- Mouse coordinates are converted from document space to the container's coordinate system for proper absolute positioning within the container.
- Elements with class 'stayinparent' are restricted to their parent container, while others can move freely across the document.
- Drop containers are marked with class 'droptarget'; on drop, collisions are checked and a 'drop' event is dispatched with the draggable element.
- Usage involves setting 'draggable' and 'droptarget' classes, calling 'beejdnd.init()', and binding a drop event handler with a draggable reference.
- Suggestions for improvements include bounding drag areas, axis restriction, clone creation, scroll-on-edge, multitouch support, and jQuery plugin conversion.
- The code is licensed under the MIT open source license.
Beej's Bit Bucket
2 months ago
- Gamepad API requires user interaction (plugging in or pressing a button) before it works to prevent information leaks.
- Browser support varies; Firefox, Chrome, Opera, Safari, and Edge support it, but IE does not; Edge has quirks.
- Use navigator.getGamepads() to get an array of gamepad objects; the array may contain null entries for disconnected slots.
- Gamepad objects have properties: index, id, axes, buttons, mapping, and connected; use the index property to identify specific gamepads.
- Poll gamepad state in a requestAnimationFrame loop rather than relying on events; events for connect/disconnect are unreliable.
- Standard Gamepad mapping sets mapping="standard" and defines button/axis layouts; non-standard controllers require manual handling.
- Buttons have pressed (boolean) and value (0.0 to 1.0 for analog); axes range from -1 to 1 for stick positions.
- Implement a dead zone to ignore small axis values near center and prevent unintended drift.
- Clamp joystick values to a circle of radius 1 to normalize maximum speed across different controllers.
async() => { await }
2 months ago
- 互联网主要由网站组成，Cloudflare 的服务每秒处理超过 30 万次请求。
- 每次只服务一个客户端无法扩展，因此需要并发机制来同时处理多个客户端。
- JavaScript 没有原生线程，因此在 async/await 出现之前，基于回调的并发被称为“回调地狱”。
- Async/await 简化了异步代码，使其更易读且易于管理，正如将充满回调的代码转换为更清晰的异步结构所示。
Making a Shuffle Button
2 months ago
- 作者更新了其笔记博客的随机导航功能，使其使用JavaScript逻辑导航到专门的随机页面，而不是在每个页面中嵌入所有笔记ID。
- 旧方法将所有笔记ID注入到每个HTML文件中，导致构建缓慢，并且每次新文章发布时都会导致缓存失效。
- 曾考虑使用静态链接的无JavaScript方案，但由于其对部署和缓存的影响而被拒绝。
- 新解决方案使用单个JSON文件或专门的HTML页面来存储笔记ID，减少了缓存问题。
- 随机页面包含一个带有300毫秒延迟的“随机播放中...”指示器，以提供用户反馈，模仿旧式CD播放器。
- 这种方法允许通过URL路由直接访问随机功能，无需图形用户界面交互。
Why Do We Write super(props)? — overreacted
2 months ago
- 在JavaScript中，在类构造函数中使用`this`之前需要调用`super()`；React类组件继承了这一规则。
- 将`props`传递给`super(props)`并非严格必要，因为React会在构造函数运行后赋值`this.props`，但它确保在构造函数中`this.props`可用。
- `super(props)`的惯例可以防止混淆和错误，尤其是在构造函数内部调用方法时。
- React的构造函数还接收`context`作为第二个参数，但不太常用。
- 类字段提案和Hooks在许多情况下消除了显式调用`super()`的需求。
How Does React Tell a Class from a Function? — overreacted
2 months ago
- React 根据组件是函数还是类来区别对待，需要直接调用函数或用 `new` 实例化类并调用 `render`。
- JavaScript 中的 `new` 运算符用于为类构造函数创建对象，但将其用于箭头函数或非类函数会导致错误或意外行为。
- React 不能简单地对所有组件使用 `new`，因为这会破坏箭头函数并阻止对原始返回类型的支持。
- React 通过检查原型上特殊的 `isReactComponent` 标志来区分类和函数，该标志被添加到 `React.Component` 上。
- 使用 `instanceof` 检查类继承不可靠，因为存在多个 React 副本以及某些转译代码中缺少静态属性等问题。
- `React.Component.prototype` 上的 `isReactComponent` 标志为 React 提供了一种实用且可靠的方法来确定组件类型。
How Does the Development Mode Work? — overreacted
2 months ago
- 开发模式包含有助于检测错误的警告，但会增加打包体积并降低性能。
- __DEV__ 常量在构建时被替换，而压缩工具会在生产环境中移除死代码。
- 像 webpack 这样的打包工具会将 process.env.NODE_ENV 模式替换为字符串字面量。
- 死代码消除需要静态条件；复杂的表达式或模块边界可能无法生效。
- 像 Create React App 这样的现代工具将开发和生产构建分离为不同的命令。
- 开发警告应默认开启，以便尽早捕获错误，尤其是针对新用户。
- process.env.NODE_ENV 的约定源自 Node.js，并被 browserify 和 React 采用。
- React 现在预编译了开发和生产环境的分离包，以避免运行时检查。
- 文章倡导将模式作为 JavaScript 环境中的一等概念。
On let vs const — overreacted
2 months ago
- 作者之前主张使用'let'而非'const'的文章引发了争议，多数人倾向于尽可能使用'const'。
- 偏好'const'的理由包括：减少心智负担、防止重新赋值导致的错误、教授不可变性概念，以及检测如React Hooks中无意义的赋值。
- 反对的理由包括：丢失意图表达、与不可变性混淆、避免使用'let'的压力导致代码别扭，以及在实际中重新赋值很少引发错误。
- 作者总结称自己并不在意，并建议遵循现有代码库的约定，使用linter自动化决策，并删除任何烦人的lint规则。
Porffor: An ahead-of-time JavaScript-to-native/WASM compiler
2 months ago
- Porffor is an ahead-of-time JavaScript compiler that outputs WebAssembly or native binaries, achieving 10-30x smaller and faster WebAssembly output than existing JS-to-Wasm projects by compiling rather than bundling an interpreter.
- JS compiled to Wasm enables sandboxed execution for secure server-side hosting and edge runtimes, with low overhead compared to JITs, allowing more customers on the same hardware.
- Compilation to native binaries reduces sizes up to 1000x (e.g., from ~90MB to <100KB), enabling JS use in embedded systems, game consoles, and tiny CLI apps under 1MB.
- Porffor compiles JS to C then to native, works anywhere C works, and natively supports TypeScript without a build step.
- It is written in JS with 0 eval for safety, performs static analysis for optimizations, and avoids the trade-offs of interpreters or multiple JIT tiers by compiling first and running later.
- Drawbacks include lack of dynamic JS evaluation (like eval) and early-stage incompleteness, but it is tested against the Test262 conformance suite every commit.
An AL mother killed herself to fulfill a ChatGPT prophecy, lawsuit alleges
2 months ago
- 浏览器中禁用了JavaScript，导致网站无法加载。
- 该问题可能是由浏览器扩展、网络问题或浏览器设置引起的。
- 建议的解决方案包括检查网络连接、禁用广告拦截器或尝试使用其他浏览器。
Pixar lays off over 100 Bay Area workers using ElastiGirl letterhead
2 months ago
- 用户的浏览器中禁用了JavaScript。
- 一条消息提示用户启用JavaScript以继续。
- 网站的一个必要部分未能加载，可能是由于浏览器扩展、网络问题或浏览器设置所致。
- 建议用户检查连接、禁用广告拦截器或尝试使用其他浏览器。
Mohabi: Disaggregating and Sandboxing the Firefox JavaScript Engine
2 months ago
- Mohabi is a modern Firefox browser with a securely sandboxed JavaScript engine (SpiderMonkey) using software-based fault isolation (SFI).
- The JavaScript engine was disaggregated from the rest of the browser, requiring complex transformation across data structures and control flow.
- An optimized SFI toolchain was developed to handle large memory footprints and unique JavaScript engine challenges.
- Mohabi incurs modest overheads: 24.82% on JetStream and 24.43% on Speedometer benchmarks.
- The x86-64 SFI toolchain is the fastest to date, with overheads between 5.9%–6.6% on SPEC 2017.
- This is the most ambitious case study of retrofitting in-process sandboxing in a large system.
How Did Node.js Come About?
2 months ago
- Node.js 由 Ryan Dahl 于2009年创建，作为一个服务器端JavaScript平台，旨在解决并发和文件上传进度问题。
- Dahl 最初尝试了Ruby（使用Mongrel）和C，但发现它们不够理想；他选择JavaScript是因为其非阻塞I/O和庞大的开发者社区。
- 2009年在JSConf EU上的首次公开演讲促成了Joyent的赞助，使得全职开发成为可能。
- 原生Windows支持在0.6版本（2011年11月）中添加，npm从0.6.3版本开始成为Node.js的组成部分。
- Dahl 于2012年退休，将开发工作移交给Isaac Schlueter；0.8版本提升了性能和稳定性。
- 2014年12月，由于对Joyent管理的不满，创建了一个名为io.js的社区分支。
- Node.js和io.js于2015年6月合并为Node.js基金会，从而产生了版本4并建立了定期的LTS发布周期。
- 2018年，Dahl推出了Deno，这是一个新的JavaScript/TypeScript运行时，用以解决Node.js的遗憾；2019年，JS基金会和Node.js基金会合并成立了OpenJS基金会。

javascript

Leaflet.js

EU tells firms to label AI-generated content from Sunday

Recursion is lying to you

Beej's Bit Bucket

Javascript obfuscation tricks

Overview of JavaScript Virtualization Obfuscation

Try-Catch Control Flow Obfuscation

Beej's Bit Bucket

Beej's Bit Bucket

async() => { await }

Making a Shuffle Button

Why Do We Write super(props)? — overreacted

How Does React Tell a Class from a Function? — overreacted

How Does the Development Mode Work? — overreacted

On let vs const — overreacted

Porffor: An ahead-of-time JavaScript-to-native/WASM compiler

An AL mother killed herself to fulfill a ChatGPT prophecy, lawsuit alleges

Pixar lays off over 100 Bay Area workers using ElastiGirl letterhead

Mohabi: Disaggregating and Sandboxing the Firefox JavaScript Engine

How Did Node.js Come About?