前端123学堂

前端123工程师开发学习路线,自学工作面试专家学堂!前端专家级工程师讲解基础入门到进阶知识点,更全面的微专业,结合工作经验总结笔记,快速学习成长为高级资深前端开发工程师专家。

前端123学堂

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

脚本语言|全栈

nginx强制使用https和开启gzip

1

chalecao 发布于 2018-11-13

nginx强制使用https访问(http跳转到https) nginx的rewrite方法 这应该是大家最容易想到的方法,将所有的http请求通过rewrite重写到https上即可 配置 server {     listen  192.168.1.111:80;     server_name test.com;     rewrite ^(.*)$  https://$host$1 permanent; } 搭建此虚拟主机完成后,就可以将//test.com的请求全部重写到https://test.com上了 nginx的497状态码 497 – normal request was sent to HTTPS 解释:当此虚拟站点只允许https访问时...

阅读(10)

Javascript|Nodejs

web components入门与实践

3

chalecao 发布于 2018-11-08

Web Components是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。 作为开发者,我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML(以及相关的样式和脚本),有时您不得不写代码来呈现自定义UI控件,并且如果您不小心的话,多次使用它们会使您的页面变得一团糟。 Web Components旨在解决这些问题 — 它由四项主要技术组成,它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。 Custom elements(自定义元素):一组JavaScript API,允许您定义custom elements及其行为,然后可...

阅读(32)

HTML5|CSS3

图片铺满展示不变形object-position/object-fit

chalecao 发布于 2018-10-29

如何让不同尺寸的图片内容铺满一个框框展示而且不变形呢? 方法1:背景图 是的,用背景图,只需要 bcakground-size: contain; 即可搞定。用起来很方便,除了不太符合语义化。   方法2:object-fit 类似于 这个是css3新增在img上的属性,效果类似于background-size; object-fit:contain    ===    background-size:contain 保持比例包含,相当于内切 object-fit:cover    ===    background-size:cover 保持比例铺满,相当于外切 object-fit:fill    ===    background-size:100% 拉伸...

阅读(47)

Javascript|Nodejs

移动端单页SPA开发几个要注意的问题

1

chalecao 发布于 2018-10-26

‘preact-router’ 的bug iframe中嵌套的spa页面,此时采用location.hash 跳转会有bug,ipad air ios11.4中测试发现路由不到对应页面。这个应该是preact-router 和 createHashHistory 的问题。 "history": "^4.7.2", "preact": "^8.2.9", "preact-compat": "^3.18.0", "preact-router": "^2.6.1", 最好还是不要用了。还有一个问题是更新问题,state数据变化了,组件没有更新,必须要forceUpdate。甚是蛋疼。 SPA页面图片做懒加载 SPA页面中的图片一定要做懒加载,否则你会发现...

阅读(49)

脚本语言|全栈

需要知道的前端安全问题

chalecao 发布于 2018-10-15

作为前端开发工程师,我们也需要了解一些常见的web安全漏洞,写代码的时候要谨慎,防止出现一些低级漏洞。特别是在开发公共模块组件的时候,比如网络请求模块,输入模块,富文本模块等等,都需要考虑安全性问题。 常见的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 JavaScri...

阅读(113)

Javascript|Nodejs

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

16

chalecao 发布于 2018-10-13

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

阅读(901)

HTML5|CSS3

JS和CSS使用的一些小技巧和问题

2

chalecao 发布于 2018-10-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页面时,偶尔还是会有报错,有些极个别...

阅读(622)

脚本语言|全栈

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...

阅读(105)

认真学习快乐工作

关于优秀的思考

chalecao 发布于 2018-09-22

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

阅读(155)

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...

阅读(195)

WebAR|深度学习

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

1

chalecao 发布于 2018-09-13

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

阅读(178)

Javascript|Nodejs

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

1

chalecao 发布于 2018-09-10

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

阅读(186)

HTML5|CSS3

HTML元素嵌套约束

3

chalecao 发布于 2018-09-08

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

阅读(187)

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} 看出猫腻了吗?标签模板会把字符模板拆分开,把数据和模板片段传到标签函数里。...

阅读(214)

认真学习快乐工作

前端面试STAR法则

1

chalecao 发布于 2018-09-05

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

阅读(217)

认真学习快乐工作

如何成为一个好的team leader

1

chalecao 发布于 2018-08-13

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

阅读(345)

认真学习快乐工作

工作,是一种艺术

chalecao 发布于 2018-07-16

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

阅读(197)

脚本语言|全栈

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。除了浏览...

阅读(836)

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 —...

阅读(259)

认真学习快乐工作

区块链算什么革命?

chalecao 发布于 2018-07-09

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

阅读(198)

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...

阅读(366)

认真学习快乐工作

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...

阅读(737)

认真学习快乐工作

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

2

chalecao 发布于 2018-04-28

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

阅读(425)

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、行内框 ...

阅读(493)

< Blog