说点儿什么

上一次做这种整理是2017年的 前端技术 博客文章、书籍 积累 这篇，因为平时工作中遇到一些问题，会查阅资料，然后思考解决办法，这些对我有帮助的资料，就收藏在了浏览器的标签文件里，天长日久，收藏的链接越来越多，打开翻找比较麻烦，即便是做了很多文件目录来分类，还是感觉不够，于是有了这次的整理。

css、html

Box Shadow CSS Generator | CSSmatic 这是一个在线生成Box Shadow样式的工具，在cssmatic的标签页里还有其他几个样式例如渐变、圆角框等在线工具，可以点击看看，很好用的，cssmatic是网页设计师的终极CSS工具。
CSS3 Box Shadow Generator | BestAgencies 这也是一个在线生成Box Shadow样式的工具，
bestagencies里还有很多的在线样式工具：Index of /tools | BestAgencies
AniCollection - use and share CSS3 animations. 字面意思，AniCollection是查找、使用和共享的 CSS3动画库，这里有很多样例供参考。

免费的网站开发/设计教程。包括CSS，Javascript，AJAX，ColdFusion和HTML教程，代码示例，布局帮助和参考

网页loading GIF图片（加载）_常用图标_懒人图库

按钮点击效果(水波纹)

CSS动画：keyframes用法介绍

那些年我们一起清除过的浮动

CSS -- 字体单位（px、em、rem）

px rem转换工具 一个将px转换为rem单位的在线工具

rem是如何实现自适应布局的？

CSS多行文本溢出省略显示

<a> - HTML（超文本标记语言） | MDN 这个文档里详细的介绍了a 标签的download、href、target 等属性。
html中 a 标签的种类
你不曾察觉的隐患：危险的 target="_blank" 与 “opener”

前端不止系列 - Retina屏幕下两倍图
使用 CSS 解决 @2x 和@3x 图片问题

Emoji 简介

CSS3自定义滚动条样式 注意只在chrome下有效！！！！！！

图片水平垂直居中对齐的四种做法

CSS3模仿雷达扫描动画

纯 CSS 实现波浪效果！
css实现波浪线及立方体
CSS3径向渐变radial-gradient实现波浪边框和内倒角

CSS3的calc()使用

css table自动布局下宽度计算

解决设置table中td宽度不生效

LESS « 一种动态样式语言

HTML5资源教程 | 分享HTML5开发资源和开发教程

js、jq

Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript 这是一个验证正则的在线工具。

Div 滚动条滚动到指定的位置

HTML5 - 使用JavaScript控制<audio>音频的播放

BootCDN API | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

JavaScript执行环境 + 变量对象 + 作用域链 + 闭包

复制内容到剪贴板

JavaScript复制内容到剪贴板
js 将字符串复制粘贴到剪贴板
「译」利用 JavaScript 复制文本到剪贴板

iScroll 5 API 中文版

版本 | iScroll 5 API 中文版 这是一本电子书。

移动端的上拉、下拉实现刷新、加载更多

listloading 一个移动端的上拉、下拉加载更多的组件 - 移动端组件开发 - SegmentFault 思否
GitHub - gtdalp/listloading: listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件

dropload.min.js 移动端下拉刷新、上拉加载更多 Zepto/jQuery插件
GitHub - ximan/dropload: 移动端下拉刷新、上拉加载更多插件

Layui

Layui 开发使用文档 - 入门指南

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用

layer 弹出层插件

layer官方演示与讲解（jQuery弹出层插件）
layer,一个可以让你想到即可做到的JavaScript弹窗（层）解决方案
弹层组件文档 - layui.layer

Headroom.js

Headroom.js

Headroom.js为页面顶部多留些空间。在不需要页头时将其隐藏。
Headroom.js 是一个轻量级、高性能的JS小工具（不依赖任何工具库！），它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例，当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。

图片加载

JS判断单、多张图片加载完成

当图片404时显示默认图片

js - 预加载+监听图片资源加载制作进度条

lazyload: 图片延迟加载插件

仿淘宝分类选择 comboboxfilter

仿淘宝分类选择

富文本编辑器

KindEditor 4.x 文档

wangEditor - 轻量级web富文本编辑器 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

wangEditor-mobile - 第一款适用于手机操作、手指触摸的富文本编辑器！真正适用于手指触摸的富文本编辑器！ 使用 javascript 开发，轻松集成到 webapp

Interactive Playground - Quill Rich Text Editor

图像裁剪插件

Cropper 一个简单的jQuery图像裁剪插件，可以滚动放大缩小，非常好用。

