首页
学习
活动
专区
圈层
工具
发布

前端食堂技术周刊第 29 期:StackBlitz 加入字节码联盟、Safari 15.4、ESLint、可折叠设备布局

为双屏和可折叠设备构建 Web 布局 Tao of Node 关于 Framer Motion 布局的一切 antfu 分享了他的 VS Code 配置和扩展 如何使用 Three.js 和 React...为双屏和可折叠设备构建 Web 布局[10] 为了能使布局适应双屏和可折叠设备,Web 平台提供了很多与现有概念集成的新功能,如:媒体查询、CSS env() 环境变量、 Web API 等等。...antfu 分享了他的 VS Code 配置和扩展[13] 看看有没有你不知道的好东西。...好文推荐 下面来看一下好文推荐,本周推荐的好文是: 如何使用 Three.js 和 React 渲染你自己的 3D 模型[14] 在本文中将介绍如何使用 react-three-fiber 在 React...项目中渲染和配置在 Blender 或 Maya 等 3D 软件中创建的 3D 资产。

1.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    开发必备 | 新手如何快速掌握VSCode编辑器?

    扩展说明:IDE与编辑器差别以及VS Code所处位置 IDE(Integrated Development Environment,集成开发环境):对代码有较好的智能提示和相互跳转,同时侧重于工程项目...自带了 JavaScript、TypeScript 和 Node.js 的支持。也就是说,你在书写 JS 和 TS 时,是自带智能提示的。当然其他的语言,你可以安装相应的扩展包插件,也会有智能提示。...(折叠)区域 Fold (collapse) region Ctrl+Shift+] 展开(未折叠)区域 Unfold (uncollapse) region Ctrl+K Ctrl+[ 折叠(未折叠...文件内容搜索和替换 在当前文件中搜索,光标在搜索框里Cmd + F(Win 用户是 Ctrl + F),在当前文件中搜索,光标仍停留在编辑器里Cmd + G(Win 用户是 F3)。...ES7 React/Redux/GraphQL/React-Native snippets : React/Redux/react-router 的语法智能提示.

    1.7K11

    React 中的受控组件和非受控组件

    一些背景 如果初涉 React 应用开发,你可能曾嘀咕过:“受控组件和非受控组件是啥?”。那么我建议你额外花点时间先看看官网的文档。...在 React 应用中之所以需要受控组件和非受控组件,起因于、 和 这类特定的 DOM 元素默认在 DOM 层中维持状态(用户输入)。...受控组件用来在 React 中也保存该状态,比如同步到渲染输入元素的组件、树结构中的某个父组件,或者一个 flux store 中。 而这种模式可以被扩展至特定的非 DOM 状态相关的用例中。...比如,在最近的一个应用中,我需要创建一个可嵌套的 Collapsible 折叠组件,支持两种操作模式:某些情况下需要使其被外界可控(当应用中的其他区域发生用户交互时扩展开),其他时候它能简单的自己管理状态就可以了...React 中的 Inputs 对于 React 中的 Inputs,是这样工作的: 要创建一个非受控 input,要设置一个 defaultValue 属性。

    3.5K20

    【腾讯云 Cloud Studio实战训练营】深入解析CloudStudio—React 快速构建点餐页面

    CloudStudio的数据存储和传输都采用了加密技术,确保数据不被黑客或恶意软件攻击。 1.9 易于扩展 CloudStudio具有可扩展性,可以根据需要添加新的工具、插件和库。...2.5 代码折叠 代码编辑器支持代码折叠,可以将代码块折叠起来,以便更好地浏览和编辑代码。您只需单击代码行号旁边的折叠图标即可折叠代码块。...2.6 查找和替换 代码编辑器支持查找和替换功能,可以帮助您快速查找并替换代码中的文本。您可以使用快捷键Ctrl+F(查找)和Ctrl+H(替换)。...可扩展性:支持插件扩展,我们可以根据自己的需求安装和使用各种插件,扩展平台的功能和能力。 安全性:提供了安全的开发环境,项目的代码和数据都存储在云端,可以避免本地数据丢失和泄露问题。...可以考虑支持更多的编程语言和框架,提高平台的适用性和可扩展性。 提供更加优化的性能和稳定性:目前网站的性能和稳定性还有进一步提升的空间,有时候可能会出现一些卡顿和崩溃等问题。

    760131

    为什么 JSX 语法这么香?

    这段解释可抽离两个关键点:「JavaScript 语法扩展」「具备JavaScript 的全部功能」JSX 的定位是 JavaScript 的「语法扩展」,而不是“某个版本”,这就决定了浏览器并不会像天然支持...React在 React 框架中,JSX 的语法是如何在 JavaScript 中生效的呢?...Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。...其实在 React 中并不会强制使用 JSX 语法,我们也可以使用 React.createElement 函数,例如使用 React.createElement 函数写这样一段代码。...在降低学习成本的同时还提升了我们的研发效率和研发体验。Vue当然在 Vue 框架中也不例外的可以使用 JSX 语法,虽然 Vue 默认推荐的还是模板。

    1.5K40

    用一个HTML文件打造你的Ollama客户端:技术极客的轻量级解决方案

    在“环境变量”中,新建一个变量,变量名为OLLAMA_ORIGINS,变量值为*。保存设置并重启Ollama服务。然而,用户可能会遇到跨域限制的问题。...该工具支持智能聊天、代码高亮和推理折叠功能。例如,输入“今天天气怎么样?”后,工具会迅速给出准确的回答。...更重要的是,所有数据均在本地处理,不会上传到云端,确保了用户的隐私和数据安全五、跨平台支持与便捷性LocalAPI.ai 支持跨平台使用,无论是桌面端还是移动端,用户都可以随时随地访问它。...这种跨平台的便捷性使得用户能够更好地利用碎片化时间,提高工作效率六、功能展示与开发环境LocalAPI.ai 的开发环境基于Vite + React + TypeScript,这种现代化的技术栈不仅保证了它的高性能和高效率...这种高级部署方式不仅提高了服务的性能和稳定性,还为用户提供了更多的扩展性总结LocalAPI.ai 以其轻量级设计、强大功能、多模型支持、跨平台支持和隐私保护等特点,成为了开发者和普通用户的理想选择。

    30510

    React v16.0正式版发布

    这次发布的大部分特性,比如错误边界和fragments,都是重写核心代码实现的。在接下来的几个版本中,你可以期待更多的特性,因为React的无限潜能已经被激发出来了。...升级 尽管React16包含了很重大内部改变,但在升级方面,和之前发布React版本一样。在一般情况下,如果你的应用运行在15.6上没有任何警告提示,那就可以运行在16上。...setState: 调用setState传入null将不会触发更新。 直接在render方法中调用 setState会导致更新。不管怎样,你也不应该在render方法中调用 setState。...这也使得它和 componentDidMount()保持一致( componentDidMount()在之前的版本也是不会调用的)。...即使是在CommonJS环境中,React和ReactDOM预编译成一个单独的文件。如果你之前依赖React内部文件,并且不再工作了,那么请告诉我们你的具体情况,我们会尝试为你制定迁移策略。

    99720

    前端开发控件折叠面板(Accordion)——详解与实现

    采用折叠面板不仅能够减少页面的滚动距离,而且在视觉上能够起到分组与区分不同信息块的作用,使得整体界面更具层次感和交互性。...在技术实现层面,折叠面板可以通过纯 HTML、CSS 与 JavaScript 实现,也能够在各种前端框架中找到对应的组件,例如 React、 Angular、 Vue 等均有相关实现方案。...整个交互过程基于简单的条件判断和 DOM 操作,易于理解和扩展。这种实现方式虽然属于基础范畴,但已能很好地展示折叠面板的核心交互原理。...对于那些希望在项目中快速实现折叠面板效果的开发者,可以选择使用已有的前端库,这些库不仅封装了常见的交互逻辑,还提供了主题、动画和响应式设计支持。...正因如此,折叠面板在现代 Web 开发和移动应用开发中占据了重要位置,其灵活性与扩展性使得其成为不可或缺的交互组件之一。

    75910

    详解微信原生小程序架构及同构方案

    H5可以理解为运行在移动端的web页面,本质还是由HTML+CSS+JS构成的web应用。小程序和H5的区别也就是小程序和网页的区别。...API对节点进行各种操作,通过window对象实现原生事件响应、页面跳转;由于小程序的JS代码运行在JSCore,与渲染层分离,所以在逻辑层中无法获得Dom和Bom,从而无法使用各种Dom API 网页开发者需要面对的环境是各式各样的浏览器...,这样做有几点好处: 扩展 Web 的能力。...小程序多端同构方案 很多企业都有自己的小程序平台,如微信、支付宝、头条等,如今市面上很多产品都是基于React、Vue等框架开发的web应用,但web端代码是不可能运行在小程序平台上,而开发几套代码的时间和维护成本又太高...支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。

    3K30

    Android 折叠屏就要来了

    视频的动态图上我们可以发现,三星的折叠屏手机是屏内折叠设计,将屏幕折叠后手机的外部还有一块屏幕显示内容,但是尺寸不大。...其实在很早之前,Google 就已经考虑到 Android 会运行在不同屏幕尺寸的设备上,例如 Android TV、Android Auto、Android Pad、Wear OS 等。...这些不同尺寸的设备,在整个 Android 的生态中,都占有不可或缺的地位。 但是你要注意到,通常针对不同的设备,我们会设计出两套完全不同 UI 风格,通常他们会被当成独立的 App 进行发布。...但是 Foldables 来了,就完全不一样了,通过折叠屏设备的两种变体效果:双屏设备和单屏设备,当折叠时,它看起来是一部手机,而当它展开时,它就变成了一台平板。...我猜想,应该会是一种类似前端中,Bootstrap 这种响应式框架,对开发来说,可能就是多了一种布局方式,并且应该会是以 Support 包的形式进行扩展支持。

    53630

    React18的JSX和Babel解析器

    什么是 JSXReact JSX 是一种 JavaScript 语法扩展,它允许开发者在 JavaScript 代码中直接编写类似 HTML 的代码,并在运行时将其转换为 React 元素。...JSX 的主要优点是它可以让我们在组件中更加直观地表达 UI 结构,HTML的声明式模版写法提高了JS的可编程能力在运行的时候 React 会将图中的 JSX 代码转换为一个 React 元素对象.JSX...的本质在上面也说了JSX并不是标准的JS语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能 在浏览器中运行需要借助 Babel 解析器前往中文文档看看是什么东西 点击前往 https...://www.babeljs.cn/点击页面当中的在线工具,我们进行在线的调试看看 JSX 经过解析器是什么效果勾选 React 语言左边 这里是写 React JSX 代码,右边是解析出浏览器运行的代码我们在...我们定义了一个 JSX 语法但是没有使用大括号解析变量那么它就不会生效const name = "杨不易呀";const element = Hello, name!

    43710

    md-editor-v3 使用指南与实战:特性、安装、集成与性能优化

    良好扩展性:支持表格、任务列表、代码块行号、目录、折叠等常见增强语法。生态互补:React 场景可使用同作者的 md-editor-rt,API 一致性高,便于多端统一。2....最佳实践与性能优化5.1 大文档编辑性能减少不必要的渲染:在大文档场景(> 1~2 万行)中,适度降低预览同步频率,或在输入时仅高亮当前视窗。...5.4 SSR/同构注意在 Nuxt/Next 等 SSR 场景中,使用客户端渲染包装(ClientOnly/dynamic import with ssr:false)。...自动保存与提示:结合 @onSave 和节流/防抖策略。键盘可达性:保证常用格式化与保存快捷键可用;给出可视化提示。6....md-editor-rt GitHub:https://github.com/imzbf/md-editor-rt总结md-editor-v3 是一款功能完善、性能优秀的 Vue3 Markdown 编辑器,凭借其灵活的扩展能力和良好的开发体验

    76331

    揭秘携程内部海量CRN项目解决方案

    摘要 随着公司内部CRN项目的日益增多,越来越多的业务部门开始意识到,是否可以将CRN的项目直接运行在浏览器上,以免去他们在H5和SEO上的额外开发。...它和CRN、RN的API保持一致,代码可以直接运行在CRN或H5环境中。开发体验友好,支持元素审查、源码改动动态刷新,运行时debug远程真机调试。CRN-WEB支持浏览器、微信等多个平台。...还有可以拿来直接用的第三方插件React-Native-Web-Scrollable-Mixin。 CRN还有一些扩展的业务自己及API。...其中我们自己扩展的CRN component大概有50个,涉及到react-native的API有30多个,react-native component有40个,module的其它功能组件有30个左右。...我们正在和去哪儿团队合作开发YRN-WEB。我们两家维护同一套底层,每家的业务代码加上这个底层就可以运行在各自的APP里去。

    1.2K50

    React Native性能之谜|洞见

    在PhoneGap、RubyMotion、Xamarin、Ionic一众跨平台开发工具中,React Native能够杀出一条血路,获得目前这么大的影响力,除了React社区生态圈的加持和Facebook...React Native的工作原理 在React Native的应用中,存在着两个不同的技术王国:JS王国和Native王国。...当应用运行时,Native王国和JS王国各自运行在自己独立的线程中: Native王国: 运行在主线程上(可能会有些独立的后台线程处理运算,当前讨论中可忽略) iOS平台上运行Object-C/Swift...在Native王国中,经过谷歌、苹果公司多年的优化调整,Native代码能够非常快速的运行在设备上。在JS王国中,JS代码作为脚本语言,也能够很快速的运行在JS引擎上,这两边独立来看都不会有性能问题。...这个过程非常简单,也不会涉及大量的数据转移。在React Native应用中,业务逻辑,应用状态,数据都在JS侧,所以UI事件只是一个触发器,不会有性能问题。

    1.7K50

    初探富文本之React实时预览

    此外,在富文本的实现中可能会有一些非常复杂的场景,例如第三方接口常用的折叠表格能力,这不是一个常见的场景而且在富文本中实现成本会特别高,尤其体现在实现交互上,ROI会比较低,而实际上公司内部一般都会有自己的...API接口平台,于是利用OpenAPI对接接口平台直接生成折叠表格等复杂组件就是一个相对可以接受的方式。...babel-standalone内置了Babel的核心功能和常用插件,可以直接在浏览器中引用,由此直接在浏览器中使用babel来转换Js代码。...,例如JSX、TypeScript、Flow,由于支持范围较小,Sucrase可以采用性能更高但可扩展性和可维护性较差的架构,Sucrase的解析器是从Babel的解析器分叉出来的,并将其缩减为Babel...和setTimeout等函数必须运行在window作用域下,这些函数都有个特点就是都是非构造函数,不能new且没有prototype属性,我们可以用这个特点来进行过滤,在获取时为其绑定window。

    83720

    Sublime Text 4 Dev Mac(前端代码编辑神器)

    sublime text 4 Dev mac是一款运行在mac端的代码编辑工具,集窗口分组、项目管理、扩展工具、代码折叠等多种功能与一身,支持vim模式,窗口分组、扩展工具、代码折叠等,而且sublime...text 4中文版支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能,还拥有代码片段的功能,可以将常用的代码片段保存起来,在需要时随时调用,堪称程序员开发神器!...- 键入@以跳转到符号,#在文件中搜索并:转到行号。这些快捷键可以合并,这样tp@rf可以带你到一个功能READ_FILE在文件中text_parser.py。...2.转到定义使用语法定义中的信息,Sublime Text自动***每个类,方法和函数的项目范围索引。...4.命令选项板该命令调色板抱不常用的功能,如排序,改变语法和更改缩进设置。只需几个按键,您就可以搜索您想要的内容,而无需浏览菜单或记住模糊的键绑定。用+ + P显示命令面板。

    53120
    领券