笔者近期在将前端架构 webpack 升级到 5 时，一些配套模块也需要进行升级，其中包括了 css 处理模块 PostCSS。旧版本使用的是 PostCSS 7，在升级至 PostCSS 8 的过程中，笔者发现部分插件前置依赖还是停留在 7 版本，且年久失修，在 PostCSS 8 中出现各种各样的问题，无奈只能研究源码，将目前部分旧版本插件升级至新版本。这里，笔者将升级插件的过程进行简化和提炼，让读者自己也可以编写一个 PostCSS 8 插件。
本文适用于所有前端开发人员。文章会介绍 PostCSS 的主功能实现原理，不是介绍 api，也不会介绍所有功能的原理，如果有需要了解全部功能或者查阅 API，可查看官方文档：https://postcss.org/api/。
vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。
原文链接：A look into writing future CSS with PostCSS and cssnext 译者：nzbin 像 Twitter，Google，BBC 使用的一样，我打算对 CSS 后处理器 PostCSS 的世界一探究竟。 PostCSS是什么？ PostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情，你需要安装一些 plugins 才能开始工作。这不仅使其模块化，同时功能也会更强。 它的工作原理就是
若对虚拟DOM想进一步了解，可查看另一篇文章《浅析虚拟DOM》 点击查看《浅析虚拟DOM》
React.JS是用于构建用户界面的JavaScript库 React.JS主要用于构建UI 下载使用：React.JS下载地址
继上次将vue项目脚手架工具从vue-cli2.x升级到vue-cli3.x后，除了环境、配置问题外，在运行时出现了一些个新的问题。 启动项目后，在内网非本机运行项目时，控制台报错如下：
借助相关的插件我们可以把新的特性降级到 css3乃至一些特性降级到css2.1...无缝过渡
在Windows 2000/XP/2003的开始菜单中执行“开始/运行”命令，在运行对话框中键入“cmd”命令，可进入命令行界面。
组件标签：以大写字母开头，如 使用组件的不变步骤： 1、定义组件 方式1：工厂函数组件（一种简单组件：没有状态的组件）
所有的类名和动画名称默认都有各自的作用域的 CSS 文件。CSS Modules 并不是 CSS 官方的标准，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）
VS Code可以通过名为代码片段的功能像编辑器中插入一段指定的文本，具体操作步骤为首选项->用户代码片段->新建全局代码片段。
申请ssl证书(https://freessl.org) => 正常企业还是使用收费ssh(http协议默认运行在80端口,https默认运行在443端口)
👆点击“博文视点Broadview”，获取更多书讯 在前端基础建设中，对样式方案的处理是必不可少的。 在本文中，我们将实现一个工程化主题切换功能，并梳理现代前端样式的解决方案。 1 设计一个主题切换工程架构 随着iOS 13引入深色模式（Dark Mode），各大应用和网站也都开始支持深色模式。相比于传统的页面配色方案，深色模式具有较好的降噪性，也能让用户的眼睛在看内容时更舒适。 那么对于前端来说，如何高效地支持深色模式呢？ 这里的高效就是指工程化、自动化。在介绍具体方案前，我们先来了解一个必会的前端工
1.Meteor: The Official Guide(Meteor官方指南) Meteor介绍的链接地址: http://www.geekpark.net/topics/211573 它是由Met
本篇不开发新的功能，不过对目前的编译环境重新整理一下。 区别开发编译与生产编译 在webpack.config.js中添加读取环境变量NODE_ENV ... var isProduction = (process.env.NODE_ENV === 'production'); ... 编译出css文件 ... var ExtractTextPlugin = require('extract-text-webpack-plugin'); ... var plugins_options = [ ...
自从中国联盟成员导航采用响应式布局之后，不少朋友反馈该页面在 IE8、IE7 浏览器会错排，经测试发现确实存在这个问题，但我一直也没去深究解决。这几天博客折腾得很厉害，把多说开除了，而又由于 wopu
该系列是由@marvinhagemeist撰写的，旨在通过一系列文章加速JavaScript生态系统。这些文章提供了有关如何加速JavaScript生态系统的有用信息。文章涵盖了各种主题，包括PostCSS、SVGO、模块解析、eslint和npm脚本。
日期对象用于处理日期和时间。 JavaScript Date（日期）对象 实例 返回当日的日期和时间 如何使用 Date() 方法获得当日的日期。 getTime() getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。 setFullYear() 如何使用 setFullYear() 设置具体的日期。 toUTCString() 如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。 getDay() 如何使用 getDay() 和数组来显示星期，而不仅仅是数字
prettier的配置项比较少（容易配置），且只专注于代码样式，而eslint还提供语法检查，现在的eslint也集成了formatter功能。
最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大
laravel中的前端代码都是形如xxx.blade.php。可以使用前端的工具来对blade,css,js进行压缩吗？当然，gulp可以做到。 gulp是什么？ 看完你就明白，这是个自动化构建工具的核心就是gulpfile.js。 用于laravel的gulp怎么写？ 把一切*.html换成*.blade.php就行了。 有什么坑要注意？ 异步执行，前后依赖关系必须写明。比如： gulp.task('rev' , ['concatCss', 'concatJs'],function() { return
脚本控件的作用 ASP.NET AJAX的脚本控件，连接了服务器端和客户端，因为我们（可以）只在服务器端编程，而效果产生在客户端，这就需要我们首先在服务器端编写一个控件类，然后包含一个或几个脚本文件，其中定义了客户端组件，可以让开发人员只在服务端操作控件，而在页面上添加客户端行为 一个典型的脚本控件就是UpdateProgress,我们来看一下它的实现方式 一个UpdateProgress的简单示例 创建一个aspx页面 <%@ Page Language="C#" AutoEventWireup="tru
第三步 去index.html里把meta name="viewport标签注释掉"
因为本人在腾讯，这是因为开发环境的 tlinux 的问题，导致 tini 出错了。寻找了很久，也没找到 特别有效的信息，于是查看一下 tini 的源码，看看 这个 错误是如何产生的。
大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。
小盒的直播业务一开始是打算用两套引擎切换使用的，所以需要封装一下。而且因为声网和阿里的直播sdk的官方文档都不是很全面，甚至有的还有错误（可能是文档没及时更新）导致无法正常运行，接入时问题多多，所以同时记录一下的接入过程中的问题及处理。
最近要弄一个爬虫程序，想着先来个简单的模拟登陆， 在权衡JxBrowser和HtmlUnit 两种技术， JxBowser有界面呈现效果，但是对于某些js跳转之后的效果获取比较繁琐。
在这篇文章中，我们讨论了基于gensim 包来可视化主题模型 (LDA) 的输出和结果的技术 （ 点击文末“阅读原文”获取完整代码数据******** ）。
PostCSS Sorting 按照指定的规则对CSS内容进行排序。 stylefmt 自动格式化样式 ESLint 代码检查的插件 beautify 代码美化插件 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试 Add jsdoc comments 添加对选中函数的参数进行注释 javascript(ES6) code snippets 从node 6.x后,就支持java
本期给大家在webpack5中如何配置css用到的解析和插件的使用，更准确的说是PostCSS的插件。众所周知，现在大部分前端项目都在使用webpack做打包，打包做解析的比较重要目的一个是给js做转化，比如es6转es5，混淆压缩等。然后就是对css进行解析，比如说scss转css，less转css，前缀自动补全，还有移动端项目px转rem或者px转vw。今天我们就介绍将后者其中的前缀自动补全，px转rem，px转vw，这都是在PostCSS中极为常用的插件。
浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。
TypeScript 约定了 tsconfig.json 文件来存储项目配置，文档链接。
1.webpack 是一个现代JavaScript 应用程序的静态打包器，它能够把各种资源，例如JS,样式，图片 等都作为模块来使用处理,将许多松散的模块按照依赖和规则打包成符合生产部署的前端资源， 还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。 2.安装 前提条件，请确保安装了Node.js的最新版。 进入相应的文件夹 首先执行 进入相应的文件夹 npm init 初始化 然后可以全局安装 npm install webpack --save-dev
这里是iOS 下WebRTC音视频通话开发的第二篇，在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API。 如果你下载并编译完成之后，会看到一个iOS 版的WebRTC Demo。但是那个demo涉及到外网的通讯需要翻墙，而且还有对信令消息的封装理解起来非常的困难。 但是，我将要写的这个demo去掉了STUN服务器、TURN服务器配置，以及信令的包装，基本上是用WebRTC进行音视频通话的最精简主干了，非常容易理解。
上篇文章简单介绍了一下loader API,那么除了我们常用的css-loader,sass-loader,style-loader,url-loader,vue-loader之外，还有哪些loader呢，我们一起来梳理一下。
图片 本篇博文的内容根据 Introduction to Gulp.js 系列文章 拓展而来，其代码、依赖包及目录结构部分均有所更改，更多详细内容，敬请参考
前端开发学习每个人都想走捷径，即想高效快速学习又想掌握当今最新的前端技术知识。其实，这样的想法是对的，找对学习方法就能达到这个效果。前端开发学习每个阶段都是非常重要的，一部分为专业知识、另一部分实战经验也非常重要，平时不但要仔细研究基础又要多练代码，通过几个月的系统学习，相信大家都能成为前端开发大师。下面来介绍下如何能提高CSS编写技巧，提高工作效率。
由于各大浏览器的兼容问题，autoprefixer 插件 就可以帮我们自动补齐前缀。它和 less、scss 这样的预处理器不同，它属于后置处理器。
访问-> 200 -> 退出浏览器 -> 第二次进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
webpack使用postcss的autoprefixer插件，并在压缩css时使用了cssnano，处理不当的情况下会导致压缩css后，部分兼容前缀（比如-webkit-）被删除的问题。 postcss的autoprefixer配置如下： autoprefixer({ browsers: ['> 1%', 'iOS >= 7',"ie >= 7", 'Android >= 2.4'] }) css压缩的配置如下： //压缩css代码 new
准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。
在之前的开发中主要用的是vue-cli2，最近空闲时间比较多，接下来有新项目，本着偷懒的本能，自己打算搭建一个基础包以备后期开发应用，并对其进行性能优化和配置
/** * Created by Administrator on 2017/5/29. */ var webpack = require("webpack"); var htmlWebpackPlugin = require("html-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin"); //nodejs的里的一个全局变量,它指向的是我们项目的根目录,入口文件的位置 module.exp
不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习:
我是🏅有6年前端及跨平台开发经验、掘金/51CTO活跃作者、曾独立设计混开框架和重构方案并顺利落地 de 小鑫同学。 写作背景： 在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用，有什么优势~ 快速开始： 创建 vite + vue-ts 项目： yarn create vite 安装 Tailwind CSS 依赖： npm inst
#include <stdio.h> #include "time.h" #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <termios.h> int main() { struct termios opt; int fd=-1; int nread; char buf[1024]; fd=open("/dev/ttyS3" ,O_RDONLY |O_NONBLOCK); if(fd==-1) { printf("open /dev/ttyS3 error\n"); } tcgetattr(fd,&opt); //获取终端属性到opt tcflush(fd,TCIOFLUSH); //同时刷新收到的数据但是不读，刷新写入的数据但是不传送 cfsetispeed(&opt, B9600); //设置输入波特率 cfsetospeed(&opt, B9600); //设置输出波特率 opt.c_cflag&=~CSIZE; //(不用 )字符长度掩码。取值为 CS5, CS6, CS7, 或 CS8。 opt.c_cflag |=CS8; //取值为CS8 opt.c_cflag &= ~PARENB; //(不用 )允许输出产生奇偶信息以及输入的奇偶校验。 opt.c_iflag &= ~INPCK; //(不用 )启用输入奇偶检测。 opt.c_cflag &= ~CSTOPB; //(不用 )设置两个停止位，而不是一个 opt.c_cflag &= ~CRTSCTS; //(不用 )硬件流控 opt.c_cc[VTIME] = 150; //非 canonical 模式读时的延时，以十分之一秒为单位 opt.c_cc[VMIN] = 0; //非 canonical 模式读的最小字符数 opt.c_lflag &= ~(ICANON | ECHO) ; //(不用 )启用标准模式 (canonical mode)允许使用 //特殊字符 EOF, EOL, EOL2, ERASE, KILL, LNEXT, REPRINT, //和 WERASE，以及按行的缓冲。 //(不用 )回显输入字符。 tcflush(fd,TCIOFLUSH); tcsetattr(fd,TCSANOW,&opt); //改变立即发生 while(1) { nread = read(fd,buf,1000); //printf("nread=%d\n",nread); //if(nread !=-1 ) printf("%s",buf);//打印数据 sleep(2); memset(buf,0x0,1024); } if(fd!=-1) close(fd); return 0; }
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
