2020年11月_自由的♂

原创前端教程——前端项目自动化部署（Jenkins、Github Actions）

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。第一部分是使用 Gitea 配置局域网 git 服务器，再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识，只要按照本教程的指引，就能够实现自动化部署项目。PS：本人所用电脑操作系统为 wind

2020-11-20 11:19:31 423 1

原创 50个能帮你节省时间的开发工具，你用了几个？

1. Whatruns一个免费的浏览器扩展程序，只需单击一下按钮，就能帮你识别当前网站上所使到的技术。官网：https://www.whatruns.com/2. Sizzy开发人员专用的浏览器。可以帮你节省时间，加快开发流程官网：https://sizzy.co/3. Log RocketLogRocket 使你可以重播用户在你站点上所做的操作，从而帮你重现错误并更快地解决问题。官网：https://logrocket.com/4. SentrySent

2020-11-20 11:16:58 2078 2

原创推荐11 个 GitHub 上超火的前端面试项目，打造自己的加薪宝库！

简介一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。初步前端与高级前端之间，最大的差距可能就是信息差造成的。前端章鱼猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。从 2018 年开始，我就养成了每天逛 GitHub 的习惯，一般在早上上班前或者中午午休的时候都会逛一下。看看每天都开

2020-11-20 11:13:28 1067 1

原创不会比这更详细的前端工程化的入门教程了

本文将分成以下 7 个小节：技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程，让大家动手实践。另外我还写了一个前端工程化 demo 放在github上。这个 demo 包含了 js、css、git 验证，其中 js、css 验证需要安装 VSCode，具体教程在下文中会有提及。技术选型对于前端来说，技术选型挺简单的。就是做选择题，三大框架中选一个。个人认为可以依据以下两个特点来选：选你或团队最熟的，保证在遇到棘手的问题时有人能填坑。..

2020-11-20 11:10:43 254

原创为了面试能通过，我要看完这75道面试题（终）

51. 什么是async/await及其如何工作？async/await是 JS 中编写异步或非阻塞代码的新方法。它建立在Promises之上，让异步代码的可读性和简洁度都更高。async/await是 JS 中编写异步或非阻塞代码的新方法。它建立在Promises之上，相对于 Promise 和回调，它的可读性和简洁度都更高。但是，在使用此功能之前，我们必须先学习Promises的基础知识，因为正如我之前所说，它是基于Promise构建的，这意味着幕后使用仍然是Promise。使用 P..

2020-11-20 11:05:52 167

原创我开源了一个基于Vue的组织架构树组件

开门见山Demo 演示地址：http://www.longstudy.club/vue...github 地址：https://github.com/qq44924588...项目背景因为最近公司需要做一个OKR，OKR 里面有个对齐视图，是一个数型结构，如下图所示：就拿我小智来说，如果有人对齐我的 KR 就放到我的右边，如果是我对齐了谁的 KR，就放到我的左边，类似一个上下级的关系，所以这里我用两棵树来表示左边与右边的关系。在GitHub上找了半天，这类组件不多，也没有符合

2020-11-20 11:04:50 1341 4

原创学了这 7 个 CSS 属性，我的 CSS 技能又进步啦！

