❗️你有0条未读消息

背景

好记性不如烂笔头。

freecodecamp是一个开源社区项目,提供免费的在线编程学习训练,主要以前端为主。完成相应的内容还可以获得freecodecamp颁发的电子认证,该电子认证在领英上还可以像普通学历一样作为一项个人的教育经历。
不过,freecodecamp最近频繁的更新导致用户体验反而不如之前好了:现在所有你做过的题目都一股脑的放在了一起没有分类了。。以前会按照HTML、CSS、基础算法、中级算法、高级算法、后端等等分门别类一目了然。这些分类在未做题列表里还是这么分,做过的题也有标记,不过如果点进已经做过的题会发现之前的解决方案已经不再自动展现出来了。总之就是很麻烦,如果你想review的话。
如此这般就把做过的算法题作为博文梳理下吧,以便日后review巩固用法。

Basic Algorithm

本篇梳理基础算法,大多数都很简单,如果你有更好的方法欢迎分享,毕竟我的算法水平真的很烂。。梳理只是自己备忘,如果不幸有大神来看过,板砖轻拍。

1. Reverse a String

Reverse the provided string.
You may need to turn the string into an array before you can reverse it.
Your result must be a string.

将给定字符串逆序输出

1
2
3
4
5
function reverseString(str) {
return str.split("").reverse().join("");
}

reverseString("hello");

阅读全文 »

