在上家公司入职的时候参考的这份配置文档,这次在百度入职也是参考的这份文档,在本次配置过程中有些地方需要修改,这次再次进行了更新。

新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的)。macbook air,身上已无分文。。。接下来半年的房租都不知道该怎么半了,都怪消费太冲动。

不过,眼下需要解决的不是房租问题,而是在新电脑上搭建开发环境,正好在搭建的时候总结一下:

继续阅读

这是在微信公众号公众号“前端早读课”里看到的,感觉分析的很详细,把优化详细分解到用户访问网页的每一毫秒,数据传输的每一字节,特收藏过来,方便日后复习学习之用。

什么是性能

有人说性能就是访问速度快慢,这是最直观的说法,也是用户的真实体验。一个用户从输入网址到按下回车键,看到网页的快慢,这就是性能。对于我们来说,需要去挖掘这个过程,因为这决定我们怎么去做性能优化。

这中间发生了什么?

继续阅读

其实现在想想两年是在是太快了,我至今还清楚的记得我当初来网站面试的场景,那是三楼走廊里排了几个人,他们有结队来的,在那愉悦的谈论着某些高中轶事,每从会议室走出来一个人,后面的同学都会关心的问有没有问到成绩,当时我还很纳闷,难道这也看成绩?进来这个学校的成绩能相差多少?

后来进网站,做着该做的专题,写着该写的代码,生活好像步入了云端,在别人眼里你开始变得高大上起来,然而,在网站做了些什么也只有自己知道。曾经很遗憾的想着自己是不是要提早的离开,因为这么长时间我从没做出一点什么成绩,当好长时间没有专题要做的时候才发现其实自己在这里很孤单,想离开的愿望愈演愈烈,也是在那个时候祥哥离站了。

当时我也叫嚷着离开,但最终没有。因为我的直觉告诉我,我在这时候的离开无疑等于逃避。

于是,开始自己安慰自己我还能做点东西,仿佛一位佝偻的老人临死前的挣扎般,内心的纠结有时会让自己感觉到力不从心。我开始尝试用代码来实现我曾经的想法,用一个一个的小项目来组合成我们的青春实验室。在我的脑海里,这种小项目有很多。曾经我对他们大一的分组任务时说过,我说要把实验室当做你们创业的平台,咱们就是一个小组,有什么想法大家一起完成。而今,不知道谁还能把建立青春实验室当做墓志铭来追求树立起一块碑。

青春实验室不是碑,而是牌。

我的第一个小项目从我去年发表的一篇日志开始,校园大数据。朝着让学生更方便的方向做山里啪啪。我想做成涵盖课表、成绩、校园卡余额、电量、作业以及交友的整合平台,可以分享与评论,以工具+社交的理念来做这样一款App,项目已经开始,而结果遥遥无期。地址:http://wx.youthol.cn

第二个小项目是完成的比较好的,一站式纳新系统。提供网上纳新平台,方便社团负责人以及新生了解纳新信息,网上提交表单,导出表格。目前,系统已经初步完善,当时需要做的工作还有很多,希望网站能够将这个平台利用起来,在理工大金星试点网上纳新。地址:http://123.youthol.cn

第三个小项目是自己一直想做的但一直没有实施的:校园众筹。尽管众筹这个概念离普通学生有点远,但这已经成为了解决一件事情最快捷方便的方法。举个例子,我想去揍一个人,于是我在网上发布:我要去揍谁啦,有人要一起去么,然后有人回应说我去,其他人回应我给你钱,然后,众筹完成后,我就用我筹到的钱匕首,带上要去的人,去揍人。结果,胜利完成任务。这只是一个不太好的比喻,但现实中,很多学生都有想法,只是找不到志同道合的人。

众筹可以分为两种,一种是筹人,一种是筹钱。筹人也就是拉人,比如某个社团要办活动会打条幅印单页,宣传这个活动,而这里就不一样了,你只要在这里发布,学生进来就会看到。或者是想做一个项目,找相关专业的人等等,可以实现的情形有很多。筹钱很简单,就是希望得到资金支持,不过学生又不是天使投资人,这方面会受限很多。

希望有人能继续下去这些小项目,填充上自己的想法,让青春实验室真正成为一个丰富的实验室。

最后,整合一下曾经做过的小东西。

传送门:http://123.youthol.cn/zt/old/

2014一起前进吧:http://youthol.cn/topic/2013/2013end/

因为我们网站的问题,在网上找到一些资料,然后自己整理了一下,主要就是查看时什么占用了我们的端口。

下面的例子是我在我的机子上查看80端口被谁占用了。

所用到的工具:cmd命令台、netstat命令、任务管理器

运行:cmd(快捷键:win+R)

netstat命令详解在此:

