web前端
瑟荻
微信公众号 mad_coder
展开
-
GMail XSS 漏洞分析
原文:https://research.securitum.com/xss-in-amp4email-dom-clobbering/译者:https://github.com/neal1991这篇文章是我在2019年8月通过 Google 漏洞奖励计划报告的 AMP4Email 中已经修复的 XSS 的文章。该 XSS 是对著名浏览器问题 DOM Clobbering 的真实利用案例。...原创 2019-11-20 18:01:00 · 1265 阅读 · 0 评论 -
Pornhub Web 开发者访谈
原文:Interview with a Pornhub Web Developer译者:neal1991welcome to star my articles-translator, providing you advanced articles translation. Any suggestion, please issue or contact meLICENSE: MIT无论你...翻译 2019-10-15 13:37:39 · 27459 阅读 · 3 评论 -
javascript中的对象字面量为啥这么酷
原文链接 : Why object literals in JavaScript are cool 原文作者 : Dmitri Pavlutin 译者 : neal1991 在ECMAScript 2015之前,Javascript中的对象字面量(也称为对象初始化器)是非常基础的。能够定义两种类型的属性:成对出现的名称以及相应的值{ name1: value1 }Getters {翻译 2016-07-26 22:37:18 · 3626 阅读 · 0 评论 -
Ext.js性能优化漫谈
Ext.js是一个用于建立企业级应用的纯JS框架。毫无疑问,它为我们提供了大量的组件,比如container,panel,field,grid,这些组件使用起来很方便,不需要去写js和html,但是ext.js的性能却存在很大的问题。比如,我在公司负责的页面,在本地的加载时间居然需要十几秒,当然这可能和后台服务有关,但是前台的渲染和执行也耗费了大量的时间。下面就我个人感受和网上的一些信息对Ext.j原创 2017-02-22 21:40:16 · 1797 阅读 · 0 评论 -
javascript中无法将string转化为json对象
在一次项目之中,我要对请求的相应做一些处理,得到的响应差不多是这中格式‘total:1,result:[{“age”:1}]’.可以看到我拿到的这个相应和JSON的格式是非常相似的,一开始我认为只要用JSON.parse进行转化,但是这始终会报错,无法进行转化。后来我用了个本办法把前面的东西都去掉了拿到’[{“age”:1}]’进行转化。 后来我又找一找这个问题的原因,原来是我这个字符串中的key原创 2016-07-01 16:34:48 · 1410 阅读 · 1 评论 -
你可能不知道谷歌浏览器开发工具的其他用处
原文链接 原文链接似乎翻墙才可以访问译者:neal你可能不知道谷歌浏览器开发工具的其他用处Chrome内嵌开发者工具。它具有丰富的功能特色,比如元素,网络以及安全。今天,我们将完全关注javascript的console.当我才开始编程的时候,我只是将console用作纪录服务器的响应。但是后来经过一些教学的帮助,我开始发现console可以做的更多。在这我们讲一些你可以用console做更多有翻译 2016-10-03 08:03:50 · 658 阅读 · 0 评论 -
Bootstrap真的总是好的吗
原文地址:Bootstrap considered harmful原文作者:Hidde de Vries译文出自:neal译者: Neal个人主页:http://neal1991.pythonanywhere.com这些年Bootstrap已经在前端项目中流行起来,它能够带来很多好处。然而,但是如果以你们的团队已经有了在职的前端开发人员,我觉得最好还是不要用Bootstrap,在某些地方,弊大于利。翻译 2016-08-15 13:16:39 · 4248 阅读 · 0 评论 -
判断数组中元素多个属性是否重复
js中判断数组元素的重复的方法有很多,可以用hash的方法或者排序之后再进行比较,但是我们这里说的case是这样的。假设我有一个数组[{name:'neal',age:'18'},{name:'neal',age:'18'},{name:'jane',age:'20'}].假如数组中元素name和age这两个属性都相同我们则给这个元素加一个属性flag设置为true,否则设置为false.其实就是判原创 2016-07-01 13:42:49 · 3716 阅读 · 0 评论 -
moongoose对象无法新增删除属性
昨天用nodes中的moongoose去查询一个结果遇到一个大坑,这个坑貌似用moongoose可能会遇到。背景是这样的,我在nodejs中去查询document,得到的可以看作是一个对象list。在这个结果集中,我要去寻找这个结果中的某个属性是否和其他的结果重复,并给它添加一个属性作为标志。举例子,我们获得的结果就像是[{name:'neal',age:'18'},{name:'neal',age原创 2016-06-30 21:40:33 · 1327 阅读 · 0 评论 -
第一个chrome extension
如今,chrome浏览器的使用如越来越流行,chrome extension往往能提供更多很丰富的功能。以前一直想了解这方面的东西,可是又担心很复杂。前段时间,在斗鱼看一个直播,想刷弹幕,但是每次自己输入有很麻烦,所以写个小脚本就可以了,后来想以下也可以使用chrome extension来实现。关于chrome extension,google就给出了相关的文档,另外国内360也翻译了这篇文档。当原创 2017-03-04 13:47:34 · 1291 阅读 · 0 评论 -
第一个progressive web application,发车!
progressive web application是谷歌推出的一种渐进式web应用,通过利用service-worker等来达到类似于原生应用,而且在chrome浏览器还可以添加到主页,完全就和一个app无异。老实说我觉得pwa是一个很好的发展方向,虽然小程序搞了一段时间不温不火,但是pwa的限制更少,再说还有谷歌支持,只不过现在部分浏览器可能支持的不是很好。 国内饿了么前段时间做了一个pwa原创 2017-03-19 14:50:10 · 2747 阅读 · 0 评论 -
service worker介绍
原文:Service workers explained 译者:neal1991 welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me LICENSE: MIT那么它翻译 2017-05-02 12:21:13 · 1333 阅读 · 0 评论 -
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]原文:基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]译者:neal1991welcome to star my articles-translator , providing you advanced articles translat翻译 2017-05-11 09:28:40 · 2834 阅读 · 0 评论 -
Twitter Lite以及大规模的高性能React渐进式网络应用
Twitter Lite以及大规模的高性能React渐进式网络应用 原文:Twitter Lite and High Performance React Progressive Web Apps at Scale 译者:neal1991 welcome to star my articles-translator , providing you advanced articl翻译 2017-04-16 08:27:46 · 3846 阅读 · 3 评论 -
菜鸟程序员成长史 --记 Github 1000+ contributions
其实一直以来想写一篇文章总结这几年的技术学习,刚好趁着自己的第一次github contribution 达到1000+,写篇文章总结以下。本文篇幅较长,我会分为几个章节来分别阐述。博客篇为什么我要把博客放在第一位呢?因为我认为博客是developer学习技术的平台,也是developer分享知识的平台,博客差不多也就相当于是developer的名片。现如今,博客平台形形色色,有老牌的博客园,CSD原创 2017-05-19 08:53:06 · 1816 阅读 · 1 评论 -
通过利用immutability的能力编写更安全和更整洁的代码
通过利用immutability的能力编写更安全和更整洁的代码 原文:Write safer and cleaner code by leveraging the power of “Immutability” 译者:neal1991 welcome to star my articles-translator , providing you advanced article翻译 2017-05-21 11:41:05 · 399 阅读 · 0 评论 -
JavaScript是如何工作的:引擎,运行时间以及调用栈的概述
How JavaScript works: an overview of the engine, the runtime, and the call stackJavaScript是如何工作的:引擎,运行时间以及回调的概述 原文:How JavaScript works: an overview of the engine, the runtime, and the call stack翻译 2017-09-13 21:04:31 · 626 阅读 · 0 评论 -
出去就餐并且理解Express.js的基本知识
Going out to eat and understanding the basics of Express.js出去就餐并且理解Express.js的基本知识 原文:Going out to eat and understanding the basics of Express.js 译者:neal1991 welcome to star my articles-tra翻译 2017-11-12 17:12:53 · 577 阅读 · 0 评论 -
nodejs爬虫编码问题
最近再做一个nodejs网站爬虫的项目,但是爬一些网站的数据出现了中文字符乱码的问题。查了一下,主要是因为不是所有的网站的编码格式都是utf-8,还有一些网站用的是gb2312或者gbk的编码格式。所以需要做一个处理来进行编码的解码。至于网站的编码怎么看,可以通过去检查中的network去看。 根据相应的编码格式,进行相应的设置。utf-8就不要说了,下面就以gbk为例,说一下解码的方式。va原创 2016-04-16 18:03:14 · 4196 阅读 · 0 评论 -
nodejs回调大坑
最近看到nodejs,因为有一个处理里面有好几个异步操作,调入回调大坑,不禁觉得很恶心,真的很讨厌发明这种写法的人,简直反社会!!!遂转载一篇解坑的文章,原文地址:http://www.infoq.com/cn/articles/nodejs-callback-hell/。Node.js需要按顺序执行异步逻辑时一般采用后续传递风格,也就是将后续逻辑封装在回调函数中作为起始函数的参数,逐层嵌套。这种风转载 2016-04-27 08:57:52 · 10174 阅读 · 3 评论 -
模拟.net post请求属性
这两天在做一个nodejs的爬虫项目,需要模拟post请求获得网站数据。遇到2个asp.net的网站,掉到坑里面,调试了好几天。总结一下过程。 一般我们模拟post请求的时候最重要的就是post请求里面的formdata就可以了。怎么看formdata呢,以谷歌浏览器为例,打开开发者工具,到network中,点击查询,然后找到你所请求的网页,点击,就能看到请求的各种详细信息了。 我们可以原创 2016-04-25 17:02:51 · 1804 阅读 · 0 评论 -
在pythonanywhere部署你的第一个应用
pythonanywhere是一个免费的托管python的代码,可以测试你的web应用,用起来还是比较方便的,现在就来介绍如何在pythonanywhere部署你的应用。 下载你的代码 我的代码是托管在github,我们首先从github下代码:git clone https://github.com/<username>/my-first-blog.git产生一个virtualenvcd my原创 2015-10-21 21:03:10 · 5259 阅读 · 0 评论 -
使用js实现图片轮滑效果
经常在购物网站,看到那种图片轮滑的效果,所以看到有人实现了,所以我也就学习下了。 首先贴出html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title> <link rel="stylesheet" type="text/css" href="styl原创 2015-10-21 19:57:40 · 2790 阅读 · 4 评论 -
css样式表的引入方式
一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别:<link rel="stylesheet" type="text/css" href="css文件">@import "css文件"显然第一种方式似乎是更常见的。事实上,使用这两种方式引入css文件的效果都是一致的,区别在于是html标记,而@import是css语法。标记有rel,type和href属性,可以原创 2015-10-06 16:11:46 · 847 阅读 · 0 评论 -
全栈开发教学学习系列1——前言
在网上看到一个全栈开发教学的例子,他是一个使用Django来作为服务器后端结合前端来做的东西,是一个全栈教学的案例。虽然作者是中国人,但是他做的东西都是用英文做出来的,http://webcoursify.github.io。在这里,我们就把他的学习教程一步步翻译出来,也当是自己学习。 开篇部分zhuyao1讲一下Django的基本概念,这个部分主要分为三个小结:一. 客户端服务器模型和MVC设计翻译 2015-10-07 14:47:02 · 747 阅读 · 0 评论 -
一个神奇却很简单的css特效
在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的。 他这个效果就是鼠标放在左半部分和右半部分,整个网页的布局颜色会相互变化,我贴上前后两张图来比较一下,你们就明白了。 当鼠标放在左半部分: 当鼠标放在右半部分: 可能静态的图片看不太出效果,但是动态看起来还是比较酷的原创 2015-10-07 16:49:41 · 4458 阅读 · 0 评论 -
http响应代码解释
200:成功响应 302:找到,但是请求的资源在另外一个不同的url中。 400:错误请求。这个请求不能被服务器所理解,客户端必须修改请求。 401:未认证,这个请求需要用户认证。 404:未找到。服务器没有找到任何和这个请求符合的资源。转载 2015-10-10 11:19:41 · 438 阅读 · 0 评论 -
css盒子模型设置的缩略形式
css里面的盒子模型里面设置padding,margin的上下或者左右的大小有很多方式,下面说说两种不同的方式: original method:padding-top:0pxpadding-right:20pxpadding-bottom:30pxpadding-left:10pxnew method:padding:0px 20px 30px 10px// top right bott原创 2015-10-24 10:48:23 · 492 阅读 · 0 评论 -
全栈开发系列学习2——django项目搭建
项目代码:http://yunpan.cn/cHajgT4HvgHqx (提取码:8350) 配置项目: 1. 首先确保你的机器安装了python和pip,这两种安装比较简单,这里就不说了。 2. 在你的机器上安装mysql服务,这个也不细说了。然后安装Mysql-python,只要输入命令”pip install MySQL-python”就可以了。 3. 解压项目文件代码。 4. 进入翻译 2015-10-10 11:16:11 · 630 阅读 · 0 评论 -
javascript的继承模式
在javascript里面看到javascript的继承模式和传统的继承模式是有区别的,就想查资料看一下到底有区别,就看到了这篇文章,觉得讲得还可以,暂时先放上来,以后有别的东西再补充: http://segmentfault.com/a/1190000000766541基本模式var Parent = function(){ this.name = 'parent';};Parent原创 2015-10-24 14:03:33 · 459 阅读 · 0 评论 -
如何查找django安装路径
需要找到django的安装路径,官方说的那个方法不好用,国内搜索都是都不到的,后来谷歌搜到了很简单 import django django 这样就可以找django的安装路径了,真心不懂为什么国内都看不到原创 2015-10-10 18:35:51 · 8733 阅读 · 2 评论 -
github命令大全
github是一种开源的版本控制工具,现在已经得到很多人的应用。所以想介绍一下github的一些使用。github安装github提供了桌面客户端,我们也可以通过命令行的方式来进行控制。 windows https://windows.github.com mac https://mac.github.com配置工具对于本地版本配置用户信息git config --global user.n原创 2015-10-25 22:30:00 · 969 阅读 · 0 评论 -
Django学习——开发你的第一个Django应用1
突然对Django热情似火,所以就开学习了,我是根据官方文档学习的,所以我打算把官方文档翻译一遍,全当学习,首先贴官方文档的地址:https://docs.djangoproject.com/en/1.8/intro/tutorial01/。我是根据我自己的理解翻译,可能和官方有一些差入,如有不当之处,还望指正。 首先请确保你已经安装了python,Django是建立在python的基础之上,所以翻译 2015-10-10 16:39:31 · 991 阅读 · 1 评论 -
Django学习——开发你的第一个Django应用2
接着上一节的内容来说。我们将继续关注与上一节制作的polls应用以及Django自动产生额度管理网站。产生一个管理员用户首先我们需要产生一个管理员用户,运行如下命令; python manage.py createsuperuser 下面会让你输入用户名,邮箱以及用户密码,按照要求填写就可以了,这样我们就产生了一个管理员账户了。开发服务器Django的管理员网站是默认激活的,我们可以通过上节讲到翻译 2015-10-11 13:02:59 · 643 阅读 · 0 评论 -
前端面试基础题目
行内元素有哪些?块级元素有哪些?CSS的盒模型? 行内元素:a b br i span input select 块级元素:div p h1 h2 h3 h4 form ul css盒模型:content border margin padding前端页面由哪三层构成,分别是什么,作用是什么? 结构层:主要指DOM节点:HTML/XHTML 样式层:主要指页面渲染:CSS 脚本层:主要指原创 2015-10-30 14:38:23 · 660 阅读 · 0 评论 -
前端面试题——系列一
- html语义话定义文章定义页面内容之外的内容定义声音内容定义图形定义命令按钮定义下拉列表定义元素的细节定义对话框或者窗口定义figure元素标题定义媒介内容的分组以及它们的标题定义section或page的页脚定义section或page的页眉定义有记号的文本定义预定义范围内的度量定义导航链接定义任何类型的进度条为元素定义可见的标题定义日期/时间定义视频img原创 2016-03-01 19:08:46 · 447 阅读 · 0 评论 -
百度前端实习生面试(连跪之旅)
去百度面试基础架构部的前端开发实习生,感觉应该跪得很惨。百度上海研发中心挺偏的,离张江还挺远的,还要打车过去。到了百度那边门卫管的挺严的,还要面试官来接。后来,就一个程序员来接我,也就是我的面试官。后来就在他们三楼一个休息的地方开始面试。首先就是自我介绍了,然后就是blabla我一些经历项目而已了。他强调了了一下前端相关的项目经历,但是讲道理我是真心没有前端的项目经历,所以也说不上什么。唯一做的也就原创 2016-03-04 16:56:41 · 2487 阅读 · 0 评论 -
js的事件流理解
面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚。事件捕获和事件冒泡事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。 事件流主要分为两种,即事件捕获和事件冒泡,这二者接受事件处理的顺序不同。假设下面的代码:<body> <div id="outer"> <div id="inner"></div> </div></bod原创 2016-03-05 17:19:32 · 5210 阅读 · 0 评论 -
indexDB的概念
IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本。 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据键值的方式来保存数据,只要创建索引,就可以进行数据搜索和排序。 2. 交易数据库模型 IndexDB进行数据库操作之前要先进行交易。所谓交易,就是将数据库所做的访问操作(比如增删改查)包装成一个转载 2015-10-07 09:49:59 · 3148 阅读 · 0 评论