Code, experiments, and side projects.https://hackergavin.com/https://hackergavin.com/notes/legacy-two-github-ssh/https://hackergavin.com/notes/legacy-two-github-ssh/上次为了写 blog 新建了一个 GitHub 账号做演示，发现本地配置了 SSH 密钥并不生效，因此研究了下如何配置多个 SSH 密钥连接各自的 Github 账号 。首先打开 ssh 配置文件open ~/.ssh/config 直接修改配置，主要看第二个 ssh 配置，Host 字段需要修改个别名区分# 第一个 github 账号的 ssh 配置 Ho…Fri, 12 Jan 2024 00:00:00 GMThttps://hackergavin.com/notes/legacy-hexo-automate-deploy/https://hackergavin.com/notes/legacy-hexo-automate-deploy/距离上次写博客已经过去了 6 年， 最近计划重新开始写博客，所以把原来的 Hexo 项目老代码修整了下，搞了下部署。创建 Hexo 项目因为原来我的 Hexo 项目是大概 6 年前的版本了，在部署的时候遇到 Hexo 生成不了 html 的问题。所以选择重新安装最新版本的 Hexo，然后直接迁移 source 文件夹即可。创建 Github 仓库需要在 Gi…Thu, 11 Jan 2024 00:00:00 GMThttps://hackergavin.com/notes/legacy-wap-page-self-adaption/https://hackergavin.com/notes/legacy-wap-page-self-adaption/序言移动端屏幕尺寸千奇百怪，因此H5页面的适配对每一个前端工程师来说，都是比较头疼的问题。网上有很多关于移动端适配的解决方案，但都不是很全面。flexible是阿里手淘前端团队用于解决移动端页面适配的方案，经过时间和各种项目的检验，是我认为的一个比较成熟的解决方案。flexible是什么lib-flexible是一个js库，用于动态计算与设置页面的缩放比例和…Mon, 04 Dec 2017 00:00:00 GMThttps://hackergavin.com/notes/legacy-koa-webpack-react-hmr/https://hackergavin.com/notes/legacy-koa-webpack-react-hmr/前言最近在研究react同构，由于后端打算使用koa2.0，因此在开发环境想搭一套koa服务器代替webpack-dev-server，实现代码实时刷新。中间遇到过很多坑，好在最后还是跑通了这个流程，写下此文帮助后人爬坑- -。PS：对于koa和webpack还不是很了解的同学，可以点击koa官网 webpack官网大体流程此教程仅限适用于开发环境。先介绍三…Tue, 12 Sep 2017 00:00:00 GMThttps://hackergavin.com/notes/legacy-http-post-request-type/https://hackergavin.com/notes/legacy-http-post-request-type/在我们进行前端开发的时候，经常需要折腾form表单或ajax请求数据类型，以便让后端可以顺利解析我们的请求数据。 常见Content-Type的包括multipart/form-data、application/x-www-form-urlencoded、application/json3种类型。Content-typeHTTP协议把请求信息分为三个部分： …Sat, 11 Feb 2017 00:00:00 GMThttps://hackergavin.com/notes/legacy-hexodeploy/https://hackergavin.com/notes/legacy-hexodeploy/又懒了好久没写博客...最近忽然发现百度居然不会爬取部署在github上的博客文章，所以准备把原来的博客移到我自己的VPS上。服务器信息：国外的VPS - VultrLinux - CentOS 7关于国外VPS，推荐Vultr吧，我用的新加坡机房，速度还是挺快。还有原来用的搬瓦工也不错。这里不讲NodeJs环境的配置了，网上教程很多。本文主要内容：ssh免…Sun, 06 Nov 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-remainingnumber/https://hackergavin.com/notes/legacy-remainingnumber/今天，朋友负责运营的论坛需要制作一个报名剩余人数动态减少的效果，但是并没有服务器提供的当前真实剩余人数。身为程序员的我，只好帮忙实现这个功能了。需求： 假设当前1500人（不知道真实的剩余名额），此后每20分钟会少掉一个名额，到截止那天可能会有剩余名额。v0.1代码：<div id="banner"> <p>剩余名额:<span id='num'></spa…Fri, 09 Sep 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-a-star-path-finding/https://hackergavin.com/notes/legacy-a-star-path-finding/最近为了开发 王牌特工 这款小游戏，学习了A*寻路算法，来实现避开障碍物并抵达目标地点的功能。算法具体实现过程可以学习这篇文章,本篇主要记录我使用Js实现寻路算法的过程（算法学习真是头疼- -）。一、4个功能模块：二维方块地图A*寻路算法是基于点到点的关系，而在游戏开发场景中，我们常常把地图划分成一个个小方块，通过二维数组记录每个方块的坐标值，从而可以定位到…Sat, 25 Jun 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-ecmascript6-note2/https://hackergavin.com/notes/legacy-ecmascript6-note2/记录一下阅读阮老师的《ECMAScript 6入门》，本篇包含的内容：变量的解构赋值。数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。// 解构赋值不仅适用于var命令，也适用于let和const命令。 var [a, b, c] = [1, 2, 3]; 如果解构不成功（也就是…Wed, 18 May 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-ecmascript6-note1/https://hackergavin.com/notes/legacy-ecmascript6-note1/记录一下阅读阮老师的《ECMAScript 6入门》，本篇包含前二章的内容：简介、let和const命令。ECMAScript 6简介ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。 ECMAScript和JavaScript的关系是，前者是后者的…Mon, 16 May 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-gridlayouts/https://hackergavin.com/notes/legacy-gridlayouts/今天研究了如何实现网格布局，主要学习了这篇文章中的内容。特写此篇博客作为总结。一、网格布局的用途网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的好处是，…Thu, 07 Apr 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-semanteme/https://hackergavin.com/notes/legacy-semanteme/什么是HTML语义化？通俗讲，就是将内容放置在最合适的HTML标签中，使网页具有一定的层次结构，可以让人和机器读懂内容是什么。语义化的好处去掉样式或者样式丢失时页面结构依然清晰分明阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式利于搜索引擎建立索引，提高权值。便于开发和维护,可读性强 ...如何编写语义化的HTML代码？语义化的一个简单实例<h1>文…Sun, 20 Mar 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-knowledge-point-summary-6/https://hackergavin.com/notes/legacy-knowledge-point-summary-6/Js中的三个字符串方法Slice( ) ： 第一个参数指定子字符串的开始位置 第二个参数指定子字符串最后一个字符后面的位置 传入负值：会与字符串长度相加Substring( )： 第一个参数指定子字符串的开始位置 第二个参数指定子字符串最后一个字符后面的位置 所有负值参数转换为0substr( ) ： 第一个参数指定子字符串的开始位置 第二个参数指定返回的字…Fri, 11 Mar 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-knowledge-point-summary-5/https://hackergavin.com/notes/legacy-knowledge-point-summary-5/移动web开发-viewport对于移动端的网页，一般head标签里都需要添加一行：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no" /> viewport的宽…Fri, 04 Mar 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-knowledge-point-summary-4/https://hackergavin.com/notes/legacy-knowledge-point-summary-4/JS实现图片延迟加载需求： 根据读者阅读顺序逐步加载漫画分镜，达到节省用户流量，提升用户体验和减少服务器处理请求的目的。思路： 加载一组很小的icon去充当图片的占位符，监听窗口滚动，通过判断图片距离窗口顶部的距离，判断分镜是否将进入窗口可见区域，将icon地址替换为真正的图片地址。实现过程：给img标签增加一个自定义属性data-original用于存储分…Fri, 26 Feb 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-knowledge-point-summary-3/https://hackergavin.com/notes/legacy-knowledge-point-summary-3/Js实现鼠标拖动效果拖动的对象必须使用position:absolute;绝对定位，使其脱离文档流，对对象准确定位。一、实现思路：获取拖动对象的初始位置坐标（oX，oY），监听鼠标按下时记录鼠标初始位置坐标（sX,sY）和鼠标移动时的坐标（mX，mY），可得对象在移动中的横坐标（oX + mX -sX），纵坐标（oY + mY-sY）。然后只需在监听鼠标移动…Fri, 29 Jan 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-knowledge-point-summary-2/https://hackergavin.com/notes/legacy-knowledge-point-summary-2/Css中display:inline-block会将对象呈递为内联对象，但是对象的内容作为块对象呈递。也就是说，可以给该内联对象设置宽度和高度，和周围的元素保持在一行，允许空格。 兼容性： 主流浏览器均支持inline-block。 IE6、IE7不识别inline-block，可以使用zoom:1触发layout，实现inline-block。（“Layo…Fri, 22 Jan 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-knowledge-point-summary-1/https://hackergavin.com/notes/legacy-knowledge-point-summary-1/本文主要是对在公司实习第一周对需要完成项目所要的一些知识点进行收集与总结，主要内容包括一些canvas的基础知识和在做项目过程中遇见的相关javascript问题的解决方案。 主要目标是通过学习深入canvas和javascript，完成一个较复杂在线web图片编辑器。HTML5 canvas的一些基础知识一、关于canvas元素负责在页面中设定一个区域，通…Fri, 15 Jan 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-promise/https://hackergavin.com/notes/legacy-promise/本文主要是对在公司实习第一周对需要完成项目所要的一些知识点进行收集与总结，主要内容包括一些canvas的基础知识和在做项目过程中遇见的相关javascript问题的解决方案。 主要目标是通过学习深入canvas和javascript，完成一个较复杂在线web图片编辑器。Fri, 15 Jan 2016 00:00:00 GMThttps://hackergavin.com/notes/legacy-interview-12-29/https://hackergavin.com/notes/legacy-interview-12-29/来上海第一场面试，写写一些面试的问题及自己的解决方法。实现如下的布局布局示意图（原图地址已失效） 对三个div进行浮动，父元素可以添加.clearfix类清除浮动。就如下表单，说点东西表单示意图（原图地址已失效） 说是让我围绕表单方面去讲讲，好吧围绕表单。。 大概讲了如何完成这种布局，采用列表ul,li标签对这个表单布局，避免添加过多的div标签。文字可以用…Tue, 29 Dec 2015 00:00:00 GMThttps://hackergavin.com/notes/legacy-duoshuoset/https://hackergavin.com/notes/legacy-duoshuoset/由于hexo默认评论插件为Disqus，仅支持G+、twitter等登陆，不符合我国国情。因此为了方便国内使用，选择多说来代替Dispus。1.添加多说配置在_config.yml（注意在根目录，不是主题文件夹）中增加duoshuo_shortname: 你站点的short_name 看了网上很多同学都不明白此处的short_name是什么，其实你需要先在多…Fri, 11 Dec 2015 00:00:00 GMThttps://hackergavin.com/notes/legacy-js-closure/https://hackergavin.com/notes/legacy-js-closure/《JavaScript高级程序设计》第七章内容整理。匿名函数闭包匿名函数JavaScript定义函数的方式：1.函数声明（语法形式如下）function functionName(arg0,arg1,arg2){ //函数体 } 重要特征： 函数声明提升 ，即执行代码之前会先读取声明。2.函数表达式（常用语法形式如下）var functionName = f…Sat, 22 Aug 2015 00:00:00 GMThttps://hackergavin.com/notes/legacy-jquery-carousel/https://hackergavin.com/notes/legacy-jquery-carousel/好久没写博客，想写的东西还是很多，真是计划赶不上变化唉。为期一个月的实习结束了，完成了官方网站的建设，虽然不是很难，但是也学到了很多东西。接下来的计划就是继续啃《JavaScript高级程序设计》，然后用bootstrap完成一个网站。 好了，言归正传。。。主要完成后的效果 点击在线预览 。布局由简入难，首先完成轮播图片以及两个按钮的布局。 这里给出两个按钮…Fri, 21 Aug 2015 00:00:00 GMThttps://hackergavin.com/notes/legacy-iframe-ajax/https://hackergavin.com/notes/legacy-iframe-ajax/今天帮公司官网做提交商户资料的表单，由于涉及图片的提交，所以没有使用ajax来做。直接采用表单提交方式，由于需要对服务器返回的值进行处理，故而采用iframe来实现需求。当中遇到的问题： 1.使用iframe框架实现需求原理 2.如何获取iframe框架中的返回信息使用iframe框架实现模拟ajax提交效果关于iframeiframe 元素会创建包含另外一…Mon, 10 Aug 2015 00:00:00 GMThttps://hackergavin.com/notes/legacy-first/https://hackergavin.com/notes/legacy-first/花了一天时间终于完成了这个hexo博客的搭建，熟悉了github，mysysgit的使用以及hexo的一些常用配置等。这是博客第一篇文章，主要目的是： 1.熟悉一下通过Markdown语法来写博客。 2.总结自己当前所学的东西和将来的学习计划。所学语言自学html5css3JavaScriptPHPPython学校所学CC++Java所学框架JqueryTh…Sun, 09 Aug 2015 00:00:00 GMT