在cmd中输入netstat -ano,即显示所有有效的进程,同时显示该进程的PID

可以看到,80端口所对应的PID为:1796.

打开任务管理器(可以使用快捷键:shift+ctrl+esc)

默认任务管理器的进行时不显示PID选项的,此时点击“查看”--“选择列”--“勾选PID”,就可以了

此时,就显示出PID属性

找到PID位1796,对应的描述:

这样就确定了,我们的80端口被apache服务器给占用了,如果释放出80端口,只需结束该进程就可以了。

上面是通过任务管理器来查找,还有一种方法直接通过cmd命令来找。

netstat -ano|finstr "80"

此时,只显示出关于80端口的情况,显示PID号为1796

tasklist|findstr "1796"

此时,就会显示占用1796的进程,为httpd.exe,即被apache服务器占用

上述两种方法都是通用的查找端口被占用的方法,用任务管理器更直观的显示进程描述,而用cmd命令更简单。

我最近订购了一年的《程序员》杂志,想看的同学可以到网站里屋的书架上去找,找2014年的。

下面是里面的一篇总结文章,写的是最近比较火的开发工具,在这罗列一下:

首先是C#跨平台的Xamarin,它可以用C#开发出IOS、Android与Windows等平台的原生应用程序。微软、GitHub、惠普等知名企业都已经导入Xamarin的解决方案。现在Xamarin已经正式进入国内市场,提供国内购买渠道。

来自英格兰的LiveCode是一款强大但易用的开发环境,可以通过拖拽来实现界面的设计和布局,病使用一种类似于英语的自然语言来编写应用程序的功能,最后由LiveCode的部署系统来生成可运行于各种平台的应用程序。今年LiveCode在中国将全面实现汉化,并且推出免费烦人移动应用例如“快速编程”给开发者或学校。

另外一个新的移动Web跨平台开发框架ChocolateChip UI,主要是采用HTML5、CSS和Javascript技术来实现,它使用的是语义化的HTML5标志和属性,开发者可以自定义css主题来满足自己的需求。

跨平台的2D游戏开发引擎V-Play来自奥地利维也纳,V-Play融合了原生C++引擎的高性能,及Javascript的灵活性和迭代速度。通过它,即使是毫无开发经验的初学者,只需拥有简单的编程基础,就可以再短短的3天之内开发出一款能够运行于只能手机、平板电脑及PC上的“原生”2D游戏。

如此多的跨平台开发工具集中于2014年初爆发,也印证了业内已达成的共识:跨平台开发将成为主流和趋势。

对于毫无编程经验的爱好者们,再介绍一个基于移动应用创建平台Appery.io。它可以创建IOS、Android、Windows Phone和Html移动应用,集合了HTML5、PhoneGap、Javascript、JQuery Mobile和CSS的优点,无需编程经验就可以DIY移动应用。

找到一款自己喜欢的开发工具,深入学习吧。

123.youthol.cn---->>山理导航
做了个小导航页,谁能看得懂。。。明天上午考概率,守着电脑毫无睡意。不知怎么的,好想回家了,算了算,50块钱的车程,已经5个月没回去了。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

山东理工大学校园传送门:点击此处传送过去!

强调一下,这真的不仅仅是导航。

我想,结合校园大数据的一文,一步步向其靠近,这只是第一步。

有人打开了吗?好用不好用,回个话。。。

 

 

前几天看到的一款比较好玩的时间显示插件,一句script代码就可以,想嵌入哪里就嵌入到哪里,时间显示是人的各种动作,有创意!

这是背景透明:

这是背景白色:

来自日本的一个博客:http://chabudai.org/blog/?p=59

//使用方法很简单,完全不需要任何的代码基础!
//想在哪里显示,就把这个代码放到那里就好了!!
//来自日本的一个博客,不过,那个博客很久没更新了

前几天写得《年终设想:校园大数据》有几位新成员看了,表示不太理解,在这里解释一下。

我所说的校园大数据,想法是:整合学校各个校内网站的信息,通过一定技术来实现,集合在一起,形成一个常用工具。

然而有人问,咱们需要数据库吗?

这个问题其实不知道怎么回答,如果可以直接连接数据库那是最好不过的事情,如果没有数据库,那就只能通过网页抓取来实现了。但是网页抓取站长可以察觉出来,一旦做个什么改动,那就完蛋了。

当然,还有更完美的方法,就是学校开放各种查询接口,仅供校内使用,即数据开放,不过,目前来讲,这纯属YY。

还不明白的可以参考在百家网站投票的时候我做的一个小程序:

>>百家网站票数统计<<

很明显,我并没有网站票数这些数据,但是我可以通过PHP的Curl来抓取,然后将抓取的数据直接显示在首页并保存在我自己的数据库中,方便排序。