图片轮播插件（图片左右滑动）

bxslider | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务ouch enabled jQuery plugin for creating responsive carousels and sliders.

SuperSlide | TouchSlide 图片轮播

强大实用的jQuery幻灯片插件Owl Carousel_dowebok

PicCarousel.js|简单的jQuery旋转木马插件效果演示_jQuery之家-自由分享jQuery、html5、css3的插件库

iSlider—可能是最流畅的移动端滑动组件
GitHub - be-fe/iSlider: Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App
iSlider demo

日历插件

FullCalendar 日历插件
FullCalendar日历插件说明文档
fullCalendar日历插件如何默认周末的日期背景色

周日历 weeklyCalendar
一款js实现的周日历
周历

数字滚动

numberAnimate js数字滚动插件
在使用这个numberAnimate js数字滚动插件时，发现有一个小小的效果不符合我们的需求，然后修改了他的源码，记录如下：
数字滚动插件numberAnimate.js的使用及效果修改

Jquery 数字滚动插件

CountUp.js CountUp.js是一个无依赖项的轻量级JavaScript类，可用于快速创建以更有趣的方式显示数字数据的动画。

实现数字滚动变化以及延伸

评分插件

评分插件jquery.raty.js

密码强度检测插件

jQuery.passwordStrength 密码强度检测插件

弹出层插件action-sheet

js弹出层插件action-sheet

download.js 使用JS和HTML5进行客户端文件下载

download.js 实现浏览器下载 而不是打开
download.js 使用JS和HTML5进行客户端文件下载

jQuery拖拽元素制作拖放位置

jQuery拖拽元素制作拖放位置 - 代码库

TagCanvas 标签云

TagCanvas - an HTML5 Canvas Tag Cloud
TagCanvas是一个Javascript类，它将绘制和动画化基于HTML5 canvas的标签云。我将根据LGPL v3许可证将其作为开源发布。
TagCanvas - HTML5 Canvas技术开发的标签云动画 - 小张个人博客不忘初心-分享Web技术的个人博客网站_023xs.cn

OrgChart组织架构图控件

OrgChart组织架构图控件

OrgChart: 组织结构

GitHub - dabeng/vue-orgchart It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

PDF.js实现PDF文件在线预览

PDF.js一个基于Web标准的通用库，用于解析和呈现PDF。
pdf.js: PDF Reader in JavaScript

移动端实现PDF文件在线预览
PDF.js实现html页面读取pdf文件内容
pdf.js跳转到指定页码,并定位,设置缩放值

PC端、移动端的页面适配及兼容处理

PC端、移动端的页面适配及兼容处理

前端安全性能

XSS 攻击和防御

XSS（Cross-Site Scripting）又称跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。XSS是一种经常出现在 Web 应用程序中的计算机安全漏洞，是由于 Web 应用程序对用户的输入过滤不足而产生的。

那些年我们一起学XSS 这是一本电子书，分21个章节，详细的讲述了各种类型的 XSS 案例 以及 修复方案。这本电子书完全可以作为手册，随时进行查阅，方便快捷。

如何让前端更安全？——XSS 攻击和防御详解

Web 安全漏洞之 XSS 攻击

21.浅谈前端WEB安全性(二)

Math.random()存在不安全的随机数漏洞

Math.random()存在不安全的随机数漏洞:

r = Math.random()

使用的Math.random()可以修改为：

var array = new Uint32Array(1);
window.crypto.getRandomValues(array);

r = array[0]

创建四位的验证码 字母和数字的随机数 Math.random()存在不安全的随机数漏洞

js生成随机数

RandomSource.getRandomValues() - Web API 接口参考 | MDN

如何使用window.crypto.getRandomValues在JavaScript中调用扑克牌？

加密、解密

GitHub - sytelus/CryptoJS: 加密 解密

AES JS实现加密解密

前端加密那点事

Web 前端密码加密是否有意义？

前端性能优化

前端性能优化的七大手段

Photoshop

做前端开发的人，多少也会点儿简单的PS,例如切图，处理图片像素、大小，图片格式等。
例如有时候用户随便找了一张图，说是要做页面背景，图片放大就会模糊，那么，没有UI设计或美工的情况下，自己学一下简单的PS，自己就能处理了。
怎么用 Photoshop 把图片变清晰？

制作gif

如何制作gif图片？

SWF to GIF | CloudConvert CloudConvert在线转换您的视频文件。 除其他外，我们支持MP4，WEBM和AVI。

ScreenToGif 记录屏幕，进行编辑并另存为Gif或视频。 屏幕，摄像头和白板录像机与集成编辑器。