我来了……

FED123前端学堂

24小时更新:0篇     一周更新:0篇最新发布

脚本语言|必杀技

前端开发需要知道的安全问题

chalecao 发布于 2018-10-15

常见的web安全漏洞 反射xss 存储xss 水平越权 Java/PHP/Python/Node 反序列化命令执行 SpringEL/Struts/Fastjson/Webx 反序列化命令执行 Path Traversal OS Command Injection SQL Injection XML Enternal Entity Injection LDAP Injection HTTP PUT method is enabled Server-side JavaScript code injection XPath Injection Out-of-band resource load(HTTP) SSI injection External service inte...

阅读(38)

Javascript|Nodejs

程序语言进阶之DSL与AST实战解析

16

chalecao 发布于 2018-10-13

程序语言进阶之DSL与AST实战解析 在线视频课程地址: http://t.cn/R3XoQJA GIT代码: https://github.com/chalecao/parse_css_in_js   前端进阶系列课程 《用JavaScript自己写Virtual DOM》:http://t.cn/REeKJp0 《前端函数式编程FP易学易用》:http://t.cn/REeKVSk 《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v 《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA 适用人群 建议先学习《  用JavaScript自己写Virtual DOM  》,本节课讲解AST...

阅读(754)

脚本语言|必杀技

Docker基本概念

5

chalecao 发布于 2018-10-12

Docker基本概念 Docker Client: Docker提供给用户的客户端。Docker Client提供给用户一个终端,用户输入Docker提供的命令来管理本地或者远程的服务器。 Docker Daemon: Docker服务的守护进程。每台服务器(物理机或虚机)上只要安装了Docker的环境,基本上就跑了一个后台程序Docker Daemon,Docker Daemon会接收Docker Client发过来的指令,并对服务器的进行具体操作。 Docker Images: 俗称Docker的镜像,这个可难懂了。你暂时可以认为这个就像我们要给电脑装系统用的系统CD盘,里面有操作系统的程序,并且还有一些CD盘在系统的基础上安装了必要的软件,做成的一张 “只读” 的C...

阅读(40)

认真学习快乐工作

关于优秀的思考

chalecao 发布于 2018-09-22

我们可以要求自己优秀,并一直优秀,但是我们不能奢求他人和我们一样优秀。总结一句话,让自己更优秀,让别人更开心。 事实就是这样,我们要做有益于他人,有益于自己的人。从自己做起,我们可以对自己要求苛刻,可以要求明天的自己比今天更好,但是我们的目的是服务群众,服务他人,所以我们自然也不能要求别人和自己一样,用自己的标准要求或者规范别人,这是不合理的。也违反了哲学,具体问题具体分析,每个人都有自己的路要走,怎么走都是自己的选择,自己要承担后果。所以可以强求自己,何必强求别人呢? 最近听媳妇总是说自己公司不行了,想要换工作。于是呢我就让她好好准备简历,准备面试,给她提了很多要求,本想帮她上升一个新的高度,但是这也无形之中增加了她平时工作的压力,准备面试的压力。也导致了很多矛盾。回头...

阅读(102)

Javascript|Nodejs

支持任意端的基于Chrome devTools远程调试技术方案

3

chalecao 发布于 2018-09-22

移动端页面因为开发采用的方案不同,调试方法也有差别。H5页面调试方案分为两种:基于调试框架支持的调试方案 和 基于原生系统支持的调试方法。本篇文章基于在天猫超市目前做的远程调试研究,介绍anydebugger调试技术方案,理论上支持任意环境下的web页面调试。基础知识参考:chrome dev远程调试android 和ios 基于调试框架支持的调试方案 先比较一下现有的调试框架: 能力\框架 weinre anyproxy spy-debugger Vorlon vConsole jsConsole whistle ghostlab React Native (Hybrid) Weex (Hybrid) 介绍 老牌调试框架 阿里系请求代理工具 包装了weinre和anyp...

阅读(108)

WebAR|深度学习

人工智能帮你写代码的秘密与实践

1

chalecao 发布于 2018-09-13

其实,我很早就有这个想法了。大约是2011年,刚接触编程,经历过各种折磨之后,多么想编写个能自动为我编写程序的程序啊。可是我真不知道无从下手。 现在,人工智能,深度学习,神经网络。。。各种牛逼的技术频频出现。突然想起来,我的研究生方向就是模式识别与人工智能,虽然学了跟没学没啥两样,但是我记住了这个名字。模式识别与人工智能,那么首先第一步就是模式识别,然后才有人工智能。是啊,慨叹10年前的Watson,有慨叹1年前的alpha go的胜利。那么我想搞个智能写代码的程序就真的这么难么,真的需要电影🎬里面的n阶差分模型,量子编程么? 动态脚手架 事实上,我们正在一步一步靠近。比如我们用的脚手架工具,这不正是帮助我们完成部分代码吗?更高级一点现在玩的动态脚手架,动态定义模板,动态...