如果还有不明白的,可以参考另一个例子:我们为你Got it

这是查询成绩的网站,也是通过模拟登陆,然后抓取信息来实现的,不过,很好的是,它还给出了一个API接口,我们可以根据这个接口同样做一个查成绩或者课表的程序,然后把课表存入自己的数据库,就可以根据星期几来提醒每天该上什么课了。

Got it的API文档:https://github.com/zhwei/gotit/blob/gunicorn/doc/api.markdown

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

还有一点,大家可以多关注一些API接口,如果以后做个小程序可以用的上。更重要的是不断地去学习,不断地写。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

好了,说了那么多,也不知道大家懂了多少,如果还有什么问题可以直接发表评论即可。

网站年终总结:点击链接---->>2014—前进吧!

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

一年了,昨晚突然也想给网站做个年终总结什么的,包括每个部门的工作量,网站的具体访问分析,网站的优秀板块,每个人在网站的成长等,想起bootstrap首页中有chart插件,于是就想到了用图表的方式展示出来。

说干就干,先是学习bootstrap中的chart.js,一个友好并且简单的图表插件,容易上手,并且演示效果也不错,可是它缺少了最重要的一个功能,那就是交互性。

果断放弃chart.js,然后就找到了HightChart.js,不得不说这是一个功能非常强大的图表插件,完全javascript生成,代码更加的简洁,并且支持图片导出!让人用着不知不觉中透漏着爽字!

从2014年凌晨,做到3点,不过基本数据算是体现出来了,更多详细数据在百度统计里面不好统计,希望大家能全面的认识一个网站。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

HightChart中文网:http://www.highcharts.me/

HightChart在线演示:http://www.highcharts.me/demo/index.php

HightChart接口API:http://www.highcharts.me/api/index.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

说明:2014—前进吧!,是结合滚动视差与Highchart.js一起制作的,滚动视差的模板是源自网上的一篇教程,我也没有修改就直接拿来用了,很好的一篇教程,推荐大家看一看。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

滚动视差教程:http://developer.51cto.com/art/201208/352090.htm

滚动视差演示:http://www.qdhairart.com/demo/scrolling/tut-index.html

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Gavin老师课堂开课啦!亲,你有头像咩?设置了咩?还没有?你OUT啦!赶紧跟随Gavin老师的脚步,来给自己设置个头像吧,包教包会,一次不会,免费再学!

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

OK,下面好好的坐在小板凳上,老实听课,不要有小动作哦~~~

设置头像第一步:Gravatar!

点击此处链接进入:http://en.gravatar.com/

顺带着科普一下,Gravatar,个人全球统一标识,Globally recognized avatar的缩写。(其实很明显,设置一次,全球通用!)。

官网是这样描述的:Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums, so why not on any site?

我就用我学的那点英语翻译一下,大致意思就是,你的Garatar就是设置一个头像,在你从一个站点到另一个站点进行参与评论或者发表一个博文的时候,这个头像就会出现在你的名字旁边。这个头像就很好的帮助你在很多博客或者网页论坛中辨认出你自己的评论或者博文,所以说,为啥子不来设置一个全球通用的呢?

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置头像第二步:注册!

因为是国外网站,所以会出现打开速度慢或者打不开的情况,这个大家不要着急,Gavin老师从来不坑人,已经给小朋友们想到最简单的方法啦,只能用最土鳖的翻墙方法,www.fanqiang.net,然后再输入框中输入http://en.gravatar.com/就可以打开。(正常打开网页的就不要使用这个方法了。)

点击“Create Your Own Gravatar”,

然后,转入注册页面,如下:

下面是关键的一步:邮箱!!!一定要填写你注册团队博客的邮箱!邮箱设定后,以后设置的头像就专属于这个邮箱!

第二个方框,用户名,接着是密码,输入完之后,点击“Sign Up”。

然后出现这个页面:

直接点击“sign up”就可以了。其他不用看,然后他们会向你注册的邮箱中发一封确认邮件,然后回到邮箱找到邮件,打开点击“Activate Account”,激活账户,然后会提示注册成功,英文自动脑翻吧,然后再登陆进去设置头像。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置头像第三步:头像设置!

点击“Add one by clicking here!”,然后让你选择,是直接照相呢,还是网页上的一个图片呢,还是上传一个图片呢?就看自己操作啦。因为是我这边网速不给力,一直打不开上传页面,所以没法演示了,自己看着英文自己上传就行,上传完之后就可以使用了,不用进行任何的设置就可以在支持Gavatar的网站上自动显示头像。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置头像第四步:成功咩?

大家如果设置成功的话,就在评论里回复一下,我看看你们闪闪的头像哦~~~