前端开发中,每当遇到要写文件上传的功能的时候,第一时间就是去百度搜搜看有没有什么好用的插件。通常要么是用iframe,要么是用一些基于jQuery的插件。(实际也是利用iframe
现在有了HTML5FormData技术,无需插件就可以实现文件上传功能了,方便多了。本篇博文记录一下我使用FormData上传图片的功能实现。

FormData简介

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequestsend()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. —- 来自mozilla MDN

XMLHttpRequest就是我们使用的ajax技术,简单来说FormData提供了一种直接异步上传文件的技术。
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”。

“Talk is Cheap”,让我们直接来看使用实例吧。

阅读全文 »

背景

Next主题在Hexo引擎解析md时生成的代码会包含大量的无用空白,见下图.

这对有完美主义倾向的我们来说是个很折磨的体验,并且多余的空白也会增加文档的大小,使得网站在响应上不够迅速,影响体验.
上一篇博文提到了使用gulp压缩前端代码,本篇博文趁热打铁,就gulp在Hexo博客优化上进行一番实践.

优化实践

1. 博客根目录下创建gulpfile.js文件
2. 安装gulp以及依赖插件并保存到项目依赖
1
npm install -d --save gulp gulp-clean gulp-load-plugins gulp-minify-css gulp-minify-html gulp-rename gulp-uglify gulp-shell
3. 编写gulp优化任务
阅读全文 »

gulp简介

gulp是一个前端项目构建工具,用自动化构建工具增强你的工作流程gulp中文官网语
gulp利用Node.js流的威力,减少了频繁的IO操作,让构建更快速,学习起来也是非常迅速.
本篇博客就将对使用gulp进行前端代码的压缩方面做一个入门级的介绍,也是我的gulp入门学习总结.

安装

  1. 首先假设已经安装了node环境,如果没有安装请出门左转node官网参考

  2. 全局安装gulp

    1
    npm install -g -d gulp
  3. 运行gulp -v,如果正常打印版本号则安装成功

阅读全文 »

懒加载

“懒加载”或谓”延迟加载”、”按需加载”是一种网页性能优化的技术。在很多场景下被使用,如微博的信息流,百度的图片搜索以及阿里巴巴的底部p4p,右侧p4p等,都是在用户访问到的时候才加载,这样可以避免在加载页面时加载过多资源造成页面渲染时间拉长,影响用户体验。
一直想了解下p4p异步加载的实现方式,没有前端的代码权限,因此只能自己琢磨,本文即是在内部光年平台的开发过程中,探索并应用的一种懒加载方法。总结记录如下。

屏幕高宽相关属性

正式开始前,首先总结一下,跟浏览器以及网页文档高宽相关的几个属性,这几个属性对于后文要说到的懒加载实现方法有重要意义。

  1. 网页可见区域宽
    document.body.clientWidth
  2. 网页可见区域高
    document.body.clientHeight
  3. 网页正文全文宽
    document.body.scrollWidth
  4. 网页正文全文高
    document.body.scrollHeight
  5. 网页被滚动的高
    document.body.scrollTop
  6. 网页被滚动的左
    document.body.scrollLeft
  7. 屏幕分辨率宽
    window.screen.height
  8. 屏幕分辨率高
    window.screen.width
  9. 网页元素绝对位置
    屏幕的坐标系原点位于屏幕左上角,所以一个元素的绝对位置指的是相对于屏幕左上角的坐标值。该值需要通过计算才能得到。
    每个元素都有offsetLeft和offsetTop属性,表示该元素的左上角相对父元素左上角的距离。因此只要将元素自身的offsetLeft,offsetTop和其父元素的值相加,即可得到该元素的绝对坐标。
    参见下图:

    有一些属性在懒加载实现方法中并未用到,考虑到比较常用,一并整理在此以作备忘。
阅读全文 »

时隔9天,小破站关站9天之后重开,官老爷的一条备案通过短信终于宣告我这小站终于迎来了合法身份,再也不是一个法外黑户。也宣告我那份小小的倔强与骄傲终究向现实妥协。

我本可以继续选择不备案,但是在现实情况下,不备案意味着很多不便:

  1. 免费的cdn加速基本都需要备案first
  2. 万网的域名解析显性URL或者隐型URL跳转需要备案first
  3. 加入国内的广告联盟需要备案first
  4. 甚至不备案cn域名都不能解析
  5. ……

为了能用上上述功能,最终还是决定备案。我曾YY过,备案过后,一旦我发表点什么发动言论,那把悬在头顶的”达摩克里斯之剑”就会掉下来,公安开始上门抓人。。。哈哈,备案在我看来更多的是”防君子不防小人”,阻拦的都是没什么做恶之心的人,真想做恶的人管你刀山火海上天入地。就像GFW,想翻墙的人想尽办法也会翻,不想翻的没有墙也不会去看。无非多了一个恶心人的东西。什么时候针对”麻烦事儿”不是一味去堵,而是去设法疏导就好了,我仅一介布衣,键盘侠一名,吐吐槽差不多是我能做的为数不多的事了。

阅读全文 »

在读

已读

古董局中局 4 : 大结局

这大结局看着还是挺失落的 果然是架构铺的太大bug就多了。掉了好些年的老朝奉胃口,铺垫了的好多伏笔,最后的解释没能生出“老朝奉原来是他”的感叹,而是一种不给力的感觉,仿佛这个老朝奉是被栽赃的一样。。anyway,除去结局释疑不够给力,亲王这书还是看的挺下饭的。

夭折

很可怕的一个故事,人的出生真的是带着宿命。。

忏悔录

这本书读完很压抑,读的时候即如是。我们每一个人都曾思考过人生的意义,然而多数情况下都是寻找不到答案。年长的人告诉我们,不要思考什么意义,那会走火入魔的。于是在渐渐成长的过程中,我们逐渐向这个人生终极的问题妥协,步入并适应了这个古往今来人类既定的模式中生活,只管生活不管意义。可是每当夜深人静,生活苦闷时,那股压抑在心底的欲望偶尔会升起:人生到底有什么意义?我活着就是要走一遍世上无数人已经都走过一遍的路吗?从呱呱坠地,到求学工作,娶妻生子再逐步步入死亡?找不到意义,这个问题就像幽灵一般萦绕在心底,时不时地如毒蛇般出来噬咬你一口。托翁在这本薄薄的小册子里最终以一个怀疑论者的态度“皈依”了宗教信仰,“只有信仰才可得活”,这个观点与我是万万不能接受的。但我也不能接受那种“生命的过程就是生命的意义”的观点,这种观点通俗地说就是,好好过天就是人生最大的意义,这其实也是一种妥协,没有任何实质的探究,毕竟是先有了生命才有生命的过程,于是为何会有生命?这种不知为何而活的浑浑噩噩状态让托翁萌生自杀的念头,我没那么极端,倒是有点悲观厌世。后来在阅读一些科幻小说的过程中得到点启示,个人的生命放之于人类基因永续传播的长河中来看,何其的卑微缥缈,而人类对抗时间的唯一武器就是不断的传递自己的基因,让基因与时间一起永恒。说白了,人只是基因的工具,人类认识自身发现未知才是人类存在的意义吧?而个体只有在作为一个整体时意义才“涌现”出来吧。

三国史话

三国史话,在吃饭睡前等零碎时间内看完,篇尾几则文言附录一则跟前白话正文多有重复,二则实在是看的犯困并未看完。三国史由于在演义的熏陶下,可以说是国人最为熟悉热衷的一段历史。作者在这篇史话里另辟蹊径,就演义、后汉书、三国志等的观点予以了一定反驳,剖析东汉乱源,给曹操、魏延翻案,给 刘备、周瑜、邓艾、钟会等提出了与通俗见解不一致的解读,倒是未提及赵云、黄忠半字。。
关于道教张天师与张角老子关系的分析也是相当有趣。
读史以明志,看完印象较深的属说刘备工于心计丢荆州失鼎立均势的评语:所以心计过工,有时也会成为失败的原因,真个阅历多的人,倒觉得凡事还是少用机谋,依着正义而行的好了。

阅读全文 »

近期在学习一些web全栈的东西,业余时间做了些小项目。这个天气预报的小项目属于其中之一。本身技术没有什么难的,主要是找免费可用的天气API比较费劲。最后还是使用了百度的开放API,中国天气的就不说了,打开个链接都费劲,好不容易进去了,注册的时候提示你”内部服务器错误”。。据说还不免费,纳税人交钱建立的组织,数据使用下还要交钱,哪说理去。百度的API还不错,只是没有雾霾指数。简单记录如下。

HTML容器

使用bootstrap布局,当天的预报信息显示一行,其余三天信息缩小放在下一行(百度API只提供四天的天气预测)。
每天的天气信息包括:一个天气图标(可随天气变化),一个温度显示。
再下一行显示本地城市信息、天气情况以及风力情况。
效果如下:

阅读全文 »

背景

我的mongodb数据库通过mongoose读写,自定义了mongoose的读写接口。之前的历史数据在写的时候由于一个小bug,导致插入的数据id字段都一样(本来是作为主键区分数据的)。
于是在修改数据的时候,使用id就不可用了,因此额外写了个脚本想批量将这些历史数据订正。
结果在实际运行的过程中发现,总是有数据不生效,反复调试了很长时间,最终怀疑是更新时只更新到了第一次匹配的数据,而后实践表明确实如此。
写完mongoose读写接口之后就再也没有研究mongoose了,对mongoose API不熟悉了。。这篇文档以为记。

解决方法

mongoose的API里写到mongoose的update方法使用方法如下:

1
Model.update(conditions, doc, [options], [callback])

阅读全文 »

背景

博客托管在github上,目前有很重要的两个问题:

  1. github拒绝百度收录
  2. 每次发文章都会有github page build warning告警邮件

上次写了一篇解决告警邮件的问题,但百度不能收录的问题貌似不能同时被解决。虽然改回去以后短暂的百度可以收录了,但今天看又不能收录了,真是。。。

于是今天又折腾了一把,把博客迁移到gitcafe上托管了,不纠缠了,顺带还能提升访问速度。

本篇不是探讨如何迁移,网上一搜已经一把了,主要想记录一下迁移到gitcafe后如何进行自定义域名的解析。
关于这个问题,网上一水的文章,就没看到一个解释清楚了的,都是直接就贴配置了,但那些ip都是怎么来的呢?没有任何的说明,难道我的配置也可以写你的ip?这个就连官方的help文档也是语焉不详。

以下是我自己折腾成功后的结果,记录下来供后来者借鉴。为此还付出了网站一段时间无法访问的代价。。

阅读全文 »