阅读(110)

Javascript|Nodejs

数据监听之VM原理分析与实现

1

chalecao 发布于 2018-09-10

数据监听之VM原理分析与实现 课程地址: Github代码: 前端进阶系列课程 《用JavaScript自己写MVVM前端框架》:http://t.cn/REeKJp0 《前端函数式编程FP易学易用》:http://t.cn/REeKVSk 《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v 《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA   课程内容 第一章: JSX回顾 JSX编译原理 第二章:实现数据监听的方法 Object.define方法 ES6之Proxy与Reflect 第三章:实现数据监听   第一章: JSX回顾  回顾一下之前我们学过的《 用JavaS...

阅读(113)

HTML5|CSS3

HTML元素嵌套约束

3

chalecao 发布于 2018-09-08

块级元素特点: ①总是在新行上开始,占据一整行(很霸道); ②高度,行高以及外边距和内边距都可控制; ③宽带始终是与浏览器宽度一样,与内容无关; ④它可以容纳内联元素和其他块元素。 行内元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距部分可改变; ③宽度只与内容有关; ④行内元素只能容纳文本或者其他行内元素。 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用, 只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用 内联元素(行内元素)内联元素(inline element) * a – 锚点 * abbr – 缩写 * acronym &...

阅读(124)

Javascript|Nodejs

基于ES6标签模板实现事件绑定与数据监听

1

chalecao 发布于 2018-09-05

 ES6 字符与标签模板 ES6 字符模板 `hello ${name}` 标签模板: function `hello ${name}` 字符模板是ES6模板功能的增强。字符模板前面的function类似标签声明。举个例子: function tpl(template){ console.log(template) console.log(arguments) } let content = tpl`Hello ${1} tpl ${2}`; 输出结果: >["Hello ", " tpl ", ""] >{0: ["Hello ", " tpl ", ""], 1: 1, 2: 2} 看出猫腻了吗?标签模板会把字符模板拆分开,把数据和模板片段传到标签函数里。...

阅读(153)

认真学习快乐工作

前端面试STAR法则

1

chalecao 发布于 2018-09-05

前端面试 说起面试,总会感觉心慌慌。可能是不自信,可能是感觉好多没准备好。没关系,既然投了简历,又通过了筛选,就不要胆怯。面试官也只是想聊聊你的具体情况。既然面试官愿意花时间和你聊,那么证明自己还是有实力的,有被看中的发光点,那么有什么好心虚的呢,勇敢自信的面对就好了。 说起我自己,我觉得自己有一点社会交际恐惧症。可能是之前工作太拼命了,觉得脑子瓦塔了。很多时候在和同事交流的时候,总感觉有些想法表达不出来,或者是说不清楚。内心了也担心自己说不清楚,于是越说越紧张,结果说的是一塌糊涂。本来很清晰明了的事情,由于内心的着急担心,或者说是一种不自信,更是雪上加霜的有一次伤害了自己。 大家都是做技术的,说傻也不傻,说笨也不笨,我们需要的,就是那么一丢丢的自信。 STAR法则 S ...

阅读(165)

认真学习快乐工作

如何成为一个好的team leader

1

chalecao 发布于 2018-08-13

我是一名普普通通的前端工程师,自学前端,之前在网易带过一年团队,后来转到阿里做技术开发。其实我来阿里一半是为了学习技术,一半是为了学习管理。 作为技术宅,我并不善于交流与表达,不善于打理人际关系。总觉得世事繁杂,不喜欢那种阿谀奉承、阴奉阳违的人;不喜欢那种只做表面功夫爱表现,实质上投机取巧偷、抄、拿的人。但是我也承认,工作上这类人却总是能先获得所谓的“成功”。本文并不是告诉你如何成为这类人,而是结合我自身的工作经验和所思所想和大家分享如何才能成为一名好的技术leader,同时也告诫自己如何做一名合格的技术开发,然后顺利的晋升为技术leader。 虽然路途遥远,但我也未曾放弃过。       -皓眸 今天看了一段美国12岁神童做的TED演讲,里面提到最多的词就是forget...

阅读(267)

认真学习快乐工作

工作,是一种艺术

chalecao 发布于 2018-07-16

smile lovely! 笑,具有感染力。它是通过声音,温暖你我他。这是一种自然的,潜在的,内心中最简单、最纯洁的交流方式。 如果你是发自内心的笑,表达那种欢乐愉快的心情,你会发现你旁边的人会跟着你笑。但如果你是假笑,敷衍奉承的笑,那么就没有一点味道,反而会透露出每个人的品性。 就汉语而言,笑有很多种,可以按层次来划分。 微微一笑,show time。   工作是一种情怀,关键是如何让别人开心,让自己开心,工作的内容只是一小部分。 未经允许不得转载:前端学堂fed123 » 工作,是一种艺术

