为了践行新的一年能翻译12+的国外技术博客文章的目标，今天就让我们开始第一篇。
本篇文章翻译自一位专注于H5、CSS、web性能的自由开发者： Michael Scharnagl。
译者引言：
当我们在使用APP时，我们在 设置中常会发现这么一项操作：如无图模式、夜间模式等等，这些设置项来自对用户偏好的考量。为了打造轻应用的进展中，在web中也将逐步实现这样的特性。今天，我们就来了解一下关于在web中打造用户偏好的特性。
适应用户偏好 在过去的几年里，浏览器实现了各种功能，可以使用CSS、JavaScript或检查服务器端的首选项来响应web上的用户偏好。在本文中，将展示浏览器当前公开的用户偏好、处理它们的最佳方式，以及对未来的展望，以了解可能很快就会出现什么。
perfers-reduced-motion 让我们从减少运动媒体查询（perfers-reduced-motion）开始。这项特性是在Safari10.1中引入的，目前在Safari、IOS Safari、Firefox和Chrome的最新版本中得到支持。
perfers-reduced-motion这项特性被用于检测用户是否需要系统将其使用的动画或运动最小化。你可以用下面的方式检测：
@media (perfers-reduced-motion: reduce) { /* disable animations/transitions 禁用动画或过渡*/ } 或者使用另一种方式：
var motionQuery = matchMedia('(perfers-reduced-motion)'); function handleReduceMotionChanged() { if (motionQuery.matches) { /*disabled animations/transitions 禁用动画或过渡*/ }else { /*enable animations/transitions 开启动画或过渡*/ } } motionQuery.addListenet(handleReduceMotionChanged); handleReduceMotionChanged(); 但是，对所有CSS 动画(animation)和过渡(transition)禁用perfers-reduced-motion:reduce的方式是：
@media (perfers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 但是，这样做并不会触发动画开始/结束事件或关键帧(animation start/end events or keyframe states)状态。所以，如果你的代码依赖于这些事件，你还需要这么做：
@media (perfers-reduced-motion: reduce) { * { transition-duration: 0.
网易WEB白帽子 02..WEB安全基础 1.钓鱼
诱惑性的标题，仿冒真实网址，骗取用户账户，骗取用户资料
2.网页‘篡改’
hacked by
Intitle : keyword 标题中还有关键字的网页
Intext : keyword 正文中还有关键字的网页
Site : domain 在某个域名或者子域名下的网页
3. 暗链
隐藏在网站中的链接
网游/医疗/博彩/色情
提高网站排名
4. Webshell(后门)
web后门获取权限
XSS 跨站脚本 黑客通过‘HTML’篡改网页，插入恶意脚本，当用户在浏览网页时，实现控制用户浏览器行为的一种攻击方式。
XSS分类
存储型 访问网站，触发XSS(Firebug插件) < img src = ‘’#‘’onerror = ‘alert(hello)’> # 不是一个有效的图片，导致加载失败,进而触发事件 反射型 访问携带带有XSS脚本的链接，触发XSS 通过后端WEB应用程序将XSS脚本，将XSS脚本写入响应页面中，在浏览器在响应页面时触发XSS DOM型 访问携带带有XSS脚本的链接，触发XSS（不在URL参数中，在URL的哈希中）哈希的#分隔符 前端用JavaScript将XSS脚本写入DOM中，触发XSS CSRF 跨站请求伪造 利用用户已登录的身份，在用户不知道的情况下，以用户的名义完成非法操作。
点击挟持 通过覆盖不可见的框架诱导受害者点击而造成的攻击行为。
iframe
UI-覆盖
URL跳转 借助未未验证的URL跳转，将应用程序引导到不安全的第三方区域，从而引导的安全问题。
Header头跳转
Javascript跳转
META标签跳转
SQL注入 访问修改数据，或者利用潜在的数据库漏洞进行攻击
命令注入 CURL命令
D:\test>curl -I "http://www.163.com" HTTP/1.0 302 Moved Temporarily Allow: GET,POST,HEAD MIME-Version: 1.
文章目录 1. 下载 2. 解压 3. 配置环境变量一 4. 修改npm的默认配置 5. 配置环境变量二 6. 修改镜像源 7. 更新Node版本和npm版本 1. 下载 下载地址：https://nodejs.org/en/download/
2. 解压 下载的压缩包解压后如下所示：
新版的Node.js已自带npm，就在下图所示的node_modules包中。
npm的作用：是对Node.js依赖的包进行管理，类似maven
3. 配置环境变量一 此时可以在cmd中输入node -v,npm -v 获取到node.js , npm的版本信息
4. 修改npm的默认配置 因为npm的默认配置会将文件存到c盘，所以修改一下路径。
在解压之后的文件路径下新建两个文件夹：
node_cache：npm的缓存路径
node_global：npm的安装全局模块的路径
创建好之后，打开cmd执行下边两条命令，修改npm的默认配置：
npm config set prefix "D:\work\node-v10.15.1-win-x64\node_global" npm config set cache "D:\work\node-v10.15.1-win-x64\node_cache" 5. 配置环境变量二 在系统变量下新建”NODE_PATH”，由于改变了module的默认地址，所以用户变量要跟着改变一下PATH，要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。
node.js 的全局依赖模块的路径：
其路径中的node_modules 不用创建，在下载依赖模块时，会自动创建该文件夹，并将依赖模块存储在其中
同时还要设置用户变量
6. 修改镜像源 查看镜像源地址 npm config list # 结果 metrics-registry = "https://registry.npmjs.org/" 将镜像源设为淘宝的 npm set registry https://registry.
easyAR中webAR部分使用问题与解决方案汇总 Web AR使用方面 threejs使用方面 Web AR使用方面 1.开始识别后，程序每隔一段时间向服务器post一次数据请求，导致对识别图库的调用次数过多
解决方案：设置单次识别过程中post次数上限，达到上限时调用webar.js中stopRecognize()接口
2.手机运行WebAR程序，浏览器无法打开摄像头
解决方案：1）需要HTTPS协议支持。
2）安卓应用微信或者QQ浏览器过于低级，检查并升级浏览器的内核版本。
3）WebAR主要是基于WebRTC协议，目前市面上并不是所有的浏览器支持此协议。所以WebAR 主要支持Chrome、Safari、firefox浏览器。对于Android平台，支持在微信、QQ、Chrome、火狐浏览器打开使用；对于iOS平台，仅支持Safari浏览器使用（且必须iOS V11.0+）。
threejs使用方面 1.fbx模型显示不出来
解决方案：除却编码错误的可能，模型无法显示可能原因有：
1）路径错误
2）fbx模型不满足FBXLoader.js中的模型要求（ Loader loads FBX file and generates Group representing FBX scene.Requires FBX file to be >= 7.0 and in ASCII or >= 6400 in Binary format.Versions lower than this may load but will probably have errors）
3）摄像头安置位置不对，导致看不到模型实体
4）模型scale为0
2.threejs 提供了模型不同动画间crossFade方法，可以采用此方法实现不同动画片段间的淡入淡出切换
3.如遇到更多问题，可访问http://forum.easyar.cn/portal.php?mod=list&catid=3 （easyAR社区），https://answers.easyar.cn/ （easyAR问答中心），https://threejs.org/ （threejs官网）
密码朋克的社会实验（一）：开灯看暗网
本文作者：karmayu、murphyzhang @云鼎实验室
……
2018年3月8日，某视频网站800余万用户数据在暗网销售
2018年8月1日，某省1000万学籍数据出现在暗网
2018年8月28日，某酒店集团5亿数据疑似在暗网出售
……
本年度最严重的几次数据泄漏，都指向了同一个词——「暗网」。在中文的语境里，这是一个犹如「月黑风高夜」般的词汇，透着诡秘和犯罪的气息。而与「暗网」关系最密切的另一个词，则非「黑客」莫属。「黑」与「暗」的组合，意味着高超的匿名和隐身技巧，令人忍不住想揭开它精巧的面纱。
暗网是什么
要解释暗网，先给整个互联网做一个简单的分层定义，如图：
|图片来源网络
表网（Surface Web）
通常认为，普通用户或者搜索引擎能直接访问的内容属于表网。表现形式为网页或者 APP 提供的内容。
深网（Deep Web）
指不能被标准搜索引擎检索到的网络数据。通常是存储在各公司或组织的数据库中，需要用专有的接口查询或干脆不对外查询，例如 Google 的后端数据库。深网数据量远大于表层网络，犹如海面和大海的关系。
暗网（Dark Web）
需要通过特殊的加密通道访问的网页或数据。暗网通常具有匿名的特性，既保证访问者的匿名，同时也保证服务提供者的匿名。因此，其中充斥着各种犯罪信息和违法交易（枪支、毒品、色情、暴恐、黑客等）。
暗网有多个不同的实现版本，下文我们说暗网特指「Tor 网络」。
网络上有些说法说暗网远大于表层网络，其实很不严谨，是把深网和暗网混为一谈了，真实的暗网只有一小部分人使用，远小于大众使用的表层网络。
谁创造了暗网
➢ 密码朋克
故事要从90年代的一个极小众群体说起——「密码朋克」。这是一个由顶尖数学家、密码学家和程序员组成的群体，他们关注「匿名、自由、隐私」，其中许多人抱着自由主义和无政府主义的理念，并在美国掀起了「加密无政府主义运动」，他们以密码学和互联网为武器，与强权展开直接对抗。
正是这群人，创造了许多加密技术和协议，也奠定了互联网的许多底层技术和通信协议，从加密邮件到 HTTPS，从 RSA 到区块链，等等等等。
|图片来源网络
➢ 国外政府部门
花开两朵，密码朋克们希望保护自己的信息和隐私不被政府获取；而政府同样也有这个需求，甚至更强烈得多，因为他们要保证情报的传输安全，同时要保护情报人员传递信息时无法被网络追踪。因此，1995年，美国海军研究实验室也进行了匿名网络的相关项目研究，这也就是暗网的前身。
2004年，「Tor 洋葱网络」正式对外发布，意味着普通用户也可以使用匿名网络技术来保证自己的匿名性。也就代表着「暗网」这个概念正式走向公众。为什么叫洋葱网络，因为其中的通信内容被三重加密，像洋葱一样，剥开一层还有一层。
Tor 网络虽然理论上比较安全，但其中的中转节点是由志愿者部署，如果掌握了其中足够的节点，也是有概率进行完整通信追踪的。而且这毕竟是孵化自美国海军的一个项目，是否有一些精心构造的安全缺陷，难以确认。
暗网上的数据泄露
一个能保证访问者和服务提供者都匿名的网络，天生就是法外之地。
因此，各路违法信息交流充斥暗网，尤其是2011年后，由于比特币技术的兴起，暗网终于从「匿名的信息交流」进化到了「匿名的价值交换」阶段，这个颠覆性变革，随着「Silk Road」的建立（丝绸之路：可以理解为基于比特币的暗网淘宝），掀起了违法交易的高潮。当然，大概同时也掀起了 FBI 相关部门的加班高潮。
很巧的是，同样是2011年底，国内发生了一轮标志性的大规模的用户数据泄漏事件，之后各种数据泄漏就成为了每年的常态。早期此类数据交易往往是黑客私下交易，而近年来逐渐被搬到暗网进行交易。为此，腾讯安全云鼎实验室对暗网的主要交易平台进行了监测，并抽取了近几个月针对国内用户的数据泄漏的情况进行了统计。
可以看到，近期泄漏数据，主要以网购/物流/身份证/酒店/社交帐号数据为主。
暗网上的业务
暗网最大的几个市场均在近年被 FBI 捣毁，如 Silk Road、AlphaBay，因此，2017年来暗网黑市有所收敛，并不如前几年火爆。我们统计了目前存在的几大市场商品分类，可以看出，毒品/药物类还是占据了超过50%的份额，海外使用违禁药物的情形非常严峻，其次是数字商品类，并充斥着各种色情、黑客、枪支、护照、假钞等违法内容。
暗网匿名原理
暗网最重要的作用是保证匿名，其匿名性体现在两个方面：
访问普通网站时，网站无法得知访问者 IP 地址。 提供暗网服务时，用户无法得知服务器 IP 地址。 两个能力加起来则保障了暗网用户访问暗网网站时，双方都无法得知对方 IP 地址，且中间节点也无法同时得知双方 IP 地址。听起来挺科幻的，毕竟我们平时使用的 VPN 等科学上网技术只使用了一层跳板，而 Tor 技术使用了三层跳板。
广告ctr模型可用的深度模型其本质架构都一样（可见https://blog.csdn.net/dengxing1234/article/details/79916532），这也是限制了模型的发展路线。Deep cross network在广告ctr模型也是应用很常见，它聚焦于解决特征工程的问题，对比paper中提到：【DNN可以自动地学习特征地交互作用，然而，它们隐式地的生成所有的特征交互，这对于学习所有类型的交叉特征不一定有效。于是提出了一种能够保持深度神经网络良好收益的深度交叉网络（DCN），除此之外，它还引入了一个新的交叉网络，更有效地学习在一定限度下的特征相互作用，更有甚，DCN在每一层确切地应用交叉特征而不需要人工特征工程，这相比于DNN模型增加地额外地复杂度可以忽略不计】。自己按照paper和高级的tensorflow api，实现l一版dcn，源码文件3个都已共享。希望有问题各位同行人能指出交流。
原版paper：https://arxiv.org/abs/1708.05123
my_core.py from tensorflow.python.framework import tensor_shape from tensorflow.python.layers import base from tensorflow.python.ops import init_ops from tensorflow.python.ops import standard_ops from tensorflow.python.framework import ops class CrossLayer(base.Layer): def __init__(self, use_bias=True, kernel_initializer=None, bias_initializer=init_ops.zeros_initializer(), kernel_regularizer=None, bias_regularizer=None, activity_regularizer=None, kernel_constraint=None, bias_constraint=None, trainable=True, name=None, **kwargs): super(CrossLayer, self).__init__(trainable=trainable, name=name, activity_regularizer=activity_regularizer, **kwargs) self.use_bias = use_bias self.kernel_initializer = kernel_initializer self.bias_initializer = bias_initializer self.kernel_regularizer = kernel_regularizer self.bias_regularizer = bias_regularizer self.kernel_constraint = kernel_constraint self.bias_constraint = bias_constraint self.input_spec = base.
继：修复IOS上滑动HTML界面光标乱跳
声明：这里只是说明一种处理方法
继上一篇文章，处理IOS滑动时，光标不跟随页面滚动，处理方法是，监听touchmove事件，获取当focus的元素，使之失去光标；但是这种方法并不能真正的解决问题，比如，你进入页面，并不滑动页面，而是去点击屏幕可见区域最底下的输入框时，问题就出来了，如图：
这里说一下，网络上大多说是IOS上fixed定位，修改定位为absolute；或者是添加fastclick.js库，加速手机上tap事件的响应；
问题就出在这里，你确定你的页面是定位的因素？你确定添加了fastclick库就可以了？如果尝试了上面两种方法还不行，你可以接着往下看；
仔细观察页面，当你点击最后一行输入框时、滑动页面时，或者是弹框；你可以看到页面上的活动元素先聚焦再滚动；也就是说，activate元素的聚焦事件在页面滚动之前或者滚动完成之前就已经完成了，所以这时候页面滚动，而光标又不跟随滚动，就造成了光标跳行、错乱的问题。
解决方法：
一、输入框在聚焦的时候，会弹起软键盘；所以，我们监听软键盘弹起事件，在弹起事件后，进行dom重绘，但是这种必须要加延时，代码如下：
document.body.addEventListener('focusin', function () { //软键盘弹起事件 var node = document.activeElement; //当前focus的dom元素 setTimeout(function () { if (node) { if (node.nodeName == "TEXTAREA" || node.nodeName == 'INPUT') { //如果是input或textarea if (node.style.textShadow === '') { node.style.textShadow = 'rgba(0,0,0,0) 0 0 0'; //改变某个不可见样式，触发dom重绘 } else { node.style.textShadow = ''; } } } }, 1000); }); 二、监听屏幕滚动事件；是屏幕滚动，不是手指滑动的事件，因为我这里使用的是sencha Touch移动端框架，所以，可能会不适应，但是道理是一样的；代码如下：
initialize: function () { var me = this; me.callParent(); me.
阮一峰老师的webpack-demos原文链接：https://github.com/ruanyf/webpack-demos。
webpack官方文档：https://www.webpackjs.com/concepts/targets/。
最近在学习webpack，我师父给我发了一个阮一峰老师的教程链接，原文是英文的。最近还在学习，我把文章翻译成中文的，顺便自己的笔记和中间遇到的问题&解决方法都记录下来，希望能帮助到大家。
——————————————————–以下是正文——————————————————-
这个repo是Webpack一些简单演示程序的集合。
这些演示是有目的地以简单明了的方式编写的。你会发现跟随他们学习强大的工具没有困难。
如何使用 首先，全局安装 Webpack 和 webpack-dev-server 。
$ npm i -g webpack webpack-dev-server 然后，将这些 demos 克隆下来。
$ git clone https://github.com/ruanyf/webpack-demos.git 接着，安装依赖。
$ cd webpack-demos $ npm install 现在，就可以使用repo的demo**目录下的源文件（注：例如demo01)
$ cd demo01 $ npm run dev 如果上述命令没有自动打开浏览器，则必须自己访问 http://127.0.0.1:8080。
// 更详细的webpack安装流程可以参考：webpack安装详解 ；使用流程可以参考：webpack使用详解：浏览器显示Hello World!。
// 结合使用，效果更佳。
前言：什么是webpack Webpack是一个用来为浏览器构建JavaScript模块脚本的前端工具。
它可以像Browserify一样使用，而且做得更多。
$ browserify main.js > bundle.js # be equivalent to $ webpack main.js bundle.js Webpack需要一个CommonJS模块的配置文件，叫 webpack.config.js。
// webpack.config.js module.exports = { entry: '.
继续学习，这次尝试做了一下南邮ctf平台的逆向题来练习
目录
第一题 HELLO,RE！
第二题 ReadAsm2
第三题 Py交易
第四题 WxyVM
第五题 maze
第六题 WxyVM 2
第一题 HELLO,RE！ 打开ida，找到main函数按F5，hexray反编译
就在眼前 flag{Welcome_To_RE_World!}
第二题 ReadAsm2 来锻炼汇编的阅读能力吧
main函数定义了一串字符串，应该就是加密的密文
通过func解密后输出结果，题目提示调用约定为System V AMD64 ABI
百度调用约定后，分析结果如下
总的来说，意思就是函数对输入的字符串每一个字符都与其
所在缓冲区的索引做异或运算，最后输出结果。
用py来写解密脚本吧
flag = [0x0,0x67,0x6e,0x62,0x63,0x7e,0x74,0x62,0x69,0x6d, 0x55, 0x6a, 0x7f, 0x60, 0x51, 0x66,0x63, 0x4e, 0x66, 0x7b, 0x71, 0x4a, 0x74, 0x76, 0x6b, 0x70, 0x79, 0x66 , 0x1c] flagstr = [] index = 0 for ech in flag: flag[index] = ech^index flagstr.append(chr(flag[index])) index = index+1 print ''.
在新手初期，当你写一个简单的程序的时候可能会显示你的open browser的错误。如下：
错误信息：[ WARN ] Keyword ‘Capture Page Screenshot’ could not be run on failure: No browser is open
默认情况下，selenium的默认浏览器是firefox,所以当你使用chrome或者ie的时候可能显示这个错误，这时候按照以下操作就行处理
1.看一下当前浏览器版本（chrome为例子，chrome不要太新）
电击导航栏最右侧–〉自定义及控制–〉帮助–〉关于chrome就可以看出他的版本号
2.找出对应当前chrome版本的chromedriver的版本号
然后去这个链接上下载当前的chromedriver.exe
http://chromedriver.storage.googleapis.com/index.html
3.把下载下来的chromedriver放在python27/script这个文件夹下面
4.点击chrome属性，看一下他的起始位置然后复制粘贴后
5.点击计算机右击属性–〉高级属性–〉环境变量–〉在path里面添加chrome的路径
chromedriver版本 支持的Chrome版本 v2.43 v69-71 v2.42 v68-70 v2.41 v67-69 v2.40 v66-68 v2.39 v66-68 v2.38 v65-67 v2.37 v64-66 v2.36 v63-65 v2.35 v62-64 v2.34 v61-63 v2.33 v60-62 v2.32 v59-61 v2.31 v58-60 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v54-56 v2.26 v53-55 v2.25 v53-55 v2.24 v52-54 v2.