网站前端

SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，Web 1.0时代，网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

各种各样的框架让人目不暇接，新技术层出不穷。让我们这些前端狗情何以堪。

目前web前端工程师的年薪待遇平均在10万以上，高级HTML前端工程师年薪达30—50万，很多企业对于与web前端相关的技术职位更是求贤若渴。

CSS Blockquote 样式

2021年07月30日

在使用Markdown的时候，有一些样式需要自己定义，Markdown Blockquote，下面是 Blockquote 自定义的样式：blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\2...

最近在使用D3.js v3的时候遇到一些问题，有些数据会缺失，导致显示有问题，数据示例如下：上面是随机选取的一个示例，这里存在一些null数据，需要处理。处理空数据，需要使用到D3里面的defined方法：该d3.line.defined()方法，您可以指定是否有一个给定的数据点或没有定义的数据。如果此方法返回 false，则表示数据点存在，否则为 true。下面是代码示例：_line = d3....

Google Map反向地理编码

2021年06月19日

最近需要实现通过经纬度查询地理位置，使用的是Google Map的反向地理编码。将地图上的位置转换为人类可读的地址，称为反向地理编码。具体官方文档可以查看这里：反向地理编码（地址查找）官方文档已经很详细了，首先是需要开通Geocoding API，之后需要API 的key，按照文档就可以操作了。

同一个页面多个Openlayers map对象

2021年06月08日

最近需要在一个页面上显示多个地图🗺对象，使用的是Openlayers。下面是代码：<script src="{{ url_for('static',filename='js/openlayers/v6.5.0/ol.js') }}"></script><script src="{{ url_for('static',filename='js/traceroute_location_map.js'...

css var()函数

2021年05月28日

最近在使用css的时候，遇到var()函数，经过查询，var()函数主要可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）具体语法可以参考这里：MDN Web Docs - var()下面是一些示例：:root { --mdc-typography-headline2-font-f...

css transition 旋转

2021年05月26日

下面实现了一个旋转的效果，具体css代码如下：.mat-expansion-indicator { transition: transform .2s ease-in-out;}.mat-expansion-panel-spacing .mat-expansion-indicator { transform: rotate(180deg);}transition展开属性如下：trans...

“this”, “$this” 和 “$(this)”有什么区别

2021年05月18日

this: 引用您当前使用的处理程序中的DOM元素，但这在其他情况下可能完全是另一个对象，但这始终是上下文。$this: 通常是由var $this = $(this)jQuery包装版本的缓存版本创建的，以提高效率（或者$(this)在许多情况下，也可以通过连锁来获得相同的效果）。$(this): 元素的jQuery包装版本，因此您可以访问其所有方法（特别是其中的$.fn方法）。参考资料：1、W...

CSS transform相关理解

2021年05月18日

最近在使用transform变换，使用的是旋转，具体css样式如下：panelHeader.children(".mat-expansion-indicator").css({ 'transform': 'rotate(180deg)', 'transformOrigin': 'center', 'transitionDuration': '100ms'});这里使用的是jque...