首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端工作方式要换了?HTMX简介:无需JavaScript的动态HTML

答案很简单:它使用服务器端渲染的HTML作为编辑标记,并将表单封装抽象到框架中。JavaScript 仍然在幕后工作。...即使使用像React这样的东西,从一个表单到另一个表单也有一定数量的模板代码。当然,HTMX并没有完全消除这一点,但它已经将工作转移到了服务器上。 HTMX的服务器端 现在,让我们考虑等式的服务器端。...从这些例子中得到的结论是我之前提到的:服务器负责提供HTML(带有HTMX标签)的适当大小的块,以填充前端为其各种交互所需的屏幕的不同部分。...结论是这个概念和这个项目本身一样有益。作为一个成熟的项目的HTMX可能最终不会像今天这样工作,但它已经证明是一个有益的影响。...我们已经看到了许多服务器端方法,它们总是似乎模糊了HTML、JavaScript和CSS的强大组合,这三者最终总是胜出。也许这次会不同。这是一个大的摆动。

68410

框架究竟解决了啥问题?我们可以脱离它们吗?

大家好,我是 ConardLi,相信各位在 Web 开发的工作中已经离不开框架了,不知道有多少同学还用原生 JS 写代码呢?你有认真思考过框架究竟为我们解决了什么样的问题吗?...在没有框架的情况下进行探索,似乎一个不可避免的结果就是实现一个自己的框架来进行响应式数据绑定。...在 ReactJS 和 SolidJS 中,我们创建了可以转换为命令式代码的声明式代码,在 DOM 中添加或删除这个标签。在 Svelte 中,会直接编译生成这样的代码。...但是如果我们根本没有这样的代码,而是直接使用 CSS 来隐藏和显示错误标签呢?...这样的技术有几个优点: 捆绑依赖包的大小为零。 没有构建的步骤。 在本地浏览器代码中,变更的传播经过了优化和测试,并且避免了例如追加和删除这样不必要的 DOM 操作。

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

    15分钟开启你的机器学习之旅——随机森林篇

    如果模式是新的,模型以前没有见过很多次,或者没有足够的数据,机器学习模型的表现就不会很好。此外,机器学习虽然可以支持各种用例,但仍然需要人类的验证、感觉检查和专门领域知识。...随机森林是这样的决策树的集合。使用多个树可以降低过拟合(模型对于第一组特定的训练数据集工作得非常好,但对后续数据集工作不好)的风险。 创造像这样复杂的模型似乎令人望而生畏。...在继续之前,请确保你已经安装了Python(我使用的是Python2),并且在上面提到的3个包装中加载。这个可以在终端做,用pip安装pandas(numpy和sklearn也是一样)。...在实际应用中,这个过程要花更多的时间,但这是理解机器学习的基本原理和关键步骤的很好的第一步。 此外,使用预先准备好的数据集有很大好处。...在大多数情况下,要做大量的工作将数据变为易于建模的形式之后,机器学习的荣耀才会显现。这些工作包括数据清洗,特征选择,转换和格式化等。

    850160

    自动增长Textareas的最干净技巧「心得分享」

    想法是使 更像 div>,因此它的高度可以扩展以包含当前值。这几乎是奇怪的,没有一个简单的原生解决方案,不是吗? 现在我得到了一个非常好的原生解决方案。...这里是演示,如果你只是想要一个工作的例子 Auto-Growing <textarea>  label for...相反,​您可以在另一个元素中完全复制该元素的外观,内容和位置,再复制的元素隐藏起来。 现在,这三个元素都是相互联系的。无论哪一个子元素最高,都会把父元素推到那个高度,而另一个子元素也会跟随。...我们还需要在复制的文本上 white-space: pre-wrap; ,因为这就是textareas的表现。 这是最奇怪的部分 在我的演示中,我将 ::after 用于复制的文本。...如果你不这样做,最终的结果会让人感觉 "跳脱"。我不能说我完全理解它,但它似乎更好地尊重了跨textarea和文本元素的换行行为。 如果你不想使用伪元素,嘿嘿,我没意见,只要注意跳动的行为即可。

    1.2K10

    学习React,从攻克JSX开始

    吐槽:虽然JSX出发点是好的,而且写起来也很简单,但是对于要在JS中写类HTML格式的内容,我的内心是排斥的,感觉非常不习惯。这不是我熟知的web开发啊!有种在开发app的感觉,一个个自定义的组件。...写法一:一个标签内嵌纯文字 我习惯在写JS的时候,将这些标签写在字符串中,然后拼接起来。看到这么写,真的觉得是个bug,浏览器一定会报错的!然而在react中,不会报错的,这是正确的。...好奇心旺盛的我,不愿意屈服于所有的外面都要加一个标签包裹,文档说的是一个闭合的标签,那么[]这样包裹一个数组可不可以呢?wow~没有报错!...render() { return div className="App"> ..... } 复制代码 JSX中的标签属性 写JSX会发现,虽然我是在写HTML,但是有些属性好奇怪啊...document.getElementById('myid').className \\遇到特殊的label id="label" for="xxx">label>,这个for在JS中怎么获取呢?

    1K20

    整洁架构之CSS

    目前看来并没有什么不妥。 问题不在于实现而是在于维护。接下来我就以一些常见的实际需求变更来看看上面的代码存在怎样的问题。...和 div 一个确切的 class 名称,那么当你修改 DOM 元素时也仅仅需要修改 DOM 元素,而无需修改样式文件了 上面举得这个例子是水平拓展的情况,也就是说我在某一元素的同一级新增一个元素。...在一连串的 DOM 标签的层级关系中,哪怕只有一个元素出现了问题(可能是元素标签类型发生了修改,还有可能是在它之上新增了一个元素)都会导致样式大面积失效。...在 SASS 中虽然我们可以给类名添加参数,把它当作参数相互传递,但它与我们实际编程中的变量和函数并不相同:JavaScript 中的函数我们往往只关心它的输入与输出,只是定义函数并不会对程序的结果造成影响...所以当我发现某个框架只有要求人们阅读完数十页最佳实践有关的文档才能写出符合官方标准的好代码时,那么现实工作中好代码出现的概率基本为0——在规范输出代码上,一则有效的 eslint 规则比十页文档都要强。

    39210

    新人自学前端到什么程度才能找工作?

    这个问题打我记事起到现在,问过我的人,没有1000也有800了。足以见得这个问题是多么的不得人心。 标签,从html、body、div、label、span、p、b、em...等等,他就往下背,背了干嘛呢?不知道,先背了再说。就跟学英语一样。然后记不住啊,心里就急。...哎,你别笑,真有这样的。 ? 后不容易终于明白了html标签,其实真的就只是几个标签而已,其实只会一个div就足够了,大不了满网页的div大泛滥呗。...我还真不是这意思,我总结一下啊, 1、练习是实践; 2、看书是理论; 在没有实践的情况下,去看理论,你无论如何理解不了。所以我说,你自学是学不上去的。...就例如你学会了在input上添加onclick事件,然后我告诉你用prototype原型模式,你都不知道怎么用?在什么时候?什么地方用?这个就需要实践的积累。 3、找工作,运气也很重要。

    2.7K20

    【译】CSS中存在随机数吗?

    其他语言的随机化 正如Robin Rendle在一篇关于CSS技巧的文章中解释的那样,可以使用CSS变量实现一些“动态随机化”。...avatar 为什么我关心CSS中的随机数 在过去,我曾开发过一些简单的只使用CSS的应用程序,如益智游戏、Simon游戏和魔术。但是我想做一些更复杂的事情。...稍后我将讨论有效性、实用性或创建这些只使用CSS的代码片段的实用性。 基于某些桌游可以表示为有限状态机(FSM),它们可以使用HTML和CSS表示。于是我开始开发一款蛇与梯子的游戏(又称瀑布与梯子)。...简单地说,问题是浏览器只在鼠标行为向下与向上的元素相同时才触发click/press事件。 由于旋转动画,鼠标向下的顶部标签不是鼠标向上的顶部标签,除非我时间设置得足够快或足够慢,让动画绕一圈。...在改掉这些之后,剩下的事就是创建一个小的界面来绘制一个可点击的假骰子,CSS版的《蛇和梯子》就完成了。 这种方法有一些明显的缺陷 它需要用户输入:必须单击一个标签才能触发“随机数生成”。

    1.8K20

    HTML入门

    例如: 今天是个好日子 在HTML中,标签表示标题,那么,我们可以使用开始标签和结束标签包围文本内容,这样其中的内容就以标题的形式显示了。...2 基本语法 2.1 关于注释 如同大部分的编程语言一样,在HTML中有一种可用的机制来在代码中书写注释。...为了将一段HTML中的内容置为注释,你需要将其用特殊的记号 包括起来, 比如: 我在注释外! 我在注释内!...注意:一个块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。 2)div和span div> 是一个通用的内容容器,并没有任何特殊语义。...大小写:属性和属性值对大小写不敏感。不过W3C标准中,推荐使用小写的属性/属性值。 引号:双引号是最常用的,不过使用单引号也没有问题。

    2.3K30

    ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

    前文索引: ASP.NET Core教程【一】关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: Speaker Detail  这很好的把action和controller分开了 下面我们看看把实体提交到数据库的代码(cshtml.cs文件中) using Microsoft.AspNetCore.Mvc.../Index"); } }} 一般我们在OnGet方法中初始化页面需要的状态数据; 这个页面没有状态数据需要初始化,所以我们就不用做任何事情 Page()方法返回一个PageResult...表单提交之后,OnPostAsync方法被执行, 如果提交的数据,在绑定到Movie对象的过程中,产生了异常,那么Page方法会被重新执行,等于刷新了一遍页面; 大部分数据验证的工作是在客户端通过JS...">label>会输出包含标题和for属性的label标签; 会使用模型里的DataAnnotations

    1.6K50

    用Vue.js递归组件构建一个可折叠的树形菜单

    -->              ` }); 递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型...在本教程中,我们将使用树状结构,其中每个节点都是一个对象: 一个 label 属性。 如果它有子节点,一个 nodes 属性,则它是一个或多个节点的数组属性。...在树菜单中,当我们到达一个没有子节点的节点的时候,我们希望停止递归。...正确的姿势 在视觉上识别子组件的“深度”是很好的,这样用户就可以从UI中获得数据结构的感觉。让我们缩进每一层的子节点来实现这个目标。 ?...用来画龙点睛的一个方法是,你可以添加一个加号/减号图标,这样可以使UI的显示更加明显。我还增加了的很好的字体和计算性能在原来 showChildren 的基础上。

    5.1K31

    前端如何提高用户体验:增强可点击区域的大小

    我把鼠标悬停在按钮上,光标仍然是一个指针,这很好。不过,我也可以选择文本和悬停时,有一个文本光标!如果使用了正确的元素,就不会发生这种情况。 ?...复选框和单选按钮 当存在复选框或单选按钮元素时,我希望可以单击它或关联的标签来激活/禁用它。 ? 从用户体验的角度来看,这是难以访问和糟糕的。...在 HTML 中,可以使用for属性将标签与输入框绑定在一起。... label for="option1">Option 1label> 或者可以将输入框放置在标签内: label for...章节标题 在某些情况下,需要在章节标题的远端添加“查看更多”按钮或箭头。 在下面的示例中,我将箭头放置在假圆中,以便可以正确地使箭头居中。

    4.8K20

    Vue.js 系列教程 3:Vue-cli,生命周期钩子

    这里要注意的几件事: 和 React 一样,必须返回一个闭合的标签,在这里我使用一个 div 。在SVG中我也使用 元素。任何标签都可以,但是整个模板必须包裹在一个标签中。...之前简答地介绍了 slots ,当我们在 Vue 组件中通过局部样式标签使用 slots 时,它们适用于具有 slots 的组件。这是非常有用的,因为你可以很容易地切换组件和改变样式。...在开发过程中,使用特殊的 `.vue` 文件来组织 HTML,styles 和 JS 非常有帮助。我喜欢完全分离的方式,可以很清楚地看到每一部分,我还不适应这种紧密联系在一起的方式。...: #ccc; } .bkimg { filter:url(#inverse) } 注意我在这里给组件中的 slot 设置了不同的样式,这是很好的工作方式,但这只是一种方法...通过 components,slots 和 props 构建程序的方法还有很多。这里的代码也只显示了部分内容。我建立了该示例的 仓库 ,使用 Vue-cli 构建的。

    1.5K50

    从Lisp到Vue、React再到 Qwit:响应式编程的发展历程

    }"/>Label> 我怀疑 Flex 并不是响应式最早出现的地方,但它是我第一次接触到响应式。...Flex 没有区分更新属性和更新 UI,导致大量的 UI 抖动(渲染中间值)。 事后看来,我可以看到哪些架构决策导致了这种次优结果,但当时我并不清楚,我对响应式系统有点不信任。...脏检查通过在浏览器执行任何异步工作时读取模板中绑定的所有属性来工作。 div> 这种方法的好处是,任何 JavaScript 对象都可以在模板中用作数据绑定源,更新也能正常工作。...精细的反应式系统的好处在于,开发人员无需任何努力,运行时只执行最少量的代码! 精细的反应式系统的手术精度使它们非常适合懒惰执行代码,因为系统只需要执行状态的侦听器(在我们的例子中是 Cart)。

    1.7K20

    【CSS】CSS 文本样式 ③ ( 文字排版案例一 | 设置标题 | div 中设置布局 | hr 标签设置横线 | p 标签分割段落 | 设置页面总体文字大小 | 修改 h1 标签样式 )

    文章目录 一、 文字排版案例 二、设置标题 三、div 中设置布局 四、hr 标签设置横线 五、p 标签分割段落 六、设置页面总体文字大小 七、修改 h1 标签样式 八、文本中设置粗体显示 九、使用...那时候,他们还没有出世,何以今天也睁着怪眼睛,似乎怕我,似乎想害我。这真教我怕,教我纳罕而且伤心。 我明白了。这是他们娘老子教的! 将文本拷贝到 HTML 文件中 : 没有出世,何以今天也睁着怪眼睛,似乎怕我,似乎想害我。这真教我怕,教我纳罕而且伤心。 我明白了。这是他们娘老子教的!...>1918年5月15日 鲁迅 收藏本文div> 五、p 标签分割段落 ---- 使用 p 标签分割段落 代码示例 : 六、设置页面总体文字大小 ---- 在 head 标签中 , 设置 body 标签中的 文字 默认 字体大小 16px ; <style

    2.5K20

    Vue.js 系列教程 2:组件,Props,Slots

    ' }); 代码正常运行,但用处不大,因为它只能使用一次,我们还没有向不同的组件传递信息。从父组件向子组件传递数据的方式称为 props。 下面是我能做的最简单的例子,所以非常容易理解。...虽然有些作用,但是字符串中的内容仍然有限制。最后,在这个评论列表中,我们希望有照片和作者的名字,你可能已经猜到过多的信息会非常拥挤。而字符串中没有语法高亮效果。... Ha ha aw div> 然后在程序实例中,我们可以在在 组件标签中传递内容,它会自动填充到 slots 中: div... 就我个人而言,如果我一次使用多个 slot,我会将所有的都名字,这对于其他的维护人员来说非常清晰,但 Vue 提供的这个灵活的 API 也很好。...我喜欢这个 API 的功能。 这很好,但为了简单起见,我们总是把所有内容放置在一个或两个文件中。当建立网站时,如果将单独的组件放在不同的文件中,并在需要的时候导入进来,这样的组织性更强。

    1.6K100

    试试原生 Web Component: 比你想象的容易

    在这里,我们在模板标记中插入了“web components”这个词。如果我们对这个插槽不做任何事情,它默认为标签之间的内容。...注册组件 正如我所说的,你确实需要一些JavaScript来完成这些工作,但它并不是我一直认为的那种超级复杂、有上千行代码、有深度的代码。希望我也能说服你们。 你需要一个注册自定义元素的构造函数。...现在,在我的脑海中,我假设一个定制元素获取模板的一个副本,插入您添加的内容,然后使用shadow DOM将其注入到页面中。虽然这是它在前端的样子,但在DOM中却不是这样工作的。...但由于自定义元素也是元素,我们可以在任何CSS文件中使用它作为元素选择器,包括页面上使用的主样式表。尽管从技术上讲,插入的材料不在模板中,但它在自定义元素中,CSS中的后代选择器也可以工作。...注意这里的重复,以确保替换的元素和模板中的元素的样式是相同的。

    77920

    从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    2、html的发展历史 超文本标记语言(第一版,不叫 HTML 1.0)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准); HTML 2.0——1995年11月作为RFC...相比之前的进步: 取消了一些过时的 HTML4 标记 将内容和展示分离 一些全新的表单输入对象 全新的,更合理的Tag 本地数据库 Canvas 对象 浏览器中的真正程序 Html5取代Flash在移动设备的地位...4、html5优缺点 优点: 提高可用性和改进用户的友好体验; 有几个新的标签,这将有助于开发人员定义重要的内容; 可以给站点带来更多的多媒体元素(视频和音频); 可以很好的替代FLASH和Silverlight...div class="right">div> div> div class="footer">div> 那么在 html5 下语义化标签怎么做呢?...2、html5 部分新增的标签 2.1、结构标签 section:独立内容区块,可以用 h1~h6 组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分; article:特殊独立区块,表示这篇页眉中的核心内容

    3.3K20

    我在产品上线前不小心删除了7 TB的视频

    这个帖子在日前在 Hacker News 之所以引起很多人的讨论和共鸣,或许是因为许多经验丰富的工程师都是这么走过来的。 虽然这是一个“新手贴”,但它也是个不错的帖子。...然后就没有然后了。 所以说,我们得重新上传这些视频素材。我提议构建一个自定义 API 脚本,从 OTT 那边下载视频、再把素材上传至 Enterprise(和我们的产品)。...所以在使用这个脚本之后,所有不存在于我们数据库第一页里的视频都会被从 Vimeo 中删除。 这里还有另一个问题:我测试了代码,并使用了以上示例中的这个错误循环。...(我也想过换个高速网络环境,但一是没有比较快捷的提速途径、二是出站流量成本过高。)效果还是不理想,毕竟就算是饱和传输也得占满整整 4 天,再出一丁点问题就要超时。...vimeo.com/upload/videos'); } }); 这段代码确实不怎么样(特别是其中用超时来解决 Playwright 中.click() 的部分),但它还是发挥了符合预期的效果,只有一个意外

    92410

    超实用!50+个ChatGPT提示词助你成为高效Web开发者(上)

    如果你已经感到编写代码的重复和繁琐让你疲惫不堪,想要提高自己的效率,那么你来对地方了。ChatGPT是一款能够帮助你优化工作流程、减少错误并获得提高代码的见解的强大工具。...在这篇博客文章中,我们将向你提供超过50个提示和策略,以帮助你通过使用ChatGPT来加速你的Web开发工作流程。...); break; } 通常情况下,在您的提示结尾加上冒号,并将您的代码块粘贴到新的一行中是一个好的习惯。...提示:我在以下代码片段中遇到了错误[error],我该如何修复它?...优化标题和描述:在HTML标题标签和描述标签中使用关键词,以便搜索引擎更好地理解页面内容。确保标题和描述吸引人,并鼓励人们点击链接。 优化内容:使用关键词在落地页内容中,并确保它们自然地融入内容中。

    95721
    领券