网站前端
SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。
目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。
position sticky理解
2021年01月10日
最近在使用页面左边菜单滚动效果，使用的是浮动布局，也就是：display: flex;但是在滚动的时候，左边菜单还是有一部分被遮住了，截图如下：产生这样的原因是：顶部也有一个浮动菜单，导致左边菜单被遮挡。解决方法：position: sticky;top: 90px;这里使用的是sticky的定位方式，关于sticky的定位MDN解释如下：解释：元素根据正常文档流进行定位，然后相对它的最近滚动祖先...
d3.js世界地图
2020年12月31日
最近需要在网页上面显示世界地图，地图相关区域，显示相关信息，这里有一个很好的示例：world map 02 update to d3 v4好是好，但是你不能用，这里主要原因是中国地图有些问题，具体可以参考这篇文章：权威来啦！如何识别“问题地图”？中国地图正确打开方式为您呈现！ 有些地区与中国官方的地图有冲突，请大家注意。具体官方标准地图可以这里查看：http://bzdt.ch.mnr.gov.c...
textarea 标签的默认值
2020年12月21日
发现textarea标签与input标签设置默认值不同，input有value属性，但是textarea没有，所以需要在textarea设置默认值，则可通过以下方法：直接操作：<textarea>hello!</textarea>根据id获取元素，并设置默认值：<textarea id="t1"></textarea><script>document.getElementById("t1").va...
Gulp用法
2020年10月13日
gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。具体安装步骤可以参考下面链接。下面是一个Gulp配置文件：// instanciando módulos var gulp = require('gulp'); var uglify = require('gulp-uglify'); var sourcemaps = require('gulp-sour...
ERROR TypeError: t is not iterable
2020年09月14日
最近在迭代一个错误消息的时候出现如下错误：ERROR TypeError: t is not iterable具体迭代内容如下：error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "<!doctype html> ↵<h...
CLS 问题：超过 0.25（桌面设备）
2020年09月07日
最近在发布Angular程序之后，运行一段时间，google search console提示：CLS 问题：超过 0.25（桌面设备）具体截图如下所示：出现这个问题的原因：您是否曾经在页面上突然发生变化时在线阅读文章？在没有警告的情况下，文字移动了，并且您失去了位置。甚至更糟：您将要点击一个链接或一个按钮，但是在手指落下的瞬间（BOOM），链接移动了，您最终单击了其他东西！也就是说，在页面加载的...
scss用法总结
2020年07月20日
最近在Angular中使用到了scss，总体看起来scss比较简单，但是有可能长时间不使用，有一些用法可能忘记，所以在此做个标记：首先是两篇参考文章：1、SCSS 教程2、Scss (Sass) 语法简介这里主要用到了三个语法：1、混合：@mixin flex-direction($column) { -webkit-flex-direction: $column; -moz-flex-dir...
javascript && and || 运算
2020年06月13日
JavaScript定义了这两个运算符&&，||分别表示逻辑AND和OR运算符。仅使用两个布尔值true和false，我们可以生成以下真值表：// Logical AND operation true && true; // true true && false; // false false && true; // false false && false; // false ...