学习CSS是构建好看网页的一种方式。但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。因此，在这篇文章中，向你介绍7个比较少见且好用的 CSS 属性，希望对你有所帮助。1. vertical-alignCSS 的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。就像定义说的，这个属性允许你垂直对齐文本。它对于顺序指示器(..

2020-11-20 11:03:47 165

原创 10个对web开发人员有用的HTML文件上传技巧

简介上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论 HTML文件上传支持的10种用法，希望对你有用。1. 单文件上传我们可以将input类型指定为file，以在Web应用程序中使用文件上传功能。<inputtype="file"id="file-uploader">input filte提供按钮上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后，Fil...

2020-11-20 11:01:51 285

原创要提升前端布局能力，这些 CSS 属性需要学习下！

属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。通常将HTML属性放在方括号中，称为属性选择器，如下：[href] { color: red;}这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。注:更多关于笼匹配的CSS特异性，你可以阅读CSS特性:..

2020-11-20 11:00:56 3125 8

原创 6张图让你搞懂浏览器渲染网页过程

我的想法：如果我要构建快速可靠的网站，需要真正了解浏览器渲染网页的每个步骤机制，这样就可以在开发过程中对每个步骤进行优化。这篇文章是我在较高水平上对端到端过程的学习总结。好了，废话不多说，我们开始吧。这个过程可以分为以下几个主要阶段：开始解析HTML 获取外部资源解析 CSS 并构建CSSOM 执行 JavaScript 合并 DOM 和 CSSOM 以构造渲染树计算布局和绘制1.开始解析HTML当浏览器通过网络接收页面的HTML数据时，它会立即设置解析器将HTML转换为文档对

2020-11-20 11:00:06 6629 20

原创 webpack教程：如何从头开始设置 webpack 5

webpack 对我来说曾经是一个怪物般存在一样，因为它有太多太多的配置项，相反，使用像create-react-app脚手架可以很轻松创建项目，所以有一段时间内，我会尽量避免使用 webpack，因为它看起来既复杂又望而却步 ????如果你们不习惯从头开始设置 webpack 来使用Babel、TypeScript、Sass、React或Vue，或者不知道为什么要使用 webpack，那么这篇文章是你的最佳选择。就像所有的事情一样，一旦你深入学习，你会发现它并不是那么可怕，只有几个主要的概念需要学习掌

2020-11-20 10:58:53 592

原创 JNPF云平台之多租户的探索

在云领域我们常常会听到一个词：多租户。这个词在不同的语境中有着不同的含义。本文将介绍云平台中的多租户的概念以及实现多租户支持的思路。什么是租户刚开始接触这个概念时，你肯定感觉“租户”这个词怪怪的。但假设我们换个词，我相信你立即就有感觉了。这个词就是“客户”（这里的客户指的就是商业上面的客户）。一个租户就是一个客户，比方我们开发的服务是给 XXX 企业使用的，那该企业就是我们的一个客户/租户；假设这个服务是面向互联网的，那么使用该服务的每一个互联网用户都是一个客户/租户。为什么须要多租户支..

2020-11-19 17:10:01 385

原创推荐一个好用的开源的报表平台——JNPF可视化平台

JNPF可视化开发平台是一款集成报表设计和大屏设计的在线报表平台，使用起来简单方便，可以帮助用户像excel一样设计页面。使用JNPF报表平台，用户不仅10分钟就可以设计一个炫酷大屏，还能在平台快速制作各种报表，实现报表的打印等；强大功能的报表设计器支持制作各种复杂报表，如分组报表、交叉报表、带条件查询统计报表、带表达式报表等；支持图形分析的图表设计器拥有几十种图表，可使用图表和报表相结合，更清晰的将数据展现给决策者；炫酷的大屏设计器JNPF报表大屏设计器，采

2020-11-17 16:35:08 1201

原创管理软件二次开发背后的心酸-JNPF快速开发平台

管理软件的二次开发就是在现有软件产品的基础上，针对客户的个性化需求进行的开发，一般是由软件产品的开发厂商进行，或由厂商提供二次开发接口和源码由第三方来进行。不同于完全的定制开发，二次开发不是从头开发，是在已有软件的基础上进行的。评估一个二开软件产品是不是合格，开发接口的成熟、完善是重要的标志。一、为什么会存在管理软件的二次开发？现有的产品功能不能满足客户的需求，或需要和其他软件进行对接、实现数据的交换和传输等。百度云二次开发一般会根据现有产品手艺和设计情况，需要提供相关的接口或源码，同时需要认识个性

2020-11-16 15:48:26 341

原创开源JNPF快速开发框架二次开发原理解决方案

二次开发，简单的说就是在现有的软件上进行功能的扩展，定制修改，然后达到自己想要的功能，一般来说都不会改变原有系统的内核。为什么要二次开发?随着信息化技术的不断发展，IT行业涌现出了一系列优秀的开源作品，其作者或是个人，或是项目小组，或是软件公司。选择和应用这些优秀的开源软件，并在此基础上进行符合业务需求的二次开发，将给企业节省信息化成本(时间成本及开发成本)的同时，更能带来技术上的保障。这就是我们常听的：站在巨人的肩膀上，你将看的更远。所以国内很多公司需要二次开发的人才。怎么做二次开发?第一

2020-11-10 17:40:15 574

原创 JNPF零代码开发平台之快速开发APP表单页面

JNPF零代码开发平台之快速开发APP表单页面开发App对于一些没有学过APP编程语言的人来说确实比较困难，但是现在有个平台可以帮助您快速进行App的开发。今天就介绍下先来看看这个平台的APP界面是什么样子的吧！让我们开始创建表单吧。创建app表单表单设计是配置大量可复用控件，通过拖拽的控件自动生成可视化应用列表设计是配置排序查询、筛选查询、列表字段等对APP设计进行删除、编辑、查询、复制、刷新和状态控制等功能操作...

2020-11-07 13:41:45 282

原创 JNPF零代码开发平台之快速开发web表单页面

JNPF是一款优秀的软件平台产品，可视化开发环境，新增的零代码开发，操作相当简单，流程化的表单开发让业务人员也能参与其中，做到所见即所得，大大提高开发效率，能帮助公司大幅节省人力成本和时间成本，同时又不失灵活性。适用于搭建 OA、ERP、CRM、HR、HIS等所有的企业信息管理系统（且适用于集团公司部署）。创建web表单表单设计是配置大量可复用控件，通过拖拽的控件自动生成可视化应用列表设计是配置页面显示列、查询条件、列表分页、按钮配置等设置对WEB设计进行删除、..

2020-11-05 16:22:00 285

原创 JNPF快速开发平台全新3.0版的零代码设计器

JNPF快速开发平台3.0版最大的升级便是零代码设计器的诞生问世。零代码设计器的出现再次降低了JNPF快速开发平台的使用门槛，大大增加了快速开发平台的便捷和易用性。所谓零代码即通过自动化、可视化系统进行在线开发，无需编写一行代码，通过拖拽控件便可生成系统功能，降低开发成本并提高产品质量，更快速的开发系统的方法。零代码开发主要有以下三个特点：1.无需编写代码：只需在编辑器内将组件拖拽到画布中，再配置组件的样式、数据源和交互动作便可完成对功能的开发；2.可视化开发：全程可视图形化配置，通过操作界

2020-11-04 17:17:12 690 3

原创零代码开发的崛起丨软件开发平台的最优选择

企业的信息化建设在选择软件开发平台上有两种选择，一种是挖掘这方面的高级技术人才，以他为核心搭建技术团队，自己研发信息化系统，另一种就是找一家软件开发平台定制开发。不管何种方式，都需要企业大量资金的投入。因此零代码开发平台应运而生。他是新型开发工具，是对旧开发的妥协。零代码的出现，具有：1、满足企业的多样化需求2、从定制开发中需求沟通的痛苦中解脱3、突出的成本和效率优势4、良好的生态提供技术支持和维护5、实现非程序员开发软件伴随着信息技术的不断发展，...

2020-11-04 13:45:21 317 1

原创 36 个JS 面试题助力你金九银10

1.JS中let和const有什么用？在现代js中，let＆const是创建变量的不同方式。在早期的js中，咱们使用var关键字来创建变量。let＆const关键字是在ES6版本中引入的，其目的是在js中创建两种不同类型的变量，一种是不可变的，另一种是可变的。const:它用于创建一个不可变变量。不可变变量是指其值在程序的整个生命周期中永不改变的变量。let:let用于创建一个可变变量，可变变量是像var这样的普通变量，可以任意次数地更改。2. JS 中的主要有哪几类错误JS有三类..

2020-11-03 10:07:13 154

原创纯 CSS 解决H5布局中的吸顶吸底

演示Demo地址（手机端打开）：https://closertb.site/Klotski...演示Demo源码：https://github.com/closertb/k...原文：https://github.com/closertb/c...哪些想啥提啥的产品们最近做了一个需求，准确说是迭代需求：加了一个头部概览（类似下图），以更好的让用户观察到营销变化，故事的开头就这样悄悄的埋下了伏笔。以前这个页面只是一个评价列表（可上拉加载），为了数据更易读，列表的头采用了固定布局。然而加了这个概

2020-11-03 10:03:48 560

原创总结10个好用的 HTML5 特性

在本文中，我列出了十个我过去没用过的HTML5功能，但现在发现它们很有用，废话不多说，让我们开始吧。????detais标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需向用户显示内容，简单的做法就是使用此<details>标签。默认情况下，它是收起来的，打开后，它将展开并显示被隐藏的内容。事例：<details> <summary>Click Here to get the user details</s

2020-11-03 10:01:57 115

原创如何用 JS 一次获取 HTML 表单的所有字段？

问：如何用 JS 一次获取 HTML 表单的所有字段？考虑一个简单的 HTML 表单，用于将任务保存在待办事项列表中： <form> <label for="name">用户名</label> <input type="text" id="name" name="name" required> <label for="description">简介</label> <input ty

2020-11-03 10:00:54 389

原创几个你不知道的 CSS 居中方案！

水平居中内联元素要使内联元素（如链接，span或img）居中，使用text-align: center足够了。<div class="desk"> <span class="plate"></span></div>.desk { text-align: center;}对于多个内联元素，也可以使用text-align：center:<div class="desk"> <span c...

2020-11-03 09:57:08 121

原创 JavaScript 中 10 个需要掌握基础的问题（上）

JavaScript 是一种客户端编程语言。全球超过90％的网站都在使用它，它是世界上最常用的编程语言之一。因此，今天我们业讨论 10 个有关 JavaScript 的常见问题。1.如何从数组中移除一个特定的项思路：首先，使用indexOf查找要删除的数组元素的索引(index)，然后使用splice方法删除该索引所对应的项。splice()是一个非纯函数，通过删除现有元素和/或添加新元素来更改数组的内容。const array = [2, 5, 9]const index = a

2020-11-03 09:55:54 227

原创避免在 JS 中过多使用 IF 语句优化技巧

最近在重构代码时，我发现早期的代码使用太多的if语句，其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的，这些技巧可以帮助我们避免过多的使用if语句。接下来会介绍6种方式来代替if的使用，这样做不是坚决不使用if偏执狂，而是换个方式思考我们的编码思路。1. 三元运算符事例1带有IF的代码：function saveCustomer(customer) { if (isCustomerValid(customer)) { database....

2020-11-03 09:53:41 1287

原创 10个必须知道的Chrome开发工具和技巧（上）

1. 模拟慢速网络和慢速设备我们可能习惯了在城市的网速，那是杠杠的，并不意味网速在中国哪个都一样的，在一些偏远地方，网速依然慢的可怜，所以有时候我们所做的产品是需要考虑网速慢的情况的，那怎么模拟呢？打开谷个浏览器的performance选项卡，然后单击右上角的齿轮图标就可以看到Newwork和CPU的模拟情况。2. 颜色选择器单击表示颜色的小方块，弹出颜色选择器。启用颜色选择器后，可以将网页悬停并使用颜色选择器来获取该像素的颜色。弹出颜色选择器的小方块还有快捷..

2020-11-03 09:51:54 171

原创只需5 分钟，快速优化 Web 性能的10 个手段

在这篇文章中，主要介绍10种快速提高网站性能的方法，你只需5分钟内就可以将它应用到你的网站上，废话不多说，让我们进入正题吧 ????。1. 文件压缩文件压缩，可以减少网络传输的字节数。有几种压缩算法。Gzip是最流行的，但是对于Brotli，你可以使用一种更新的、甚至更好的压缩算法。如果想检查您的服务器是否支持Brotli，可以使用Brotli.pro。如果你的服务器不支持Brotli，则可以按照以下简单指南进行安装 ????：Nginx on Linux Apache NodeJs -

2020-11-03 09:47:55 184

原创 45个值得收藏的 CSS 形状（总结）

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的::before和::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS ...

2020-11-03 09:46:18 241

JNPF快速开发平台的博客