前段时间做了一个项目,是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的,在减少包体积上有一些方法和大家分享一下。我们目标是将包体积降到几十 k 这样一个级别上,不受限于包体积,坦然使用框架。
Can,携程前端开发,目前从事小程序开发工作,对编译打包技术、小程序跨平台解决方案有浓厚兴趣。
有一个月没有写博文了,最近经历了离职,找工作,疫情导致的工作延期,新入职在临港的分公司,搬家到临港,所以一直延期博文更新,也没有学习新知识的时间。然后新入职的这家公司项目没有做前后端分离,也就是从后端到页面数据绑定都是后端的活,前端框架使用的是Layui前端框架。这种框架之前没有在公司用到过,也没有接触过所以,这里系统的学习一下。
EasyNVR被越来越多的用户所接受使用,由于EasyNVR、EasyNVS自身拥有相对简洁、大方的页面样式,所以部分用户希望直接使用对应的前端web页面引用与自身的实际项目中,本篇博文将具体接受如何自主修改EasyNVR、EasyNVS对应的前端web界面。
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。
weapp-css-modules 是小程序的简化版 css-modules,比标准 css-modules[1] 代码量更少的优化方案
在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应。不过我们仅仅在首页返回了一句话:欢迎访问我的博客。这是个 Hello World 级别的视图函数,我们需要编写真正的首页视图函数,当用户访问我们的博客首页时,他将看到我们发表的博客文章列表,就像 演示项目 里展示的这样。 首页视图函数 上一节我们阐明了 Django 的开发流程。即首先配置 URL,把 URL 和相应的视图函数绑定,一般写在 urls.py
换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考。
HTML5学堂:无论是PC还是移动端,系统自带alert样式总是让人感觉很丑陋,今天就教大家如何修改alert弹窗样式。 只能自定一个弹窗样式 首先必须明白的一点是,alert()只是一个方法,而这个方法内部是native code,这是我们无法修改的部分,而最终暴露的只有这个alert()方法名字而已,你甚至拿不到alert的属性,因此要真正意义上的做到修改alert样式是不可行的。 有了以上这个条件基础,我们能做的只有重写alert()方法,替换掉系统自带的alert()方法。 一行代码替换alert(
将素材目录下的index.html页面,拆分成三个文件,分别是:index.css,index.js,index.html
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情 >>
Shadow DOM的样式是完全隔离的,这就意味着即使你在主文档中有一个针对全部 标签的样式选择器,这个样式也不会不经你的允许便影响到 shadow DOM 的元素。
因为博主最近一直在想着把自己的文章同步到博客园,掘金,简书等类似的技术博客网站上,偶然间看到了博客园可以自己自定义博客的样式。博主立马就来了兴趣,毕竟谁不喜欢好看的,我就是馋它的身子。我下贱。
本文介绍了CSS Namespace和React-Native,以及如何在React-Native中通过CSS-in-JS方案实现组件的样式隔离。同时,本文还介绍了一种基于BEM的CSS Namespace方案,用于解决在React-Native中CSS的隔离问题。
在上几期的文章中,我们介绍了关于EasyPlayer流媒体播放器的最近更新功能及优化,感兴趣的用户可以翻阅我们往期的文章进行了解。H.265网页播放器EasyPlayer不仅实现了视频实时录像的解决办法,而且还能支持在iOS上实现低延时直播,其灵活的视频能力,极大满足了用户的多样化场景需求。
零售商家的日常经营中,小票打印的场景无处不在,顾客的每笔消费都会收到商家打印出的消费小票,这个是顾客的消费凭证,所以小票的内容对顾客和商家都尤为重要。对有赞零售应用软件来说,小票打印功能也是必不可少的,诸多业务场景都需要提供相应的小票打印能力。
随着互联网基础设施建设的发展,4G/5G/NB-IoT各种网络技术、物联网技术的大规模商用,视频随时随地可看、可控、可回溯的诉求越来越多,互联网思维、架构和技术引入进传统监控行业里,成为新形势下全终端监控的基础需求。因使用区域受限、实施成本和入口门槛高,传统监控行业和摄像机直播系统无法借力优质云资源搭建属于自己的监控云平台,客户终端出不了监控的内网,无法做到公网实时监控与录像回放,更别说用手机、微信、H5、无插件随时随地看视频了,之前的方案中我们提到的EasyNVR产品已经完全可以解决以上痛点。
前言 对于问题多多的IE678,FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题,但对于ever green的浏览器就不用理会了吗?下面尝试较全面地解密FOUC。 到底什么是FOUC? 页面加载解析时,页面以样式A渲染;当页面加载解析完成后,页面突然以样式B渲染,导致出现页面样式闪烁。 样式A,浏览器默认样式 或 浏览器默认样式 层叠 部分已加载的页面样式; 样式B,浏览器默认样式 叠加 全部页面样式。 为什么会出现FOUC 我们了解当输入网
在开始前,需要先了解webpack中的四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。
一直都用博客园写博客,后面自己曾经想自己写一个博客项目,但是因为各种各样的事情最后做了一半就没能继续做下去。但是中间定制markdawn样式的时候接触到的代码高亮插件highlight.js倒是给我留下了很深的影响,今天有时间于是决定利用当初的经验重新diy一下博客园的代码块样式,算是对夭折的博客项目的一个弥补吧。
百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥,或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥:http://lbsyun.baidu.com/apiconsole/key#。
这两天移动互联网领域发生了一件大事,微信发布了小程序,然后网上突然涌出了诸多教程,貌似大家对微信小程序的功能与想象空间兴奋不已,我免不了俗,搭建个简易的开发环境玩一玩。 搭建开发环境 按官方教程,是得先获得内测资格,取得微信小程序appid后,才可进行小程序开发的。很不幸,我没获取内测资格,但随便一搜,就找到网上的破解教程,我就学习玩一玩,就直接破解吧。 首先下载0.7版的微信web开发工具 百度: https://pan.baidu.com/s/1pLxqFzH (密码: bwt9) 安装完毕后,打开开发
最近在搭建一个开源的项目环境时,我需要打一个 ES 模块的包,以便开发者可以直接通过 npm 就能安装并使用,但是这个项目注定了会有样式,而且我希望打出的包的文件目录和我开发目录是一致的,似乎 Rollup 是一个不错的选择,但是我(自虐般地)选择了 Typescript 自带的编译器 tsc ,然后我就开始我的填坑之旅~
这里说明一下,webpack4和webpack5的配置信息或者显示信息可能有点区别
Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同,Tailwind CSS 组件没有预先设置好样式。可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式,如 margin、flex、color 等。
随着互联网基础设施建设的发展,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看、可控的诉求越来越多,互联网思维、架构和技术引入进传统监控行业里,成为新形势下全终端监控的基础需求。因使用区域受限、实施成本和入口门槛高,传统监控行业和摄像机直播系统无法借力优质云资源搭建属于自己的监控云平台,客户终端出不了监控的内网,无法做到公网实时监控与录像回放,更别说用手机、微信、H5、无插件随时随地看视频了,之前的方案中我们提到的EasyNVR产品已经完全可以解决以上痛点。
其实有很多场景会用到富文本框「通常后台维护一长串html文本,前台进行渲染展示」。但由于小程序的一些特殊性,无法直接渲染html,因此类似wxParse的开源组件诞生了「原理无非是穷举标签进行替换,差异在于覆盖是否全面和是否更加高效」
Vite是什么就不用笔者多说了,用过Vue的朋友肯定都知道,本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理,参考的是Vite最早的版本(vite-1.0.0-rc.5版本,Vue版本为3.0.0-rc.10)实现的,现在已经是3.x的版本了,为什么不直接参考最新的版本呢,因为一上来就看这种比较完善的工具源码比较难看懂,反正笔者不行,所以我们可以先从最早的版本来窥探一下原理,能力强的朋友可以忽略~
Darkmode.js 是由 Sandoche 开发的开源代码库,目前项目托管于 Github;用户可以通过轻量级的代码实现网站添加深色模式;除了默认切换方式,代码还提供了较为全面的自定义选项,用户可以根据自己需求进行切换。
当前项目为vue 2.6 + element-ui 2.14.1, 我们需要开发一个类似表格的表单组件, 可以看到除了表格样式以外,我们还需要嵌套各种表单组件,而组件功能基本与框架功能一致,如果对每个组件都做独立开发,显然是不现实的。所以我们的目标一定是尽量使用原组件
引入魔改样式的方法很简单,自建一个css文件,然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件,然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
js2flowchart 是一个可视化库,可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器,真的值得你拥有,看下面截图就知道了,有没有很强大。
那么,我们自己的网站如何适配暗色/亮色模式呢?首先说一下最基础的媒体查询,然后带大家了解一下我的适配方案(纯JS、CSS和HTML的前端操作)。
足迹地图可以展示你过去到访过的地方,以及到访地点的介绍与图片记录,图片点击可以放大显示,同时不同地标的半径大小表示了访问该地点的频率高低,如下图所示:
同样的插线板, 可以插电视机, 电冰箱, 洗衣机 电脑的usb接口, 可以查鼠标, 插键盘, 还可以外接移动硬盘 插槽的扩展性更强.
是指 Hot Module Replacement,缩写为 HMR。对于你需要更新的模块,进行一个"热"替换,所谓的热替换是指在不需要刷新页面的情况下,对某个改动进行无缝更新。如果你没有配置 HMR,那么你每次改动,都需要刷新页面,才能看到改动之后的结果,对于调试来说,非常麻烦,而且效率不高,最关键的是,你在界面上修改的数据,随着刷新页面会丢失,而如果有类似 Webpack 热更新的机制存在,那么,则是修改了代码,不会导致刷新,而是保留现有的数据状态,只将模块进行更新替换。也就是说,既保留了现有的数据状态,又能看到代码修改后的变化。
使用以下插件,依次实现:markdown字符串转HTML、自动生成目录(toc)、代码高亮等功能。
针对html,我们可以对script\link\style\video\audio\embed等标签的src或href属性进行分析。
样式借鉴了tower —— 一款团队任务管理的产品的样式,非常的简洁干净。然后,同时对移动端进行了适配:
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。 所以与其使用DOM直接改变莫个元素的样式,不如通过JavaScript代码去更新这个元素的class属性。 下面通过代码来比较这两种方式的差别: fun
日常休息,然后百度找了一些大佬的handsome美化版,声明下面教程来源于网络会在底部注明 非完全转载
实现方法: ① 使用removeClass()删除旧的class ② 使用addClass()添加新的class ③ 使用attr 直接替换原class ④ 使用 toggleClass 有就移除,没有就添加
作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计。那如何套用呢?今天就以我们系列实战教程中的CMS系统为例来应用第三方的后台模板LayuiCMS2.0为例来进行实战演练吧!
把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件,在最后引入
因为我们项目就是在vue-cli3.x的基础上进行的一个能力的补充,新的脚手架生成的项目如何引入vant,简单的说一下。 项目相关: panda-vue-template 手把手搭建vue小商城2.0 1、安装 如果你是老的脚手架搭建的vue项目,如何引入使用vant可以看看这个-->有赞vant组件库的引入; 新的@vue/cli3.x脚手架引入vant也很简单,我们先安装一下: $ npm install vant --save 因为我们的项目中本来是使用sass来作为css的一个预编译器
大家肯定要问了,那小程序开发跟影分身术也能扯上关系?没错,那自然就是:一套代码,多个小程序啦。
Validate是用于B/S结构客户端验证用的JQuery扩展插件,使用时需要引用两个js文件,分别是: <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script> <script src="../Contents/JS/jquery.validate.min.js" type="text/javascript"></script>
领取专属 10元无门槛券
手把手带您无忧上云