justforuse-CSDN博客

原创我的2018

还是那句老话，时间过的真快。年前就计划着换个工作，但只随便投了两家，准备不足也就没后文了，年后也是认真准备了一下，集中面试大概大半个月也是定了去处，新环境还是挺好的，优秀的人有很多，可以多学习一下，赶着周末还能出去聚个餐也是每周的保留节目了。可能跟公司性质有关，感觉能更轻松点，也跟着兴趣做了点东西。（打个广告，有兴趣加入我们的话可以找我内推

2018-12-31 21:28:23 223 2

原创在线生成supreme风格图片

原文链接： https://justforuse.github.io/blog/2018/12/supreme-image/最近被本山大叔鬼畜洗脑了

2018-12-08 16:18:04 6105

原创 ES提案可选链和管道语法

两种处于提案状态的新语法：可选链(?.)和管道(|>)语法1.可选链我们会遇到以下场景，要拿到一个层级比较深的对象的属性值，又要考虑到值的存在问题，所以我们的代码可能是这样：if(a && a.b && a.b.c){ // balabala}这样代码虽然严谨，但是看着不舒服。使用可选链后：if(a?.b?.c) { // balaba...

2018-11-26 23:35:59 3302

原创如何使用CSS绘制奥运五环标志

如何使用CSS绘制奥运五环？第一反应是使用border-radius: 50%再加上z-index设置层叠关系不久可以了吗？然而，怎么可能会说这么常见的问题呢？稍加思考，原来他的层级不是叠加，而是有重叠的部分：所以单纯使用z-index并不能达到效果。想到之前看到的一篇文章，如何实现元素穿插的效果：https://css-tricks.com/1-element-css-rainbo...

2018-11-01 23:18:49 2108 2

原创初始化React Native开发环境

安装流程按照https://facebook.github.io/react-native/docs/getting-started 来就可以，期间遇到了几个问题，并记下解决方法。1.安装时没有sdk和HAXM选项参考链接： https://www.cnblogs.com/xiadewang/p/7820377.html安装时关掉腾讯管家等安全软件，关了之后就安装正常了，不排除这个软件有...

2018-10-23 21:23:26 345

css提供了可以省略过长文字的样式：text-ellipsis: hidden，那么如何检测文本是否被省略呢？如果有一个伪类，类似:placeholder-shown，比如：:ellipsis-shown，但是很现实并没有这个伪类，所以要想检测就必须使用js了。所以只要比对文本实际长度和显示长度是否一致就可以知道是否被省略了，DOM提供了两个属性分别对应了两个长度：scrollWidth和o...

2018-10-23 21:21:27 1386

原创制作自己的字体图标库

你可能使用过或听说过各种字体图标库，比如fontawesome, glyphicon等，想过制作一个属于自己的字体图标库吗？今天就试着做一个。参考：https://justforuse.github.io/blog/2018/09/personal-font-icon-tutorial/...

2018-09-20 23:00:39 1405

原创 CSS Variable使用入门

CSS变得更像一个编程语言了，除了此次的css variables，还有很多提案，感兴趣可以去查一下。css variables让我们可以在CSS中使用变量了，使用和SCSS语法中的$my-color: red;类似使用方法：:root { --my-color: red;}.container { /* --my-color: blue; */ color:...

2018-08-05 00:31:15 1446 1

原创 @supports使用方法

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式. 基本使用方式：@supports (display: grid) { .container { color: red; }}类似@media媒体查询，当浏览器支持display:grid这个CSS属性时才应用其中的样式所以上述代码比如在...

2018-08-05 00:29:55 8843

原创 Hugo-编写自定义shortcode

用于快速建站的Hugo本身提供了很多丰富网站内容的shortcode，文档地址：https://gohugo.io/content-management/shortcodes/ 我们可以快速的插入想要的内容或媒体。Hugo也提供了自定义shortcode的功能，以stackblitz为例，如果我们想插入一个内嵌的stackblitz示例该怎么做？首先，在当前目录layouts/short...

2018-07-07 00:39:13 1725

原创使用Travis自动构建并发布Hugo

每次增加新文章时，还需手动更新到github上，重复劳动可以交由工具完成。Travis CI就是一个帮助我们完成自动构建的工具我想做的不仅是将编译后的public文件夹发布到Github Pages上，这样会覆盖掉很多其他文件，所以我只是想将它发布到blog文件夹下，所以我的.travis.yml长这样：# https://docs.travis-ci.com/user/dep...

2018-07-02 00:59:33 1651

原创 axios不支持finally的解决办法

最近项目框架换乘了vue，HTTP请求库使用axios，Promise对象有一个finally方法，但是在低版本浏览器不支持，所以需要引入对应的polyfill先安装promise.prototype.finally包npm i promise.prototype.finally再引入该依赖包：main.js...require('promise.prototype.fina...

2018-06-24 00:12:33 10607

原创 npm OR cnpm

npm是官方提供的包管理器；而cnpm是淘宝推出的npm资源镜像，用以方便中国用户下载。虽然大多数情况下可以完全使用cnpm代替npm，但是由于包结构的不同，会在某些时候造成错误比如这个：https://github.com/cnpm/cnpm/issues/192，而且也会发现有很多issue都是由于包结构不同引起的。所以还是npm是首选，如果下载速度实在拙计，可以使用npm i --r...

2018-05-08 21:58:29 568

原创 HTML中的details元素

HTML提供了一种手风琴式效果显示内容总结与内容的元素：details 如果内部没有summary则默认显示Details 可以为details添加open属性设置默认开关状态<body> <details> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga, sit...

2018-04-22 20:58:23 1206

原创近期面试记录

前端面试题记录总结了面试中问过的技术问题，没有写很详细，只是一些考察点。整体来说，移动端及nodejs开发经验已经变得重要；框架层面，React和Vue使用更广泛。原型链事件委托对象去重滑动效果 CSS三角对话框尖角（边框）数组展开判断是不是数组垂直居中 translate原点 Promise相关方法let const判断空对象...

2018-03-31 22:02:50 476

原创 HTML5新元素dialog

dialog是html5.2新增的元素，功能就是常见的对话框功能，基本情况下不需要额外编写对话框组件。基本使用：调用dialog元素的close()和open()方法实现对话框的打开和关闭，showModal可以打开模态框为dialog元素绑定close事件监听，当对话框关闭会触发此事件。<dialog id='myDialog'> <p> ...

2018-03-25 19:20:24 700

原创 JS获取最大公约数

关于最大公约数的解释：https://baike.baidu.com/item/%E6%9C%80%E5%A4%A7%E5%85%AC%E7%BA%A6%E6%95%B0/869308?fr=aladdin#1已经有几种常见方法，以辗转相除法为例：function gcd(a, b) { if (a % b === 0) { return b; } ...

2018-03-12 23:24:09 4948

原创 JS实现防抖(debounce)及节流(throttle)函数

这两种函数算是应用场景比较广泛的函数了，那么如何实现它呢？什么是防抖？什么是节流？举例来说，比如要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是...

2018-03-12 23:02:17 9602

原创 insertBefore方法，及如何实现insertAfter方法

js原生方法insertBefore用于在某个元素之前插入新元素定义： Node.insertBefore() 方法在参考节点之前插入一个节点作为一个指定父节点的子节点。语法： parentElement.insertBefore(newElement, referElement)值得注意的是 1. 如果要插入的newElement已经在DOM树中存在，那么执行此方法会将...

2018-03-08 22:49:50 11344 1

原创二叉树三种遍历方式，先序、中序、后序

二叉树遍历方式分为三种：先序，中序和后序。可以以根节点的位置为参考来记遍历方式，在第一个为先序，中间为中序，最后为后序；即：先序：根左右；中序：左根右；后序：左右根。借个图：之前看过一个视频，关于如何遍历二叉树，只需要围绕二叉树画个轮廓结果就出来了，效果跟此文章类似：https://www.cnblogs.com/shunyu/p/4986288.html每个节点左上角，...

2018-03-03 23:48:18 71321 4

原创千分位显示数值

有时为了阅读方便，需要将大数值展示为逗号表示法。当然将数值转为数组在插入逗号方式可行。介绍两种简便方法： 1. 如上篇文章所写，使用toLocaleString()方法。> 10154545450.42.toLocaleString('en-US')< "10,154,545,450.42"> (-1234567.8912).toLocaleString('...

2018-02-26 22:11:22 3155

原创 Number类型的toLocaleString()方法

https://twitter.com/wesbos/status/966697179904651264toLocaleString()方法我的理解是用于返回某语言系统下数字的表示字符串。如上推图片展示：第一个参数为语言标识。参数值参考：https://tools.ietf.org/html/rfc5646#appendix-A 第二个参数为一个参数对象，可以设置为货币显示，如推...

2018-02-26 22:00:39 4920

原创 Angular5 + Bootstrap4使用示例

前段时间Bootstrap发布4.0正式版。官网地址：https://getbootstrap.com/如何将Angular5与Bootstrap4结合使用呢？使用Angular-cli初始化项目。 ng new my-project --style=scss 安装Bootstrap及需要的依赖 npm i bootstrap jquery popper.js --save-dev;

2018-02-02 22:36:06 5662

原创 Idea（WebStorm）自定义文件代码模板

Idea支持新建文件时自定义文件内容模板。参考链接： https://www.jetbrains.com/help/idea/creating-and-editing-file-templates.html比如新建js文件自定义文件说明文档：模板可以插入很多变量，上述链接有提到。结果：

2018-01-28 14:46:36 2194

原创 Windows下VSCode运行Bash终端

可能Windows开发的一个缺点就是与shell结合的不好，Git Bash提供了一种方式可以在Windows下执行Linux命令，如何将其结合在VSCode中使用呢？参考回答：https://stackoverflow.com/questions/42606837/how-to-use-bash-on-windows-from-visual-studio-code-integrated-te

2018-01-23 23:51:35 35480 16

原创中文输入法下如何正确监听输入框input事件

最近Angular项目需要验证表单输入框的合法性，但是在中文输入法下监听input事件会不断的获得按下的字符，尽管它并没有实际添加到输入框中，那要如何正确监听中文输入法下输入框input事件？参考链接：https://segmentfault.com/a/1190000009126012#articleHeader18输入框还会监听如下事件：compositionstart, compos

2018-01-21 23:42:01 5179

原创我的2017

时光飞逝，2017已经过去半个多月。回首2017，有得有失。2017定的小目标基本实现，目前开始使用Angular2开发项目。自己也拓宽了知识获取渠道，收藏了几个不错的网站、在油管上订阅了几个不错的技术频道，平时多看看技术视频，学学外语，收获良多。年中走了2位合租室友，一位去杭州工作，一位回家考公务员，有点不舍但这就是生活吧；走了室友失去做菜的兴趣，基本在外面吃，厨艺没有什么长进。...

2018-01-20 20:58:20 457

原创 CSS属性overscroll-behavior控制容器滚动行为

Chrome63版本新特性中包含支持overscroll-behavior属性，此属性的功能是什么呢？我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。使用该属性可以禁掉此行为。在子元素上应用overscroll-behavior: contain即可。其他属性值还有none, 该功能除了contain的功能外还会阻止节点的默认滚动行为，主要是移动端

2017-12-28 23:09:12 4662

原创在Angular-cli中使用Pug(Jade)模板

之前介绍过如何在Angular项目中使用Pug模板，但是方法不是很“优雅”，暴露了不必要的loader模块，且Pug模板编写方法与HTML不尽相同，部分属性需要引号包起来。Angular实际是使用webpack进行打包的，那就可以直接修改webpack.config.js文件，添加pug文件的loader。直接写步骤吧。1 npm install pug-ng-html-loader --save-

2017-12-20 22:24:18 1585

原创 Chrome控制台提示“Slow network is detected. Fallback font will be used while loading”

新版本的Chrome在网络环境较差的时候会在控制台输出Slow network is detected. Fallback font will be used while loading，但有时会对调试造成不便，可以在chrome配置中禁用该项：方法：地址栏输入chrome://flags/#enable-webfonts-intervention-v2，并设置为Disabled；重启Chrom

2017-12-19 23:13:35 56415

原创不要（不建议）在Angular项目中使用hidden属性

如果想要隐藏某个DOM元素，在AngularJS中可以使用ng-show, ng-hide, 或者ng-if。Angular中其实使用了HTML原生的hidden属性进行元素显示隐藏，hidden属性其实是为元素添加了display: none样式。但问题在于如果这个元素被赋予了其他样式比如display: block之类的，那么他就会覆盖掉hidden样式，导致元素无法隐藏。AngularJ...

2017-12-03 22:01:32 9211

原创 lsb_release: command not found解决方法

执行如下命令yum install -y redhat-lsb如果报错且提示为//注：是某个名包含nvdia的包错误You could try using --skip-broken to work around the problemYou could try running: rpm -Va --nofiles --nodigest则执行yum install -y redhat-lsb -

2017-11-29 23:16:13 4723 2

原创代码高亮显示库-highlight.js

项目地址：https://github.com/isagalaev/highlight.js使用示例： 1. 引入js文件项目地址中的js文件不能直接使用，需要经过编译方可，或者直接引用CDN地址：https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js 2. 引入主题CSS文件，都在/src/st

2017-11-29 22:01:22 4464

原创 Chrome插件控制视频播放速度（爱奇艺、优酷）

试着写了一个控制视频播放速度的chrome插件，目前支持爱奇艺和优酷（感觉可以拓展为不限制网站）关键代码(manifest.json)："content_scripts": [ { "matches": [ "http://www.iqiyi.com/*", "https://www.iqiyi.com/*", "http://v.youku.com/

2017-11-26 16:18:09 6959

原创 Linux安装Java提示gzip: stdin: not in gzip format

在Centos下使用wget方式下载java8压缩包后解压时提示：gzip: stdin: not in gzip formattar: Child returned status 1tar: Error is not recoverable: exiting now因为这个压缩包并不是真正的tar.gz文件。这是一个下载链接，而压缩包真正的地址不是这个。解决方法：在wget和压缩包地址之间添加

2017-11-22 23:44:22 707

原创不定宽度父元素内部文本如何使用text-overflow属性

使用text-overflow的时候通常都会添加max-width属性，用来定义元素的最大宽度，但这个值通常为固定宽度、如果父元素宽度不定该如何设置样式？html: 为文本内容添加父元素p.p-wrapper<div class="row"> <div class="col-xs-5"> <div class="input-group"> <span

2017-11-19 12:59:12 2120

转载使用yum在CentOS下安装Nginx服务器

参考：https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-centos-6-with-yum

2017-11-13 20:43:09 262

原创 IE9下MP3音频倍速播放及调整音量存在延迟的可能原因

最近在做IE9下使用原生audio标签播放mp3格式文件。遇到一个很奇怪的问题：Chrome下音频倍速播放，改变音量正常；但是IE9下存在约5秒的延迟。但IE9直接播放本地mp3文件正常，参照之前音频无法快进的问题认为是服务端返回头部字段存在问题，所以查了一下相关的项目：https://github.com/rickitan/Streaming-Audio-Con-Node 播放正常，按照它的返回

2017-11-06 23:01:00 863

原创 CSS中的animation-fill-mode属性

很明显这个属性跟animation动画相关的一个属性，用来控制动画的起始和结束状态的属性。比如我们设置如下动画：div{ width: 100px; height: 100px; background-color: red; margin: 0 auto; animation: myBgColor 2.5s ease; animation-delay:

2017-11-05 21:46:43 1324

原创 ES5数组对象的forEach, map, filter方法

很早的事了。 ES5中数组新增了几种方法，参考：http://www.zhangxinxu.com/wordpress/2013/04/es5%E6%96%B0%E5%A2%9E%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95/#filter其中forEach, map, filter用法类似，总结下异同。forEach 用法：forEach() 方法对数组的每个元素执行

2017-11-02 22:35:42 961

《Qt5开发及实例》原书光盘内容

空空如也