浅谈 Checkbox Group 的双向数据绑定

前言 不曾想在忙碌的工作面前,写一篇技术博客也成了奢求。 Checkbox 作为表单中最常见的一类元素,使用方式分为单值和多值,其中单值的绑定很简单,就是 true 和 false,但是多值(Checkbox Group)的绑定就有一点复杂了。在实际工作中发现很多组件库关于 checkbox-gro ... »

震惊!很多人都不知道 CSS Grid 框架早就有了!

前言 写作本文起源于知乎的一个问题:【CSS Grid 布局那么好,为什么至今没有人开发出基于 Grid 布局的前端框架呢?】 这篇文章拖沓了两个月,是因为真的不知道从哪里说好。这个问题的所有回答几乎都没有切中问题的本质,而且对 CSS Grid 也有很深的误解。另外这个问题的描述可能不太恰当,因为 ... »

基于 Angular Material 的 Data Grid 设计实现

自 Extensions 组件库发布以来,Data Grid 成为了使用及咨询最多的组件。最开始 Data Grid 的设计非常简陋,经过一番重构,组件质量有了质的提升。 Extensions 组件库: https://github.com/ng-matero/extensions Data Gri ... »

Ng-Matero V9 正式发布!

距离 Ng Matero 第一版发布已经过去了半年多,该项目获得了越来越多的关注及喜爱,甚至得到了外国友人的赞助。借此项目也认识了很多对 Angular 和 Material 感兴趣的朋友,如今对项目的维护已经不单单是兴趣,更多的是一种责任。 Angular V9 已经在二月份重磅发布,拖沓了一个月 ... »

Angular Schematics 三部曲之 Add

前言 因工作繁忙,差不多有三个月没有写过技术文章了,自八月份第一次编写 schematics 以来,我一直打算分享关于 schematics 的编写技巧,无奈还是拖到了年底。 Angular Schematics 是非常强大的一个功能,可以快速初始化项目,也可以自定义组件模板。在去年 schemat ... »

“寒冬”将至,如何砥砺前行?

这篇文章写于去年年底,为了参加公司内部的一个征稿活动。原本只是想在博客中做一个备份,并未想过发表,但是今年互联网形式依旧严峻,再次爆发几次大规模裁员潮。时隔一年,我决定把这篇文章分享出来帮助那些对前途感到迷茫的朋友。 夜已深,提交完最后一个 commit,终于可以安心睡下。 在猎头的眼里,我不是根正 ... »

代码美化的艺术

前言 原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”更贴切一点,但是本文的深度远没有标题那么宏大。 在我看来,代码质量不仅体现在逻辑上,也要体现在形式上。尤其前端代码,在日渐复杂的单页面 ... »

Angular Material 的设计之美

前言 Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量组件库。 官方列举了如下几点来解释“高质量”的含义。 国际化和可访问性,以便所有用户都可以使用。 不 ... »

Ng-Matero 0.1 发布了!

Ng Matero 0.1 终于发布了!周末折腾了两天,结果最后发版还是出了点意外,好在今天补了一版。 距离 Ng Matero 发布第一版已经过去了一个多月,然后很颓废地休息了半个多月,最近项目的关注度好像明显提升了,所以如果项目不维护感觉对不起大家。作为一个工程项目最好的方式还是通过脚手架安装。 ... »

Ng-Matero:基于 Angular Material 搭建的中后台管理框架

前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用。 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候,我发现 Material 的组件基本已经够用了,其它不足的地方可以配合一些优秀的第三方库。另外,M ... »

如何使用 RxJS 更优雅地进行定时请求

在用 Angular 做项目的时候,遇到了一个有点麻烦的问题。具体问题如下: 轮循请求某个接口,如何保证接口返回的数据与请求的顺序相同? 实际的业务场景是这样的:前端需要轮循请求后端接口获取文件处理进度,并在前端用进度条展示。如下方所示: 首先想到的肯定是使用 或者 进行定时请求。然而结果有点诡异, ... »

你不需要 jQuery,但你需要一个 DOM 库

写这篇文章的目的,一方面是介绍一下自己编写的模块化 DOM 库 domq.js,另一方面是希望大家对 jQuery 有一个正确的认识,即使 jQuery 已经退出历史舞台,但是它的 API 会以另外一种形式存在下去。 GitHub: "https://github.com/nzbin/domq" 文 ... »

React 系列教程2:编写兰顿蚂蚁演示程序

简介 最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西。因无意中看到 "生命游戏" 的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React。 兰顿蚂蚁的规则非常简单: 如果蚂蚁位于白色方块,则向右旋转 90°,反转方块的颜色,然后向前移动一步。 如果蚂蚁位于黑 ... »

如何使用纯 CSS 制作四子连珠游戏

序言:这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用使用奇淫巧技解决困难问题的方法。 原文: "How the Roman Empire Made Pure CSS Connect 4 Possible" 翻译: "nzbin" 实验是学习新技巧、思考新想法、并 ... »

如何写一份优秀的前端简历

前言 如今前端市场一片混乱,典型的金字塔形状,前端从业人员很多,但高级开发及以上却非常稀缺。前端招聘也是所有猎头及 HR 的痛点所在,在这种混乱的环境中,如何让自己突出重围?需要实力,也需要技巧。因为我平时会负责筛选简历,在看过大量简历之后,对于简历的内容及形式有一些自己的看法。本文主要讲述技术简历 ... »

浅谈 Angular 项目实战

为什么使用 Angular 我不是 Angular 的布道者,但我自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的相关教程,最早接触的是 React,但是并没有实际的项目经验,只做过一些 Demo 。使用 Vue 做过一个比较复 ... »

构建具有用户身份认证的 Ionic 应用

序言:本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易,对于 Ionic 入门学习有一定帮助。因为文章是去年发表,所以教程内关于 Okta 的一些使用步骤不太准确,但是通过 Okta 的官网也可以找到对应的内容。另外,使用 npm 安装 Ionic s ... »

React 系列教程 1:实现 Animate.css 官网效果

前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作。这对于学习 React 来说是一个非常典型且简单的示例。但是我并不会在教程中 ... »

如何在现有的 Web 应用中使用 ReactJS

原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如何 ... »

关于 JS 拖拽功能的冲突问题及解决方法

前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其他的拖拽事件产生冲突,由此产生了对于事件绑定的思考。本文主要介绍解决这种冲突的方法,主要是事件绑定的时机问题。 问题来源 这个问题是在类似如下 CodePe ... »