前端技术 博客文章积累

说点儿什么

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

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

Android 屏幕适配：最全面的解决方案

前端性能优化

前端性能优化的七大手段

前端工程精粹（一）：静态资源版本更新与缓存 - InfoQ

前端安全性能

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()存在不安全的随机数漏洞

不安全的随机数.png

js生成随机数

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

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

加密、解密

GitHub - sytelus/CryptoJS: 加密解密

AES JS实现加密解密

前端加密那点事

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

Flutter

Flutter - Beautiful native apps in record time
Flutter中文网是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
简介 · 《Flutter实战》
《Flutter实战》随书源码
 widget概述

Flutter的中英文的技术文档，应有尽有，很多，不再过多粘贴。

Flutter SDK releases - Flutter

2019年5月分开始学习使用Flutter，配置了开发环境，运行起来了，并跟着官方文档建了一些小例子来学习，然后就没再用它了，因为日常工作比较多，这个就暂时抛开了，等到12月份中旬，公司项目开始正式使用Flutter，再打开曾经建的flutter的小例子运行，发现报错了，提示升级，升级后，依然报错，查阅资料才发现，因为有了AndroidX的出现。
从Flutter v1.12.13开始，默认情况下，使用flutter create -t <project-type>创建的新项目使用AndroidX。那么只能是按照文档来迁移至AndroidX了。

AndroidX Migration
Flutter - Migrate to AndroidX

下面是一些学习Flutter开发app时，查阅的一些技术博客文章：
flutter 配置不同的开发环境(qa/dev/prod) - 简书

Flutter 路由和导航
 【flutter】4.提高dart代码可读性，优化目录结构，flutter组件化开发
 Flutter学习之事件循环机制、数据库、网络请求
 Flutter踩坑：Flutter SDK更改后运行报错的处理
 Flutter 05: 图解修改应用名称及图标 - 简书
 Flutter之启动图片、启动图标、应用名称等 - Aries

Dynamically initialize variables (radio button values) in dart?
认识Flutter组件篇之Text组件
 flutter 开发中常用的list，map
[译] Flutter 核心概念详解： Widget、State、Context 及 InheritedWidget
Flutter Color的使用
 Flutter Form、TextFormField及表单验证、表单输入框聚焦
 Flutter学习之旅——实用入坑指南
 Flutter填坑全面总结

如何降级Flutter SDK（Dart 1.x）

Dart 枚举原始值指定问题及原始值与枚举值转换问题
 Flutter自动换行和两列布局

Flutter 问题解决总结这篇文章总结了 1.路由开启下一个页面的，后退黑屏问题 2. 弹软键盘，布局随键盘顶上去问题 3. 弹软键盘，iOS关闭不了软键盘 4. ScrollView 嵌套 ListView 滚动问题 5. Android 嵌套Flutter 后退键返回上一级页面处理 6. 国际化当用一些控件时默认是英文这时候就需要国际化了（例如：选择日期组件）7. Rxdart 进行网络请求 8. 集成image_pick不回调 9. Flutter 在iPhone输入框中长按复制粘贴弹窗报错的问题

Flutter开发中的一些Tips这篇文章总结了 1.部件溢出 2.输入框的遮挡 3.SafeArea 4.善用Theme 5.注意平台差异 6.keyboardType 7.InkWell 8.保持页面状态 9.依赖版本问题 10.Flutter Android 打包 11.其他

flutter各种功能实现方法及比较(更新中......)这篇文章总结了例如实现widget隐藏使用Opacity、使用Offstage、使用visibility 的优缺点，等等，还有更多总结。

Flutter中的浮动按钮 FloatingActionButton

用 Flutter 实现 PageView 指示器

Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）

GitHub - hekaiyou/jedi: 1个测试开发工程师用100天的业余时间开发的Flutter商业项目！

js、jq

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

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

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

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

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

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

layer 弹出层插件

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

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: 组织结构

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跳转到指定页码,并定位,设置缩放值

css、html

html代码编写快捷语法 Cheat Sheet

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 简介