阅读(158)

脚本语言|必杀技

chrome dev远程调试android 和ios

3

chalecao 发布于 2018-07-16

调试是开发过程很重要的过程,而随着移动端的普及,移动开发也越来越多,并且由于移动端的诸多限制,使得调试相对PC复杂很多。因此远程调试就显得非常重要了。 近几年,浏览器厂商也纷纷推出自己的远程调试工具,比如Opera Mobile 推出的Opera Dragonfly,iOS Safari 可以开启Web检查器在 Mac OS X系统中实现远程调试。Android 4.0+系统的 Chrome for Android可以配合 ADB(Android Debug Bridge)实现桌面远程调试,桌面版Chrome 32+已经支持免安装ADB即可实现远程调试移动设备页面/WebView 。国内的UC浏览器开发者版也推出了自己的远程调试工具RemoteInspector。除了浏览...

阅读(734)

Javascript|Nodejs

~(按位非), &(与), |(或)以及^(异或)的二进制使用

chalecao 发布于 2018-07-11

基础知识: &位与:与(x&y)两二进制上下比较只有位值都为1时才取1,否则取0 例如:14&15  (14  二进制  1110 15 二进制         1111 &与的结果          1110  —-》结果14) |位或:与(x|y)两二进制上下比较只有位值都为0时才取0,否则取1 14|15  (14  二进制  1110 15 二进制      1111 |与的结果       1111 —-》结果15) ^位异或:与(x^y)两二进制上下比较只有位不相等时才取1,否则取零 14^15  (14  二进制  1110 15    二进制   1111 ^与的结果      0001 —...

阅读(218)

认真学习快乐工作

区块链算什么革命?

chalecao 发布于 2018-07-09

现在很多言论都宣称加密货币和区块链技术能改变一切(至少能创造财富)。当然也有相当多的言论说这些都是骗局,无用、危险的技术。而作为大部分的吃瓜群众,我们仍然不知所措。主要的问题争执点在于这两种言论说的并不是同样的事情。 事实是并不只区块链这一种技术备受争议,而是三种。这三种技术应用有共同的设计准则和技术基础,但是人员、目标和前景却完全不相同。我们先把这些技术分类下: 加密货币,这种思想是互联网可以安全的去中心化的方式完成交易,价值转移。 区块链,这种思想是互联网可以越过信息的信任边界共同协作达成共识。 加密资产,这种思想是虚拟货币可以金融化成为可以交易的资产。 加密货币确实是全新的一种概念,但是最终的评判标准是这种新概念最后是否能够成功运用。区块链和加密资产是改变整个游戏规...

阅读(160)

Javascript|Nodejs

函数式编程处理IF块

chalecao 发布于 2018-06-25

曾几何时,经常有人问我,“如果让你用函数式编程来实现X,该怎么做?”我比较喜欢这类的问题。我尽最大能力思考这类有趣的问题。本篇文章,我用一种更加函数式的方式来实现优雅处理IF函数块的问题。下面的代码有一个if块,但是没有else。 // A basic redux-thunk action that only dispatches when value exists const someAction = value => dispatch => { const item = getItem(value) if (item != null) { dispatch({ type: 'ACTION', item }) } } 这里我们需要判断item有值的时候走di...

阅读(321)

认真学习快乐工作

ios低版本中JavaScript的兼容性问题

chalecao 发布于 2018-05-08

forEach遇到NodeList 注意在ios9中,如果使用document.querySelectorAll,那么返回的是一个NodeList,这个是不可以用foreach语句的,会报错,导致后面脚本阻断。ios10及其以上可以的 分析原因: 使用babel并不会对forEach进行转义,页面引入的babel-polyfill只是在Array的原型上补充了forEach方法,所以在用到像这种获取元素节点列表的时候存在兼容性问题。 position:sticky ios9系列版本下,查了caniuse.com 应该是支持-webkit-sticky的,但是显示有bug,位置错乱,特别是当你把position切换成fixed时候,会出现位置错乱。解决方法是默认用posit...

阅读(674)

认真学习快乐工作

如何降低前端开发的复杂度

2

chalecao 发布于 2018-04-28

优秀的程序员总是能优雅的组织自己的代码,清晰的编写思路,合理的组织结构划分,从小的功能组件,到大的模块结构,都能通过合理的巧妙的搭配,不仅能化复杂为简单,更能提升代码运行效率,提高代码的可维护性。我们作为前端开发,都应该具有这样的能力。 那么如何才能降低业务开发的复杂度呢? 细分组件 都说模块化开发,其实在AMD,CMD这些思想规范之前就已经有模块化开发的规范了,虽然JavaScript标准从es1-es4 然后隔了n年才有了es5,在那N年基本都是‘函数式开发’,一切皆函数。之前还没有模块化加载的思想,毕竟也不需要,富客户端还是flash的天下,基本都是简单的网页嵌套一些后端的代码逻辑,然后通过后端渲染引擎渲染或者解释器解释产出html页面,什么ASP,PHP,JSP等...

阅读(387)

HTML5|CSS3

JS和CSS使用的一些小技巧

2

chalecao 发布于 2018-04-12

定制间隔线 需要上面这样一条虚线,怎么搞? 方法一: border-top: 1px dashed #eee; 方法二: //基于渐变 .dash { height: 1px; background-image: linear-gradient(90deg, #eee 0%, #eee 50%, transparent 50%, transparent 100%); background-size: 15px 1px; margin: 9px 0; } PS: 看过一篇文章,一位大牛用css渐变写了超级玛丽:链接 append与appendChild 这里说的append是dom的方法,目前处于草案,虽然有很多浏览器支持,但是在开发h5页面时,偶尔还是会有报错,有些极个别...

阅读(553)

HTML5|CSS3

css基线与行高关系

18

chalecao 发布于 2018-04-09

一、基本概念 1、基线、底线、顶线、中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 2、内容区 内容区是指底线和顶线包裹的区域(行内元素display:inline;可以通过background-color属性显示出来),实际中不一定看得到,但确实存在。内容区的大小依据font-size的值和字数进行变化。 3、行距、行高 行高(line-height):包括内容区与以内容区为基础对称拓展的空白区域,我们称之为行高。一般情况下,也可以认为是相邻文本行基线间的距离。 行距:指相邻文本间上一个文本行基线和下一个文本行顶线之间的距离。当然,我更愿意认为是(上文本行行高-内容区高度)/2+(下文本行行高-内容区高度)/2。 4、行内框 ...

阅读(450)

认真学习快乐工作

曾经基于canvas实现的飞机大战

4

chalecao 发布于 2018-04-07

首先看几张效果图: 上面三张图分别对应游戏的三种状态 ready,play,pause。体验一下 先介绍一下canvas 画图的原理,在这个游戏中的背景,飞机,子弹以及飞机被击中爆炸的效果都是一张张的图片,通过canvas的 drawImage() 函数把这一帧需要的所有图片按其所在的位置(坐标)画到画布上,当然有时候也需要画些文本,比如左上角的得分;然后接着画下一帧,同时改变飞机和子弹的位置;画下一帧之前一定要清除画布(通过这个函数 clearRect(x,  y, width, height)),不然就是下图的效果啦: 辣眼睛!!! 不过在本例中因为每帧都要重新画上背景图,背景图又是填满整个画布的,所以画背景图时就等于把上一帧全部覆盖了,也就相当于清除画布了。 下面我...

阅读(434)

HTML5|CSS3

基于rem方案实现自适应布局

6

chalecao 发布于 2018-04-03

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素...

阅读(456)

认真学习快乐工作

前端工程师自学面试找工作必备知识

1

chalecao 发布于 2018-03-26

前端工程师自学面试找工作必备知识 视频课程链接地址:http://t.cn/RnWsTgB 限时优惠:免费课程 详细博客地址:http://www.fed123.com/2016_web_front/ 前端进阶系列课程 《用JavaScript自己写MVVM前端框架》:http://t.cn/REeKJp0 《前端函数式编程FP易学易用》:http://t.cn/REeKVSk 《前端自己用NodeJS编写区块链BlockChain》:http://t.cn/REeoF7v 《程序语言进阶之DSL与AST实战解析》:http://t.cn/R3XoQJA 适用人群 前端基础自学课程,前端小白,刚入门、毕业即将找前端工作的同学都可以更加系统的学习前端知识。 课程概述 本教程...

阅读(818)

脚本语言|必杀技

如何编写vscode extension插件

chalecao 发布于 2018-03-16

vscode extension vscode用了好久了,说真心话,真的好用。除了有几次更新,有许多bug,现在已经比较完善了。大家都注意到vscode 有个插件的功能,可以安装扩展。那么自己想写个vscode extension插件 怎么写呢? 官方教程:https://code.visualstudio.com/docs/extensions/overview 知识点 官方推荐的是使用vscode extension generator,执行下面的命令:(基于yoman) npm install -g yo generator-code yo code   推荐插件 import cost ,这个插件有个bug,就是引入大的类库的时候,计算量很大,导致计算机...

阅读(436)

< Blog