09 2020 档案
摘要：无数的人问过类似的问题：怎么样才能做一个好的程序员？ 在回答这个问题之前，首先得明白什么是好的程序员，这样才有方向和目标，可是这事情太主观，可能各人的标准千差万别。 不谈那些传奇性的独自一人做出伟大事情的特例，也不谈什么上天入地，上帝大牛的诡论，以下是我比较认可的，在通常的项目开发中，一个好程序员的
阅读全文
摘要：ingress controller 如何工作 这篇文档的目的是解释 nginx ingress 控制器是如何工作的，特别是 nginx 模型的构建以及为什么需要它。 Nginx 配置 nginx ingress 控制器目标是组织 nginx 配置文件， 当 nginx 的配置文件发生任何更改时都需
阅读全文
摘要：前言 一个ECMAScript标准的制作过程，包含了Stage 0到Stage 4 五个阶段，每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段，这意味着应该很快在浏览器和其他引擎中支持这些特性。 一、类的私有变量 最新提案之一是在类中添加私
阅读全文
摘要：运作开源项目很容易。所有你需要做的就是让你的源代码可用和开源，对吧？嗯，也许。其实，开源项目是否成功取决于你对项目成功的定义。且不论你是怎么定义的，创建开源项目需要大量的工作。如果你已经有了目标，那么你需要准备投资。虽然开源软件是免费的，但它的创作却不是免费的：你需要往项目中投入时间和精力等宝贵资源
阅读全文
摘要：大数据很强大，但还是有很多人仍然不知道它到底是什么。让我们来学习大数据的真实表现，以及如何更好地促进企业转型。 或许我们经常听到有人讲大数据，但仍然有很多人不知道它到底是什么。因为我确信它很强大，所以我应该写篇文章来向大家描绘清楚，帮助大家更好的理解关于大数据我们可以拿它来做些什么。 如同技术行业中
阅读全文
摘要：对的，我这里要讲的不是如何掌握一种程序语言，而是所有的…… 很多编程初学者至今还在给我写信请教，问我该学习什么程序语言，怎么学习。由于我知道标题问题的答案，所以总感觉这个问题是如此“低级”，一直没来得及回复 : P 可是逐渐的，我发现原来不只是小白们有这个问题，就连美国大公司的很多资深工程师，其实也
阅读全文
摘要：一封离职邮件 2017年的一天，代码伴随着手指极具节奏感地输出在IDE上，突然某Chrome插件弹出一封邮件提示：“今天是我在ThoughtWorks的最后一天”。遇到这种离职邮件，我都会点进去，一来看看是否是自己曾经共事的小伙伴，二来了解一下小伙伴离职的原因。离职原因无出其右：跳出去接受更有挑战的
阅读全文
摘要：前段时间作者写了《当中台遇到 DDD，我们该如何设计微服务？》这篇文章，文章中详细描述了基于 DDD 设计思想的中台微服务设计方法以及分布式架构实施过程中的关注点等内容。中台建设完成后，通过微服务实现了后端应用的解耦，提高了中台应用的弹性伸缩能力。但由于微服务拆分，也会导致项目团队和服务的碎片化，给
阅读全文
摘要：Hershell是一款功能强大的跨平台反向Shell生成器，该工具使用Go语言开发，基于TCP反向Shell实现其功能。该工具使用了TLS来保障数据通讯的安全性，并且提供了证书公共密钥指纹绑定功能来防止通信数据被拦截。 支持的系统 Hershell的当前版本支持以下操作系统： Windows Lin
阅读全文
摘要：大多数野生程序员最棘手的问题就是如何依靠技术解决温饱，通俗来讲就是技术折现的问题。如果是单纯出于兴趣，或者只是为了突击某一阶段或者某一项目技术壁垒，不跟就业挂钩的自学倒也是无关痛痒。但是当上岗成为自学的终极目标和结果时，一切都就另当别论了。 前端自学者存在的学习误区： 1、所学东西可能已过时 奉为经
阅读全文
摘要：概要 在git使用中，尤其是多人维护相同项目时，“冲突”是一个经常要解决的问题，但是对这个问题似乎一直似懂非懂。现在感觉真的想明白了，这里把它从发生到处理整个机制做个描述。 一、“冲突”是如何发生的？ 有人会说“当多个人同时改一个文件时会发生冲突”，这句话不能说错，但其实很不精确。个人觉得更精确的说
阅读全文
摘要：有一次，我在一个讲座上听到主持人问听众如何故意编写难于测试的代码。在场的小伙伴都惊呆了，因为没有任何人会故意写这种糟糕的代码。我记得他们甚至给不出一个好的答案。 当然，这个问题的目的不在于教大家如何写使同事欲哭无泪的烂代码。而是为了了解什么样的代码难于测试，来避免这些严重的问题。 这里给出我对上面那
阅读全文
摘要：如果你对编程和专业的软件开发感兴趣，那么，这里有5个新晋软件工程师所要面临的挑战。 5.代码疲劳 专业程序员要写的程序……很多。 作为入门级工程师，我每周至少编程45小时，而且每个月会有1到2个星期工作50至60小时。从这些数字上看，我过去几个月里每周工作将近50小时。 80％ – 90％的工作时间
阅读全文
摘要：共识机制是区块链的灵魂。就像一个国家的法律，维系着区块链世界的正常运作。区块链最早的共识是工作量证明（POW），比特币和以太坊都是采用的工作量证明。现在流行的一个趋势是权益证明（POS）。以太坊2.0就会采用 POS 共识，还有最新的公链如 Tezos，Polkadot，Algorand 等等。权益
阅读全文
摘要：如果是第一次接触这个概念，可能会一时没有头绪，网上的各种解释可能会让你更加混乱，并觉得它没那么简单。 其实依赖注入本身是单纯、简单的。 简单来说，依赖注入是一种方式、方法或者说手段，是让被注入者和注入者之间建立关联的手段。 依赖注入的目的是松耦合，是交互对象之间的松耦合。 今天，小芯带来的文章主要描
阅读全文
摘要：源代码（也称源程序），是指一系列人类可读的计算机语言指令。 在现代程序语言中，源代码可以是以书籍或者磁带的形式出现，但最为常用的格式是文本文件，这种典型格式的目的是为了编译出计算机程序。 计算机源代码的最终目的是将人类可读的文本翻译成为计算机可以执行的二进制指令，这种过程叫做编译，通过编译器完成。
阅读全文
摘要：前言 由于总所周知的原因，国外很多服务无法访问。比如docker镜像。所以就有了很多国内镜像的说法。配置国内镜像可以极速下载镜像。 配置国内镜像 有很多人文章教你配置国内docker镜像，这边简单说一下： docker-machine ssh default sudo sed -i "s|EXTRA
阅读全文
摘要：移动互联网时代，各种APP已经离不开我们的生活，制作开发一款受大众欢迎的APP也成了重点，特别是在直播APP开发过程中，是一款界面花哨，还是相对简单的APP更适合直播呢？直播APP的每一个图标，每个界面都是要严格把控。 直播APP界面设计，怎么做才能让直播APP的界面效果更好，需要UI和UE的精心设
阅读全文
摘要：当我们使用 traefik 反向代理和自动服务发现后，我们对集群内部的服务分为两类 公有服务。如我的博客，网站，以及为它们提供服务的 API。我们可以通过公有的域名去映射服务使得外网能够访问，如通过我自己的域名 shanyue.tech 与 xiange.tech。 私有服务。如 gitlab，tr
阅读全文
摘要：前言 对于电商平台而言，随着业务的不断发展壮大，网站访问量和数据量也随之急剧增长，该情况的产生给服务器带来了一定的负担。从用户体验层面而言，由于服务器端数据处理带来的时延，往往导致页面的响应速度过慢、操作流畅性受阻等问题。这在某种程度上甚至会潜在影响平台的成交量。提供高效率，高质量的服务成为亟待解决
阅读全文
摘要：背景 最近笔者在工作中遇到了一个小需求： 要实现一个组件来播放帧图片 这个需求本身不复杂，但是需要在组件中一次性引入十张图片，就像下面这样： // 就是这么任性，下标从0开始~ import frame0 from './assets/frame_0.png' import frame1 from
阅读全文
摘要：Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 安装 使用npm安装: npm install mockjs;或直接<script src="http://moc
阅读全文
摘要：背景 最近遇到一个更新了 package，但是本地编译打包后没有更新代码的情况，先来复现下这个 case 的流程： A 同学在 npm 上发布了0.1.0版本的 package； B 同学开发了一个新的 feature，并发布0.2.0版本； C 同学将本地的0.1.0版本升级到0.2.0版本，并执
阅读全文
摘要：前端TDD的痛 从进公司前认识了TDD，到实践TDD，过程中自己遇到或者小伙伴们一起讨论的比较频繁的一个问题是 — 前端不太好TDD / 前端TDD的投入收益比不高。为啥会这样呢？ 我们假设你在写前端时全程TDD，那么你需要做的是 — 先assert页面上有一个button，然后去实现这个butto
阅读全文
摘要：react 和 vue 的关系有点像可口可乐和百事可乐，你在 react 中做的很多事情都可以在 vue 中完成。当然这里也存在一些重要的概念差异，其中一些反映了 Angular 对 Vue 的影响。 我将在本文中重点介绍两者的差异部分，帮助你快速入门 Vue 并立刻提高生产力。 React 和 V
阅读全文
摘要：本文主要说了Flutter内部使用了怎样的算法和优化让Flutter如此强大。某些内容对比了Flutter和其他开发工具一致性算法的优劣，不过个人感觉还是太过简短，后面我会花更多的时间来研究这方面的内容，后续补上。最后还讲述了Flutter在API设计上是如何达到开发者的预期的。由于译者水平有限，疏
阅读全文
摘要：基本每个开发者都需要考虑逻辑复用的问题，否则你的项目中将充斥着大量的重复代码。那么 react 是怎么复用组件逻辑的呢？本文将一一介绍 react 复用组件逻辑的几种方法，希望你读完之后能够有所收获。如果你对这些内容已经非常清楚，那么略过本文即可。 1. Mixins Mixins 事实上是 Rea
阅读全文
摘要：四款前端主流的打包工具：grunt ， gulp，webpack， rollup，以发布时间为顺序。 Grunt： 最老牌的打包工具，它运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，认知成本高，运用的时候
阅读全文
摘要：使用 ng-include 进行递归循环 数据结构 $scope.categories = [ { title: 'Computers', categories: [ { title: 'Laptops', categories: [ { title: 'Ultrabooks' }, { title
阅读全文
摘要：Node.js有许多框架可以选择，包括老牌的express，koa，新晋的egg，nest等等 1.Express Express是一款基于node.js以及ChromeV8引擎，快速、极简的JS服务端开发框架，它提供了用来开发强壮的web/移动应用，以及API的所有功能。并且开发人员还能够方便地为
阅读全文
摘要：调研方向 设计思想/基本用法/生态环境/性能优化 总结 设计思想 mobx 的设计思想我总结之后，主要有以下两点： 函数响应式编程； 任何源自应用状态的东西都应该自动地获得； mobx 不同于 redux 的单一数据源的统一管理，它可以有多个 store， 为了便于维护 ，每一个 store 都是一
阅读全文
摘要：在开发后台管理项目时，需要统计后台用户数据，以折现图和饼图的形式显示，这边采用apache-echarts来实现需求。 1.安装echarts和引入 npm install echarts --save import * as echarts from 'echarts'; 2.使用echarts实
阅读全文
摘要：1、属性类型 Object属性分为两个类型：数据属性、访问器属性，每类属性又有其不同的特显，双向绑定的原理是根据其访问器属性的特性来实现的。 1.1数据属性的特性 数据属性有四个描述其行为的特性1、Configurable:是否可以通过delete删除,能否修改他的属性特性，能否修改为访问器属性。默
阅读全文
摘要：在2020年也就是今年初，同事建议说可以考虑兼容一下小程序，心想也挺好的。便有了今天的 websocket-heartbeat-miniprogram，这次基于以前的代码新建了一个项目，只做小程序的版本，因为涉及到各种小程序以及相关框架的兼容，觉得还是单独出一个包，更专注一点。 介绍 websock
阅读全文
摘要：npm是什么？ npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM
阅读全文
摘要：除了 js 已有的功能外，vue还具有自己独特的作用域级别。作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。 了解 vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码。 下面是 vue 中4个级别的作用域： 全局作用域 子树作用域 组件作用域 实例作用
阅读全文
摘要：需求 在 vue 中，对组件进行循环都需要加入key以便“就地复用”，可是在某些情况下，我们需要新建多个对象，而这些对象不是从后端获取到的，而是前端生成的，没有唯一值，且 vue 目前版本只允许字符串，数字作为组件的 key。 方案 简单的组件 例如 <template> <easy-compone
阅读全文
摘要：我们通常会用屏（Screen）来称呼一个页面（Page），一个完整的App应该是有多个Page组成的。 在之前的案例（豆瓣）中，我们通过IndexedStack来管理了首页中的Page切换： 首页-书影音-小组-市集-我的 通过点击BottomNavigationBarItem来设置IndexedS
阅读全文
摘要：我们在进行Flutter开发的时候，有时候是需要用到原生的View，比如WebView、MapView、第三方广告SDK等，Flutter提供了AndroidView、UiKitView可以实现相关功能。 创建项目 这里以在Flutter显示原生的TextView为案例，展示如何实现，创建项目过程这
阅读全文
摘要：Node.js是一个JavaScript运行环境，可以使JavaScript这类脚本语言编写出来的代码运行速度获得极大提升，那么安装后该如何卸载呢？ Windows平台下卸载nodejs 对于Windows平台来说，所有的应用程序的卸载方法都是一样的。 1、在【卸载程序】中卸载程序和功能 在桌面左下
阅读全文
摘要：JavaScript实现简单的图片瀑布流插件 this.myPlugin = this.myPlugin || {};/** * 制作图片瀑布流 */this.myPlugin.createImgWaterfall = function (option) { var defaultOption =
阅读全文
摘要：XSS已有近二十年的历史了，但它仍然是Web上最常见的漏洞之一。因此，已经发展了许多机制来减轻漏洞的影响。我经常会误以为这些机制可以作为针对XSS的保护。今天，我们将了解为什么情况并非如此。我们将在代码重用攻击领域探索一种相对较新的技术。Web的代码重用攻击于 2017年 首次描述，可用于绕过大多数
阅读全文
摘要：当谈到运动和动画时，可能没有什么比粒子更让我喜欢了，这就是为什么每次我探索新技术时，我总是以尽可能多的创建粒子来演示。 在本文中，单击按钮时，我们将使用Web Animations API创建烟花效果，从而制作更多的粒子魔术。 浏览器支持 在我撰写本文时，除了Safari和Internet Expl
阅读全文
摘要：最近开发前端一直用的前端模板引擎；一直使用的 TPPL 模板引擎 源代码如下： function tppl(tpl, _data) { tpl = tpl.replace(/(<)/g, "<").replace(/(&)/g, "&").replace(/(>)/g, ">")
阅读全文
摘要：在我们学习ESLint之前，我们先来了解一下什么是ESLint ？ 什么是ESLint？ 官网上告诉我们，ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，哦，所以我们可以知道，ESLint 就是一个工具，而且是一个用来检查代码的工具。 代
阅读全文
摘要：当前端应用越来越复杂时，我们想要将代码分割成不同的模块，便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句，下文将介绍这两种方式的不同之处。 1. 出现的时间、地点不同 年份出处 require/exports 2009 Commonjs import/ex
阅读全文
摘要：一、typeof 简介 在 TypeScript 中， typeof 操作符可以用来获取一个变量或对象的类型。 interface Person { name: string; age: number; } const sem: Person = { name: "semlinker", age:
阅读全文
摘要：虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。
阅读全文
摘要：由于js是单线程语言，为了解决异步操作所以设计了事件循环。 宏任务：setTimeout、setInterval 、script（整体代码）、 I/O 操作、UI 渲染等微任务：setImmediate、process.nextTick()、 new Promise().then(回调)、Mutat
阅读全文
摘要：最近项目遇到一个小问题代码我会简化成小例子展示给大家。 用心看到最后会有收获哈，基础扎实的童鞋可以直接跳到数组类型使用。 说到 indexOf 大家并不陌生，判断字符串是否包涵子字符串时特别常用（正则不熟练同学的利器）。 String 类型的使用 温习一下大家熟知的字符串用法，举个例子 let st
阅读全文
摘要：背景 前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，这些事件怎么
阅读全文
摘要：在 TypeScript中，any 和 unknown 是包含所有值的类型。在本文中，我们将会研究它们是怎样工作的。 TypeScript 的两种顶级类型 any 和 unknown 在 TypeScript 中是所谓的“顶部类型”。以下文字引用自 Wikipedia： top type [...]
阅读全文
摘要：一、什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一。在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”，即我们所说的面向接口编程，这个概念的重要性可见一斑。但问题在于，在JavaScript的世界中，没有内置的创建或实现接口的方法，也没
阅读全文
摘要：解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。 此处手札 供后人参考~ 1.第一步 服务端设置响应头 header('Access-Control-Allow-Ori
阅读全文
摘要：在 Web Worker中使用无限同步循环 由于 Web Worker 本质上是Web线程，因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的，可以让主线程准确的知道什么时候合适。例如：只要微秒是质数，就渲染某些东西。要
阅读全文
摘要：js 可以使用 Math（算数） 对象来实现随机数的生成。 需要了解的 Math 对象方法 方法描述 ceil(x) 对数进行上舍入，即向上取整。 floor(x) 对 x 进行下舍入，即向下取整。 round(x) 四舍五入。 random() 返回 0 ~ 1 之间的随机数，包含 0 不包含 1
阅读全文
摘要：一、什么是 reduce() ？ reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数，并将结果汇总为单个返回值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => acc
阅读全文
摘要：劫持产生的原因和方式 在网页开发的访问过程中， http是我们主要的访问协议。我们知道http是一种无状态的连接。即没有验证通讯双方的身份，也没有验证信息的完整性，所以很容易受到篡改。运营商就是利用了这一点 篡改了用户正常访问的网页，插入广告或者其他一些杂七杂八的东西 ，达到盈利的目的。 运营商的一
阅读全文
摘要：介绍 本指南为您介绍了在台式机和移动网络在不同的平台和浏览器（ < 99.99 ％我可能会跳过一些浏览器）开发的JavaScript SDK ，对于那些非浏览器开发的支持（硬件，嵌入式，节点/ IO js ）被排除在本文档之外，在未来予以考虑。因为我没有找到一个关于设计JavaScript SDK的
阅读全文
摘要：这一篇是在实际工程中遇到的一个难得的例子；反映在Node里两种编程范式的设计冲突。这种冲突具有普适性，但本文仅分析问题本质，不探讨更高层次的抽象。 我在写一个类似HTTP的资源协议，叫RP，Resource Protocol，和HTTP不同的地方，RP是构建在一个中立的传输层上的；这个传输层里最小的
阅读全文
摘要：其实与web相关的书籍还是很多的，因为web的领域就是比较广的，因为有过web开发经验的都知道，web，就开发语言就有php，jsp，asp，.net等多种语言，那么这些语言对应的后台开发就有对应的书籍，所以今天小编就主要推荐与web基础相关的书籍。因为相比之下web前端还是比较轻松入门的。 htm
阅读全文
摘要：1.Animista 网站地址:http://animista.net/网站描述:在线生成 css 动画 Animista是一个在线动画生成器，同时也是一个动画库，它为我们提供了以下功能 1. 选择不同的动画 我们可以选择想要的动画类型（例如entrance/exist），除了可以选择某个动画（例如
阅读全文
摘要：自我进入这个行业，我就发现开发人员一直在努力征服css。 理由也很充分，开发人员是用逻辑思考的生物。添加一个div元素导致所有代码都不得不往下移一行，而另一个div“浮”到左侧，感觉没有任何意义。 你也一定听到过开发人员的抱怨： “我们只需要向左边移动五个像素，但是…天哪！为什么整个都向下移动了一行
阅读全文
摘要：1. 如果希望元素不可见，同时不占据空间，辅助设备无法访问，同时不渲染，可以使用 <script> 标签隐藏 <script type="text/html"> <img src="1.jpg"> </script> 此时，图片 1.jpg 是不会有请求的。<script> 标签是不支持嵌套的 如果
阅读全文
摘要：前言： 前端时间也是应项目的需求开始了h5移动端的折腾之旅，在目前中台的基础上扩展了两个ToC移动端项目，下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题 在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android
阅读全文
摘要：关键字 meta（标签）及 Keywords（关键词），曾经在网页中很重要的，但现在已经被很多搜索引擎完全忽略。但是，如果加上这个标签也对网页的综合表现没有坏处，不过，如果使用不恰当的话，对网页非但没有好处，还有欺诈的嫌疑。 <meta name="keywords" content="若梦,ech
阅读全文
摘要：问题1： 通过document.addEventListener("scroll",function(){})对页面滚动监听事件进行监听，但ios下$(document).scrollTop()值始终为0，对页面监听无效。 原因： 因为iOS下iframe的高度会根据页面的内容自适应，造成了ifra
阅读全文
摘要：当前我们使用scss变量有两个痛点： 需要手动导入 无法与js建立联系或者很难，后续不能在此基础上做一些骚操作 为了解决这两个问题，我们以创建js文件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss一样使用，又能作为js变量使用的目的。 豌豆资源搜索网站h
阅读全文
摘要：盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所示，这个盒模型元素框的宽度值=内容区域的宽度+2（内边距+外边距+边框），也就是该示例中的
阅读全文
摘要：文本阴影介绍 在css中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 text-shadow属性值说明，在文本阴影实践中：第一个值是设置阴影水平方向移动，第二个值是设置阴影垂直方向移动，第三个值是设置阴影模糊距离，第四个值
阅读全文
摘要：引言 为了更好的支持移动端和 PC 端的缩放，WebKit 增加了subpixel layout（次像素/亚像素布局）为此他们还改变了 rendering tree。一个次像素单元在 WebKit 内被称为 LayoutUnit 用于取代之前使用整数来布局一个元素在页面中位置和大小。从 2013 年
阅读全文
摘要：懒加载(lazyload)也叫延迟加载, 惰性加载. 实质是当网页页面滚动到相应的地方，对应位置的内容才进行加载显示，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担,同时用户也能更快开始网站的访问 实现思路 代码实现 一般情况下, img标签是这样写的 <img src="..." al
阅读全文
摘要：在 jsConf.Asia 2013 ， Lea Verou 介绍了 css in the 4th dimension (影片) ，引发了整个 Web 界对 CSS 动画的期盼；在 CSS动画简介一文也已经把重点整理好了。以下我们将会介绍主要两个 CSS3 在动画的属性： Transition 与
阅读全文
摘要：移动端项目中经常遇到自适应的问题，下面我们来看看关于自适应的方法： 方案1：设置垂直方向的padding在盒模型中，margin、padding的百分比数值是相对于父元素的宽度计算的，所以将padding值设为与width值相同的百分比即可。 .box{ width:50%; height:0; p
阅读全文
摘要：Google 近日宣布，计划在 Chrome 浏览器上逐步淘汰 user-agent 字符串。 这里稍微解释下，user-agent (UA，用户代理) 字符串是现代 web 和浏览器功能的重要组成部分。 UA 字符串是浏览器建立连接时向网站发送的一段文本。UA 字符串包含了浏览器类型、渲染引擎和操
阅读全文
摘要：简介 比如有这样的需求，要输入一个名字，这个名字有由firstName,lastName组合而成，然后把这个名字全部变成大写输出来，比如输入jack，smith我们就要打印出来，‘HELLO，JACK SMITH’ 。 我们考虑用函数组合的方法来解决这个问题，需要两个函数greeting, toUp
阅读全文
摘要：冲突： 当改变元素display属性时，过渡属性transition失效。 原因： display:none的时候，页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。 解决方法： 1.改变元素的宽/高为0px,达到隐藏的目的。 2.使用visibility替代d
阅读全文
摘要：空元素介绍 在用来描述网页的计算机语言中，有一种超文本标记语言，被称为html(Hyper Text Markup Language) 。而构成html内容的标记语言是由一套标记标签组成。这套标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <ht
阅读全文
摘要：在html+css基础当中，我们往往会遇到块元素和行内元素。在实际开发中，会经常把他们弄混淆，而且很难记住。那么行内元素和块级元素之间有什么区别？ 行内元素和块级元素的区别 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向
阅读全文
摘要：文字与文字间距距离，字与字距离间距如何设置？使用css设置字与字间距的方法如下： 我们使用css样式属性letter-spacing：+距离数字+html单位 如letter-spacing:15px;，即设置了字与字间距为15px（像素）。 示例： html： <div>实现字与字间距方法</di
阅读全文
摘要：网站被搜索引擎收录是网站拥有排名的前提，只有做好网站的搜索引擎收录，才能让你拥有在搜索引擎中排名的机会。所以，网站页面被收录的越多，网站排名靠前的机会就会越多。URL的好坏经常会直接影响搜索引擎对一个网站的解析，不利于搜索引擎蜘蛛的顺利爬取。在网站初期就要对网站URL，网站目录进行规范化的设计，达到
阅读全文
摘要：在css中，可以通过cursor属性来改鼠标样式。下面本篇文章就来给大家介绍一下cursor属性，希望对大家有所帮助。 vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com cursor属性 cursor属性规定要显示的光标的类型（形状
阅读全文
摘要：有4种方式可以在 html 中引入 css。分别为：内联方式、嵌入方式、链接方式、导入方式，其中链接方式使用link引入，导入方式使用import引入。 css中link和import的区别： 两者都是外部引用CSS的方式，但是存在一定的区别： 区别1：link是Xhtml标签，除了加载CSS外，还
阅读全文
摘要：通过css3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。那么在css中动画属性有哪些？ vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.
阅读全文
摘要：真正接触前后端分离模式也就几个月的时间。本文属于自己对前后端分离模式的一些总结，主要来源于针对之前的后端做数据渲染与分离模式的一些对比。近期会针对一些常见的开发模式做一些分享，如果对你有帮助，给个关注吧!!! 什么是前后端分离 前后端分离从端口划分就是将浏览器、客户端分为前端，提供真实服务的软件就成
阅读全文
摘要：选择器分类 id选择器 <div id="wrap"></div> #wrap{ background: black; } 类选择器 <div class="wrap"></div> .wrap{ background: black; } 标签选择器 div{ margin:0; } 属性选择器 <
阅读全文
摘要：跨域实例： 如上图所示，系统www.a.com/index.html页面中嵌入一个iframe，iframe中访问不同域的www.b.com/index.html 然后b中有个按钮“保存”，想调用父页面a.com/index.html中的一个js方法saveFavorite() 问题： iframe
阅读全文
摘要：今天给大家分享一个 Web 知识点。如果你有过一段时间的 Web 开发经验，可能已经知道了。不过对于刚接触的新手来说，还是有必要了解一下的。 我们知道，网页里的a标签默认在当前窗口跳转链接地址，如果需要在新窗口打开，需要给 a 标签添加一个target="_blank"属性。 <a href="ht
阅读全文
摘要：本文介绍三个非常棒棒的css技巧，完全可以在你的项目中代替JavaScript，一起来看看这些技巧吧。 :active伪类与css数据上报 超实用超高频使用的:empty伪类 用好:only-child伪类 1. :active伪类与CSS数据上报 如果想要知道两个按钮的点击率，CSS开发者可以自己
阅读全文
摘要：最近有人提需求，产品要适配横竖屏，这就令人头秃了呀。 这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。demo测试地址 方案一：orientation window.addEventListener(
阅读全文
摘要：前段时间公司网页被 xss 搞了一下，微信把域名封了，通宵搞了好几天。这两天把公司好几年来的代码都改了一遍，这工作丧心病狂。 什么是 xss？ XSS 攻击指通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的代码。 危害有什么？ 跳转到广告页面，页面注入广告等等。 导致公司域名被
阅读全文
摘要：css3的calc() 函数用于动态计算长度值。 calc()函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 说明： 需要注意的是，运算符前后都需要保留一个空格，
阅读全文
摘要：前言 自定义属性（有时可以称为css变量或者层叠variables）是由css作者定义的实体，这些实体在一个document内可以被重用。一般按照自定义属性的符号设置（比如，--main-color: black；）然后使用var()函数使用。（例如color: var(--main-color)）
阅读全文
摘要：普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义时，要如何赋予用户一个安全下载页面中图片功能的能力呢？ 0. 利用 <a> 标签下载资源 最简单的办法，当然是利用 <a> 标签。根据 MDN 描述， <a> 标签有一个属性叫 download ，此属
阅读全文
摘要：一、需要通过css传参的背景 css中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。 比方说最近经常提到的黑暗模式，深色主题： @media (prefers-color-scheme: dark) { /* 黑暗模式，深色主题 */ } @media
阅读全文
摘要：page-break-after可以实现强制分页，比如始终在<footer>元素后插入分页符, @media print 表示这段css只在打印时起作用。 @media print { footer {page-break-after: always;} } css 语法 page-break-af
阅读全文
摘要：简单来说 src 就是 “我想加载这个资源”，而 href 就是 “我想和这个资源建立关联” src 主要用于元素替换，href 用于和相关文档和外部资源建立相关链接。href 属性说明本地Web资源和定义的资源建立了链接。 如： vi设计http://www.maiqicn.com 办公资源网站大
阅读全文
摘要：前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？原来一直没在意，源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和css设置的边框，确实差距不小…… 上图是原生实现，下图是 css 边框，手机上对比更加明显 然后，如何解决呢？搜遍整个谷歌，发现好多
阅读全文
摘要：JavaScript 与 css 已经相生相伴 20 年了，但是要在它们之间共享数据却非常困难。当然，这方面肯定有过一些尝试，不过我想到的是简单而又直观的做法：不需要做代码结构上的改动，而是利用 CSS 自定义属性，甚至是 Sass 变量。 CSS 自定义属性 CSS 自定义属性现在也不算什么稀罕物
阅读全文
摘要：在网页的布局中几大段文字挤在一起总归是不好看的，这时候我们就需要来设置行间距来让文字看起来不拥挤，也让整个页面看起来美观整洁，那么，行间距该如何设置呢？本篇文章就来给大家介绍一下css行间距的设置方法。 html 行间距的设置方法与问题 设定一段文字内的行距： <p> 但我们怎么设定两段文字之间的行
阅读全文
摘要：有很多机会可以将收入扩展到日常工作之外 成为程序员是一件很棒的事。 不仅大多数时候工作都很有趣，而且周围有很多工作机会，而且大多数人的薪水都很高。 但是有时候，多花一些钱是值得赞赏的。 是因为您仍在上大学，还是想开始为自己而不是别人工作，您有一个孩子并想花更多的时间陪伴他们，您仍然需要赚钱或在做开发
阅读全文
摘要：OAuth 2.0 标准的 RFC 比较难读懂，本文尽量把认证流程说明白。 认证方式 OAuth 2.0 共有 4 种访问模式： 授权码模式(Authorization Code)，适用于一般服务器端应用 简化模式(Implicit)，适用于纯网页端应用，不过现在推荐使用 PKCE 作为替代 密码模
阅读全文
摘要：夜深了。 我的同事把这周写的代码提交了。我们在开发一个图形编辑器画布，已经实现了形状调整功能，即通过拖拽形状边缘的手柄来调整形状（比如矩形和椭圆形）。 代码可以运行。 但重复代码有点多。每一种形状（比如矩形和椭圆形）有不同的手柄，往不同方向拖拽手柄对形状的位置和大小影响也不一样。如果用户同时按住 S
阅读全文
摘要：1 引言 任何软件都是协同开发的，所以 CodeReview 非常重要，它可以帮助你减少代码质量问题，提高开发效率，提升稳定性，同时还能保证软件架构的稳定性，防止代码结构被恶意破坏导致难以维护。 所以 CodeReview 机制是否健全是一个工程团队能否长期健康发展的决定因素之一，这次我们读一篇关于
阅读全文
摘要：应用层数据访问 十几二十年前就是单库事务，OLTP和OLAP共用一个数据库，今天还是很多公司在沿用这种应用开发模式， 不是技术没有发展，而是人没有发展，运行规则没有发展。 单库读写+数据分析， 到单库读写分离， 到OLTP和OLAP分离， 到整个数据链路的streamline，经历过的感觉很easy
阅读全文
摘要：对更快交付高质量软件（或"快速质量"）的需求要求组织以敏捷，持续集成（CI）和DevOps方法论来寻找解决方案。测试自动化是这些方面的重要组成部分。最新的《 2018-2019年世界质量报告》表明，测试自动化是实现"快速质量"的最大瓶颈，因为它是成功采用敏捷和DevOps的推动力。 没有好的工具就无
阅读全文
摘要：Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。 对于前端而言，在 CI 环境中使用也更容易集成开发，测试与部署。比如可以为流水线(Pipeline)设置 Lint/Test/Security/
阅读全文
摘要：有很多方法可以在 Linux 命令行中将文本从小写更改为大写，反之亦然。实际上，有一组这样的命令可以选择。这篇文章检验了一些优秀的命令来完成这项工作，以及你该如何让它们正常工作。 使用 tr tr(translate)命令是在命令行或脚本中最容易使用的命令之一。如果你要确定要一串大写字符串，你只需将
阅读全文
摘要：API就是接口，就是通道，负责一个程序和其他软件的沟通，本质是预先定义的函数。譬如我们去办事，窗口就类似一个API，如果对于某一件不简单的事情，这个窗口能做到让我们“最多跑一次”，“只盖一枚章”，这个API就是不错的。（当然，API不太一样，适用接口隔离原则，即使用多个隔离的接口，如用户注册与用户登
阅读全文
摘要：我给你解释一下web前端工作是做啥的，Web前端开发工程师，主要职责是利用(X)html/css/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网
阅读全文
摘要：最近一段时间，通过各种方式与同行们交流了「前端技术」与「前端工程师」的现状及未来发展的方向性问题，大家在一些方面有所共鸣。 下面就来说说我的一些看法—— 困惑 多多少少，有人曾经或正在困惑：「前端有未来吗？」 有此困惑的人，TA 可能是—— 正在学习 web 前端技术，就是纯粹的 html、css
阅读全文
摘要：今天专门写一篇文章来谈下技术人员思维转变，或者说叫从技术到管理，从技术走到项目经理或产品经理的时候你应该有的一些思维转变。对于技术人员在技术上专注和精进本身是没有问题的，但是如果技术人员沉迷在技术里面那么很难真正走向管理或成为一个打造好产品的产品经理。 培养客户驱动和经营意识 个人理解首先要培养的就
阅读全文
摘要：一、背景 1.最近在进行一个新项目，所以在有些需求不明确或工作任务不明确的时候难免做些无用功。但是，在跟领导确认了多遍需求之后，做出来的东西还是被全盘推翻，成功地被扣上一口大锅，因为我的领导上面还有领导。 2.每个公司都有明确的代码管理工具、文档管理工具，也针对这些工具制定了某些规则。一方面是为了方
阅读全文
摘要：1.ping 命令 ping 是个使用频率极高的实用程序，主要用于确定网络的连通性。这对确定网络是否正确连接，以及网络连接的状况十分有用。简单的说，ping 就是一个测试程序，如果 ping 运行正确，大体上就可以排除网络访问层、网卡、Modem 的输入输出线路、电缆和路由器等存在的故障，从而缩小问
阅读全文
摘要：客户端通过nginx代理访问后端tomcat服务器时，后端服务器收到的请求信息中只有nginx代理的IP信息，无法看到client的真实IP，所以nginx需要获取客户端请求头的真实IP地址进行传递，网上查资料一般配置如下： server { listen 8080 default_server;
阅读全文
摘要：本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件，用于大大提高软件开发的效率。VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。 官网为：https://code.vis
阅读全文
摘要：一个技术团队，不管大小，如果没有“技术味道”，那么技术Leader负有很大的责任。“技术味道”的缺失，是目前技术团队存在的最大问题。特别是做业务开发的技术团队，如果管理者完全不关心技术细节，绩效完全和业务KPI绑定，就会导致工程师们整天只会写if-else的业务代码，得不到技术上的成长。在这样的技术
阅读全文
摘要：作为一个前端工程师，如果你对 html 和 css 有基本的了解，并希望在浏览器中创建美观的用户界面，那就别到处乱找资料了！在本文中，你将通过了解以下七个基本知识来提高 UI 设计技能： 留白 对齐 对比 比例 板式 颜色 视觉层次 让我们开始吧！ 留白 我们要研究的第一个设计基础是 空间留白 ，也
阅读全文
摘要：“ 通过社区投票将51个提名减少到15个决赛入围者之后，由NicolasGrégoire，Soroush Dalili，Filedescriptor和我本人组成的专家小组授予，投票并选择了2019年的十大新的网络黑客技术。 ” 每年，专业研究人员，经验丰富的测试者，赏金猎人和学者发布大量博客文章，演
阅读全文
摘要：背景 下午在搞代码部署的时候， 遇到一个文件大小写的问题， 问题比较简单， 但是也简单整理下， 分享给大家。 正文 下午在搞代码部署的时候， 线上编译失败了， 看了下错误日志: #7 0.984 $ BABEL\_ENV=production webpack --config webpack/web
阅读全文
摘要：最近的弄的小程序差不多有点东西了，就来写一些关于小程序的感悟吧 01 前言 一般来说，我认为小程序是一个没有什么技术含量的东西，特别是现在有了组件库，而且小程序生态不断完善的情况下，只要对着文档慢慢写就好，就是时间的问题。然后这里也不是教大家怎么去写程序之类的，而是本人在经历过后的一些小建议。 02
阅读全文
摘要：都已经 2020 年了，但我们仍然在生产劣质软件。自从计算机诞生以来，已经过去了近 70 年，但我们似乎还没有吸取所有的教训，仍然在犯着重复的错误。 科技行业的变化日新月异，或许今天看起来有意义的事情五年后就失去了其意义。我认为，这正是软件的一个迷人之处，因为它的可塑性很强。但是有一件事是不变的，那
阅读全文
摘要：正则表达式是一种字符模式，用于在查找过程中匹配制定的字符。 元字符通常在Linux中分为两类： Shell元字符，由Linux Shell进行解析；正则表达式元字符，由vi/grep/sed/awk等文本处理工具进行解析； 正则表达式一般以文本行进行处理，在进行下面实例之前，先为grep命令设置—c
阅读全文
摘要：配置文件整体结构 vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com # 全局基础配置 user 用户名 [用户组]; #建议同cpu数一样，如果number=2，启动nginx后，后台会看到2个nginx进程 worker_proc
阅读全文
摘要：Golang 的 1.13 版本 与 1.14 版本对 defer 进行了两次优化，使得 defer 的性能开销在大部分场景下都得到大幅降低，其中到底经历了什么原理？ 这是因为这两个版本对 defer 各加入了一项新的机制，使得 defer 语句在编译时，编译器会根据不同版本与情况，对每个 defe
阅读全文
摘要：SSH keys SSH key 可以让你在你的电脑和Code服务器之间建立安全的加密连接。 先执行以下语句来判断是否已经存在本地公钥： cat ~/.ssh/id_rsa.pub 如果你看到一长串以 ssh-rsa或 ssh-dsa开头的字符串, 你可以跳过 ssh-keygen的步骤。 提示:
阅读全文
摘要：一、问题背景 最近公司最近的几台线上服务器经常出现CPU覆盖过高,影响部分应用响应超时,产生了大量的短信和邮件报警,经过排查数据库日志和access.log,发现是API接口被刷,被恶意疯狂请求,最大一次大概120次/s。 之前没有过太多这方面经验,处理起来不是很顺畅,这次的问题刚好提了醒,经过这次
阅读全文
摘要：在2017的头几天，我开始研究我最新的开源项目。它的设计和构建，是用来解决我的一个业务问题。该项目被称为bootparts，它的用途是简化网站建设的过程。 这不是我第一次进入编码世界。这些年来，我以不同的方式为不同的项目做出了贡献。然而，这一次我负责一切事情。这给了我额外的压力。我不喜欢压力。但是与
阅读全文
摘要：Morten Primdahl，Zendesk的首席技术官兼联合创始人 1.扩展技术是一个挑战。Just do it。 我们是从一个只有3个人其他啥都没有的创业公司逐步成长为一家大型的具备可扩展性，业务操作能力，数据库和产品开发的企业。如果你真心醉心于做企业，那么这就应该成为你的目标。 当你从200
阅读全文
摘要：1、PNG图片 1). PNG8(布尔透明)简单说可以理解为静态的GIF他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明 2). PNG8(Alpha透明)可指定像素点的透明度,例如50%透明度，比布尔透明高级一点这种优点在于比PNG24/32体积小,但效果一样缺点在于IE6支持不好
阅读全文
摘要：在思考工作的时候，我们大多数人首先会想到，它伴随着危险，我们希望自己可以放弃它。但是，你还记得你第一次开始工作时的美好时光、那种感觉和紧张吗？ 那时候在你内心涌动的工作态度和动力是无可匹敌的。你会自嘲地站在队伍前面，成为第一个做任何事情的人。那时候，你想做的就是成为前辈们的榜样，为自己争光。 当然，
阅读全文
摘要：缘起 上周修改一个Bug，本来以为只需要做一些小调整就可以，后来还是发现由于受对象间的状态影响，出现了另一个错误。这也让我进一步思考对于系统设计和建模来说：面向对象是错误的，会带来后期的很多问题。 面向对象 在面向对象的设计中，系统是由对象和让对象状态发生改变的方法，让对象到达另一种状态来达到目的的
阅读全文
摘要：本系列的目的是帮助更多面试经验不足的前端人才更好地展现自己。在此，我分享一些以往我参加面试和参与招聘的一些心得，希望对大家有帮助。 关于简历设计 简历是人才的缩影，一份优质的简历是前往大公司的敲门砖。所以对于招聘，简历准备是第一环，也是最重要的一环。前端工程师的简历其实不需要视觉设计类的那般花哨，核
阅读全文
摘要：高品质的交友软件必须具备三大要素：高质量的用户、合理的匹配机制和有效的垃圾用户过滤机制，缺一不可。 我觉得没有一个社交软件可以一直维持高品质的交友状态，它最开始的时候就是质量最高的时候。因为做的越大用户画像越复杂，里面必然存在一些低质量的用户拉低你的交友质量。 下面就推荐一些高品质的交友软件，各有侧
阅读全文
摘要：区块链是一种去中心化，安全且非常快速的技术，已经在商业世界引起轰动。随着大量的区块链项目正在开发和部署在互联网上，区块链开始走向世界。已经有一些公司试图在其他人的基础上发展。所有这些区块链开发都是通过不同的编程语言完成的，下面对其中一些进行了说明。 1. JavaScript 这是一种高级编程语言，
阅读全文
摘要：本文直接从防御方式开始讨论，防御CSRF有4种方法： 使用POST替代GET 检验HTTP Referer 验证码 Token 使用POST替代GET 一些程序员在开发的时候都是用GET、POST通用的函数来接收客户端的数据，这样也是某些接口有CSRF的原因之一，但是将全部接口都改成只允许POST方
阅读全文
摘要：如果你是软件开发领域的新手，那么你会想到的第一个问题是“如何开始？”编程语言有数百种可供选择，但是你怎么发现哪个最适合你，你的兴趣和职业目标又在哪里呢？选择最佳编程语言以学习的最简单方法之一，是通过市场反响、技术趋势的发展… 阅读下文，你会发现一些用于Web开发，移动开发，游戏开发等的优秀、专业的编
阅读全文
摘要：WEB服务器、应用程序服务器、HTTP服务器有何区别？IIS、Apache、Tomcat、Weblogic、WebSphere 都各属于哪种服务器？这些问题困惑了很久，今天终于梳理清楚了： Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、html文档格式及URL。与客户端的
阅读全文
摘要：本文对了解的空格分为几个Level，看大家能达到哪个level。 Level1： 半角空格 历史最悠久的空格，在1967年，ASCII 规范中被定义。空格在 ASCII 中编码为0x20, 占位符为一个半角字符。在日常英文书写和代码编写中使用。 Level2: 全角空格 中文输入中的空格（标准说法为
阅读全文
摘要：在过去的几年里，我对多个正在进行数字化转型的产品团队进行了架构审查。发现大多数团队都会使用微服务架构来构建产品，他们使用微服务架构的意图都是正确的：更快的开发速度、更好的可扩展性、更小的独立团队、独立的部署、使用合适的技术来完成工作等等。但大多数时候，我发现团队在使用微服务时都很不顺利，他们没能利用
阅读全文
摘要：什么是 Inclavare Containers? Inclavare，是 Enclave 一词的拉丁语词源，读音是 [ˈinklɑveə]。 Enclave 指的是一种受保护的执行环境，能为其中的敏感和机密数据提供基于密钥学算法的强安全隔离，阻止不可信的实体访问用户的数字资产。 Inclavare
阅读全文
摘要：近期主流币行情波澜不惊而传销币的势头则风云再起。有读者咨询了我一个名为POCC的项目。 我看了这个项目的白皮书等相关资料，这个项目将各种区块链领域的新概念糅合在一起，包装得华丽无比。整个白皮书对项目的技术细节没有任何描述和解释，对团队成员的介绍除了一堆外国人名字也没有任何参考连接，更夸张的是项目给出
阅读全文
摘要：不同团队编写出来的 react 代码也不尽相同，水平各有高低，就像十个读者就有十种哈姆雷特，但是以下八点可能是你编写 react 代码的基本准则。 这篇 性能优化小册 - React 搜索优化：防抖、缓存、LRU 文章提到，最近要做 React 项目的一些重构和优化等相关工作，过了这么久来总结一下（
阅读全文
摘要：前言 因为和同事有约定再加上LZ自己也喜欢做完一件事之后进行总结，因此有了这篇文章。这篇文章大部分内容都是面向整个程序员群体的，当然因为LZ本身是做Java开发的，因此有一部分内容也是专门面向咱们Java程序员的。 简单先说一下，LZ坐标杭州，13届本科毕业，算上年前在阿里巴巴B2B事业部的面试，一
阅读全文
摘要：通常情况下，可以从两个方面来判断数据库是否设计的比较规范。一是看看是否拥有大量的窄表，二是宽表的数量是否足够的少。若符合这两个条件，则可以说明这个数据库的规范化水平还是比较高的。 当然这是两个泛泛而谈的指标。为了达到数据库设计规范化的要求，一般来说，需要符合以下五个要求。 要求一：表中应该避免可为空
阅读全文
摘要：Homebrew是一款包管理工具，目前支持macOS和linux系统。主要有四个部分组成: brew、homebrew-core 、homebrew-cask、homebrew-bottles。 请使用以下脚本 /usr/bin/ruby -e "$(curl -fsSL https://cdn.j
阅读全文
摘要：关于技术人员知识体系的思考 PS：网上已经有很多类似的文章，但我依然要再造一次“轮子”，因为多少有些不同的心得。 人生总有目标和追求 不管是谁，活着总是有方向和追求的，差别可能是有些人“高尚”一些，有些人“低俗”一些，有些人对自己的方向没有那么坚定、今天定了明天可能就变了。 无论是短期或长期、高尚或
阅读全文
摘要：1. 弹性上班制 程序员群体是一群怀有Geek情结的家伙，追求相对的精神自由，在自己的时间安排上也喜欢自由自在、无拘无束。灵感来时，可以废寝忘食、疯狂Coding；思维乏术时，则可能漫不经心、无所事事，这时不如早点结束工作，放松心情，触发下一次的灵感。 常规企业的朝九晚五上班制度，说实话并不适合程序
阅读全文
摘要：php事务四大特性 事务就是一组原子性的SQL查询，或者说一个独立的工作单元。 原子性(Atomicity)： 事务是数据库的逻辑工作单位，它对数据库的修改要么全部执行，要么全部不执行。 一致性(Consistemcy)： 事务前后，数据库的状态都满足所有的完整性约束。 隔离性(Isolation)
阅读全文
摘要：今天我们来比较两种在跨平台移动应用开发中最具竞争力的编程语言： Dart Vs JavaScript。 JavaScript 和 Dart 都是跨平台移动应用程序开发的不错选择，可以从 react Native 和 Flutter 中看出来。与 JavaScript 相比，Dart 非常新，但它有一
阅读全文
摘要：Apache和Nginx最核心的区别在于 apache 是同步多进程模型，一个连接对应一个进程；而 nginx 是异步的，多个连接（万级别）可以对应一个进程。下面本篇文章就来给大家介绍一下Apache和Nginx的区别有那些，选择哪个好？希望对你们有所帮助。 一、Nginx特点 1、轻量级，采用C进
阅读全文
摘要：我收集了很多关于软件开发者的编程语录。这些语录和软件开发维护、调试、软件bug、软件设计和文档、代码质量、测试和管理等相关。下面这59条编程语录虽然令人捧腹但也揭示了真相。只有真正的软件开发人员才能理解这些编程语录的价值。下面，就让我们开始吧…… 软件开发人员和程序员语录 1.A good prog
阅读全文
摘要：程序员如何写好一份技术简历!小千带你一起了解! 1、写简历的基本目的和策略 大部分情况下，写简历是找工作的第一步，考虑到第二步就是面试，那么简历就是敲门砖，为了让企业认识到你的价值，必须把自己的真实水平描述出来，展现出你有能力应对这份工作。 甚至要体现出自己是某方面的杰出人才，因为只有足够优秀的人，
阅读全文
摘要：简历不仅仅是履历，它的重要作用是展示能力！！！ 在阿里常年招聘，筛过各式各样的简历，每到招聘季，筛简历、面试过程非常耗精力，当然，原因之一是我想招非常优秀的人，宁可多花些时间，另一方面，除了那些不合格的简历之外，还有好多简历语焉不详，不得不在电面时反复确认，同时为了兼顾应聘者感受，又要装作很职业的样
阅读全文
摘要：工作了五年的工程师，算不算高级开发者？归类开发者不是简单地看工作年限，因为经验这种东西千金难换但又一文不值。 我们现在工作的行业很奇怪。明明每年都有新的从业人员涌入人才市场，但企业依旧诉苦自己迫切需要大量的开发。这种问题存在已久，而且已经越发严峻。 开发者这个行业非常年轻，也面临着很严重的人才短缺问
阅读全文
摘要：最近几个月裁员潮/失业潮一直是人们热议的话题。不少企业倒闭，甚至有不少巨头和独角兽公司，都在做组织架构的优化。 尤其是，互联网行业更新换代快，这几年甚至流行“互联网公司的中年危机”的说法。很多互联网人到了35岁边缘就不自觉地产生焦虑，担心被优化，担心再也找不到好工作。 这些年，很多人都在说IT行业不
阅读全文
摘要：我最近一直在想我们作为一个行业为什么总是产出糟糕代码的原因。 1.明显原因…… 我一下子想到的最明显的原因是，有好的程序员，也有不那么好的程序员，有的人技术水平高，有的人水平却低，有人对这门技艺感兴趣，但也有的人却不愿意在工作之外学习其他。 好了，我就不深入探讨了。 那么是不是在这表层之下还有更多的
阅读全文
摘要：为了保证Web应用程序的高可用性和性能，通常会使用多个应用服务器，然后使用负载均衡器接收用户的请求，将请求导向后端的应用服务器。目前有许多流行的软件可以起到负载均衡器的作用，它们在服务的架构有着非常重要的地位。 负载均衡器类型 应用程序通过网络进行通信，需要不同的软件和硬件合作完成。为了将复杂的问题
阅读全文
摘要：研究人员发现人工智能技术对确保敏感信息安全来说是一种非常好的工具。由于可以快速处理数据和预测分析，人工智能广泛应用于自动化系统和信息保护等领域。事实上，确保数据安全也是目前人工智能技术的实际应用，同时也有黑客利用人工智能技术进行攻击活动。 使用越多的人工智能技术进行保护，就越有可能应对使用先进技术的
阅读全文
摘要：在最近的一周,我维护的业务系统出现了很多坏毛病,一周七天crash掉了4次,每次都需要都是因为一点很小的问题,触发了蝴蝶效应,导致整个系统全盘崩溃,于是产生除了叙述本篇的想法,当然这并不是为了掩盖我在Coding上的一些细节处理和职责疏忽，只是为了从根本的细节上去分析这些问题。 (一、)为什么会产生
阅读全文
摘要：我了解到，掌握了某种语言、框架或工具的人与没有掌握的人之间的最大区别在于他们所使用的思维模型（Mental Model）。前者拥有清晰而先进的思维模型，而后者则没有。 通过良好的思维模型，你可以直观地理解复杂的问题和解决方案，这比逐步的去寻求解决方案要快得多。 我每天都用 react 工作，并且一直
阅读全文
摘要：页面加载的时候，vue生命周期的触发顺序是怎样的呢？ 那么进入某个路由对应的组件的时候，我们会触发哪些类型的周期呢？ 根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted） 组件实例的加载相关的生命周期(beforeCreate、created
阅读全文
摘要：一、受控组件 在 react 中，表单元素通过组件的 state 属性来自己维护 state，并根据用户输入调用setState()来进行数据更新，使 react 的 state 成为“唯一数据源”，被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。 class NameForm
阅读全文
摘要：从某方面讲，父组件传值给子组件进行接收，之后在子组件中更改是不允许的。你会发现vue也会直接报错，而在封装一些组件的时候，又希望做到数据的双向绑定，可以更好的控制与使用，在网上找到了两种方法，一种的话是使用 v-model 还有一种是 .sync这里我推荐使用.sync 原因：v-mode只能进行单
阅读全文
摘要：通过Redux 架构理解我们了解到 Redux 架构的 store、action、reducers 这些基本概念和工作流程。我们也知道了 Redux 这种架构模式可以和其他的前端库组合使用，而 react-redux 正是把 Redux 这种架构模式和 react.js 结合起来的一个库。 Cont
阅读全文
摘要：上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。 全局样式开发 之前的小程序开发中，我们全方面使用了 Component 构造
阅读全文
摘要：写在前面 .sync 修饰符算是 vue 的所有修饰符中较难理解的一个，本篇文章就带你走近 .sync 的世界，深入理解后会发现，其实也就那么回事。修饰符和指令息息相关，下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。 1 指令 指令即 Direct
阅读全文
摘要：vue可以通过<keep-alive>元素包裹组件，实现缓存，下次使用时不需要重新创建该组件。但存在一个问题：keep-alive包裹的组件中有滚动元素时，keep-alive不会储存滚动位置。实现后退不刷新主要依据keep-alive组件的activated和deactivated这两个生命周期钩
阅读全文
摘要：node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。 modules(模块)： 在node.js中模块与文件是一一对应的，也就是说一个
阅读全文
摘要：介绍 在本文中，我们将学习怎样在 reactjs 中把文本复制到剪贴板。 依赖的知识与环境 react 基本知识。 Visual Studio Code IDE。 Bootstrap 和 html 的基本知识。 vi设计http://www.maiqicn.com 办公资源网站大全https://w
阅读全文
摘要：方法一：使用安装包安装 下载官方安装包，https://yarnpkg.com/zh-Hans/docs/install ，安装完毕后，一定要配置环境变量。 方式二：使用npm安装 npm i yarn -g -i：install -g：全局安装（global）,使用 -g 或 --global 输
阅读全文
摘要：npx是一种在npm中安装工具，也可以被单独的下载使用 ，npx是npm5.2之后发布的一个命令，也就是只要npm的版本>=5.2就可以使用此命令；npx有很多用处，不限于通过npx http-serve来启动静态资源服务器。 npx 是什么 根据 zkat/npx 的描述，npx 会帮你执行依赖包
阅读全文
摘要：vue-cli的安装及版本查看更新 vue-cli安装 npm install vue-cli -g vue-cli的版本查看 vue -V vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的 npm ins
阅读全文
摘要：起因 为什么在vue3.0都已经出来这么久了我还要写这篇文章，因为目前自己还在阅读vue2.x的源码，感觉有所悟。作为一个刚毕业的新人，对Vue框架的整体设计和架构突然有了一点认知，所以才没头没尾地突然写下了diff算法。在我看来，Vue的核心内容分为以下几个板块： 生成render函数（runti
阅读全文
摘要：需求： 当按键盘enter键和键盘左右键时，左右切换页面卡片并读取卡片上的信息 一、获取键盘对应的keycode keyCode 实际键值 48到57 0到9 65到90 a到z（A到Z） 112到135 F1到F24 8 BackSpace（退格） 9 Tab 13 Enter（回车） 20 Ca
阅读全文
摘要：路由权限控制 前端路由是全部都由后端返回，还是后端返回对应角色下的权限，然后前端通过遍历的方式来修改当前路由呢？ 引用上面这个问题的采纳答案： 第一种后台返回路由，第二种后台返回权限。共同点： 两种方法都可以实现需求前端都要维护一份路由地址与模块文件地址的映射后段返回的数据一般都要再遍历做二次处理有
阅读全文
摘要：在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。 本文主要分为三部分： react-native-vector-icons库的集成与使用
阅读全文
摘要：前言 webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务，大家只需在 webpack 的配置中，增加 devServer 的配置来启动。devServer 配置的本质是 webpack-dev-server 这个包提供的功能，而 webpack-dev-mi
阅读全文
摘要：路由参数解耦 一般在组件内使用路由参数，大多数人会这样做： export default { methods: { getParamsId() { return this.$route.params.id } } } 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特
阅读全文
摘要：对于父子组件状态同步，这篇文章 《vue父子组件状态同步的最佳方式》 讲述了大多数情况下的最优解，但是当我们希望自己创建的可复用组件和封装的逻辑能够尽量行为一致的时候情况可能会有所不同，举个例子，我们现在要封装一个输入框组件叫做 MyInput 我们知道普通的输入框通常会使用 v-model 来做双
阅读全文
摘要：场景 项目中遇到要做一个报表的仪表盘，每一个卡片内是一个报表，报表有不同类型，每一种类型有其特定的尺寸。允许选择报表并添加到仪表盘。允许通过拖拽调整每个卡片位置和卡片的大小。最终可以保存布局好的仪表盘。 遇到的问题 vue-grid-layout通过维护一个数组(layout)实现拖拽布局，每一个卡
阅读全文
摘要：保存图片到本地相册，需要用户允许相册权限；但是有时客户手滑或者是特别原因点击了拒绝授权，我们需要打开权限列表，让客户手动打开此项权限； 需要用到的API wx.getImageInfo(); wx.saveImageToPhotosAlbum(); wx.getSetting(); wx.openS
阅读全文
摘要：很多开发人员都很喜欢 react，在前端领域它也是很流行的 UI 库了。我们也知道应用要交付生产环境前是必须要经过完善的测试的，而测试应用程序时，有趁手的工具能极大减轻开发人员的负担、提升测试效率并减少测试漏洞。正所谓"工欲善其事，必先利其器"，这篇文章就为大家推荐 8 个好用的测试工具、库和框架。
阅读全文
摘要：Deno是什么？ Deno v1.0.0已于5月13日正式发布。 其开发者为Ryan Dahl，他的上一个项目是Node，相信我们大部分人都了解。 作为Node之父，Ryan Dahl认为Node自从他把项目移交出去后，Node的走向越来越背离了他的初衷，并且存在着很多无法解决的问题，所以他决心重新
阅读全文
摘要：有了 react Hooks 的加持，妈妈再也不用担心函数组件记不住状态 过去，react 中的函数组件都被称为无状态函数式组件(stateless functional component)，这是因为函数组件没有办法拥有自己的状态，只能根据 Props 来渲染 UI ，其性质就相当于是类组件中的
阅读全文
摘要：引言 在nuxt中使用vuex，以模块方式引用——计数器为例 目录结构 js模块写法 // user.js// state为一个函数, 注意箭头函数写法const state = () => ({ counter: 6}) // mutations为一个对象const mutations = { i
阅读全文
摘要：前言 watch 是由用户定义的数据监听，当监听的属性发生改变就会触发回调，这项配置在业务中是很常用。在面试时，也是必问知识点，一般会用作和 computed 进行比较。 那么本文就来带大家从源码理解 watch 的工作流程，以及依赖收集和深度监听的实现。在此之前，希望你能对响应式原理流程、依赖收集
阅读全文
摘要：函数防抖 防抖分为两种: 一种是立即执行：频繁触发事件，第一次触发时执行函数，后面触发不会执行，停止触发，间隔一定时间之后再触发事件，函数才会再次执行 另一种是后执行：频繁触发事件，事件只会在触发事件之后间隔定义的时间，函数才会被执行，而且只会执行最后一次触发的事件。 在vue中对click添加防抖
阅读全文
摘要：想不出来，把官方的拿过来vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示，管道是指 ' | '(回车键上方)，又
阅读全文
摘要：以下会涉及到的技术点：react mobx compositionstart compositionupdate compositionend 问题描述 在使用 input 时，通常会对输入的内容做校验，校验的方式无非两种： 允许用户输入，并且做错误提示； 不允许用户输入正则或者函数匹配到的字符。
阅读全文
摘要：何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。 Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包
阅读全文
摘要：表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。 基于组件的框架，如 vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。 在本教程中，将向您展示新的 vue Composition API（即将加入 Vue 3 中）如何使表单代码更清晰、更具可扩展性
阅读全文
摘要：我们的需求 核心的就是渲染器，它提供了最基础渲染能力，有了它，你可以实现微前端、微服务、远程组件、首屏渲染，甚至可以和 react、Ejs 等配合使用。 它可以和怎样的你协作？ 如果你是传统的后端渲染的，需要做seo，但是你希望在部分布局，部分页面引入 vue，那么 renderer.renderj
阅读全文
摘要：当页面滚动时，如何动态切换布局/样式 1. 添加滚动事件的监听/注销 //在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.
阅读全文
摘要：在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 react 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。 以上是 react 官网对受控组件与非受控组件的一次解释，大学刚刚毕业时候，看到这一段， 实在有些难以接受，在我
阅读全文
摘要：完整版和运行时版 打开vue的官网，你会发现有vue有两种不同的构建版本，Vue官方对两种不同构建版本的解释是这样子的： 完整版：同时包含编译器和运行时的版本（编译器：用来将模板字符串编译为js渲染函数的代码） 运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是出去编译器的其它一切
阅读全文
摘要：1.场景 在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面，页面是不进行刷新的 2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好 3.解决方
阅读全文
摘要：简介 在移动应用开发中，经常会遇到加载网页的需求，打开网页通常有两种方式，即在应用内使用内置的组件打开和使用系统自带的浏览器打开。不过，在Flutter应用开发中，由于官方并没有提供类似Webview的网页加载组件，所以如果项目中涉及网页加载需要使用第三方插件库，如webview_flutter、f
阅读全文
摘要：前言 最近在做公司flutter项目的时候，接到了一个需求，本质上就是实现收起键盘的时候让TextField组件失去焦点的功能。 这个需求乍一看很好解决，心想，就这！就这！就这！so easy！ 但是！但是！但是！万万没想到啊，实现时候却让我本来就很稀薄的头发雪上加霜，原因就是安卓手机第三方输入法有
阅读全文
摘要：Angular Material 作为 Angular 的官方组件库，无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。 广州vi设计http://www.maiqicn.com 办公资源网站大全https://www
阅读全文
