分类
作品

超全面全栈入门项目:fastest

TL;DR.

前些天做了个覆盖面很广的项目:FastTest。涉及到静态网站、node.js 后端 API、响应式、多语言、Vue3 全家桶、前端工具链、nginx 配置等一系列技术,都是很基础的应用,相信对大家入门很有帮助。

GitHub:https://github.com/meathill/fasttest

欢迎阅读学习,有任何问题均可提问或提 issue。


前些日子有个朋友找到我,想请我帮他做个项目。我看了一眼需求,不太想接:这个项目太小,要多了不合适;要少了感觉又不值当——有那时间还不如砍两把胖虎。

后来我仔细一想,感觉这个项目很适合拿来做教程,而且是非常全面的全栈入门教程。

先来看需求。他的需求很简单:开发一个测速应用。用户打开页面,点击按钮,然后下载一些东西,下载完成之后,告诉他他的网速是多少。与之前的测速产品不同,这个应用不下载大文件,而是从各种 CDN 下载 JS 库和 SDK,因为大部分 web 应用都依赖这些资源,所以可能更接近真实体验。

关于需求我们不深入讨论(我觉得挺有道理,但也未必有道理到哪儿去……),只看实现。为了满足这个需求,我们需要开发这些东西:

  1. 静态页,让用户能够测速。这就需要:
    1. HTML+CSS+JS,静态资源
    2. 响应式,支持桌面和移动端
    3. 多语言支持
  2. 后台,能调整待测资源、修改翻译、控制广告、查看数据。这就需要:
    1. 友好的 Admin panel:vue 全家桶
    2. 后端 API:express.js + node.js server
    3. 自动发布静态页(webpack 前端工具链)
  3. 部署到服务器:
    1. 静态服务供给用户端页面和资源
    2. SPA 服务,提供后台 Admin Panel 给管理员
    3. 反向代理 express.js API
    4. 配置 CDN
  4. 其它,比如版本管理、前端预处理工具,等等

这些东西可以说是非常全栈,除了没有移动 App、没有数据库操作,其它 Web 开发的东西都用到了。而且涉及到技术也都很基础,没有特别深入的东西。再加上,这个项目会上线,会迭代,是个真实产品。所以,很适合拿来做教程,大部分观众,不管是什么背景,都可以拿来入门。

于是我就答应了,然后断断续续在直播的时间把它做了出来。当然还有一些问题,不过大部分功能都就绪了。

项目放在 GitHub 上:https://github.com/meathill/fasttest,有需要的同学请自由取用。对其中任何技术点有问题都可以提问或者开 issue。

网站地址在 https://afasttest.com

视频还需要一些时间来整理,将来慢慢放出来吧。着急且有时间的同学可以自行从百度网盘下载:https://pan.baidu.com/s/1KPuCM-9gPd0hQsr5Df_PnA 提取码: w8f2。

分类
作品

《Electron + Vue 实战建站工具开发》读者圈开启

今年很努力的做视频培训,收效一般。不过在社区收获了一些声望,还得到一个写书的机会,跟编辑讨论再三,确定下内容:Electron + Vue 实战开发。

然后呢,也不是我有意拖延,因为很快就入职贵司,一直都很忙,将近两个月,渐渐熟悉了框架,也适应了节奏(希望如此),现在得抓紧时间补书稿了。

最开始想在知加边写边发,结果知加没挺到现在,所以只好退而求其次,在 SF 开了读者圈——倒不是说 SF 不好,而是他们家的“技术圈”从产品形态上来看,不是非常合适。

Anyway,欢迎大家加入圈子,您会得到:

  1. 读到这本书全文,并且更早读到
  2. 获得实时问题解答
  3. 得到实时勘误
  4. 得到实体书(具体看出版社给多少了……)

入圈链接

分类
作品

第一次视频直播结束

经过认真准备,热情推销,今天进行了第一次视频课程直播。

我有点紧张,比面对小胖陈胜他们紧张得多,呵呵。所以表现不太理想,中间卡壳好几次,不过也有观众说看现场写代码 Debug 也挺好的。

另外就是人数略显惨淡,15人在线,29人购买,还有很多是我主动推销的……

希望以后会更好。

录像回看地址:https://segmentfault.com/l/1500000008694676

Slide 地址:https://meathill-lecture.github.io/jquery-backbone-vue/


下一场预告:

下一场是关于 Promise 应用的,结合之前写 Meart 的经验,应该也很值得一看。

地址:https://segmentfault.com/l/1500000008757392

分类
作品

新站点,填坑

Nodejs发展起来后,出现类似WordPress这样的开源博客工具是早晚的事儿。作为前端和新技术爱好者,我一直很关注这方面的动态,所以Ghost出现之后我就准备尝试一下。看过前面博客的同学可能也知道,我买过不少机器,所以很快搭了个新站点出来。

搭博客很容易,就是不知道写啥,然后Ghost版本从0.3拖到如今都0.5.8了……想来想去决定在上面专发系列文章,比如之前挖下坑的《ActionScript3中的插件模式开发》,正好被几个人催更,虽然只是几个人,但也是鼓励嘛,所以新年要在新博客连载完。

新博客的地址:http://serial.meathill.com/,敬请关注。
正在更新的连载:ActionScript3中的插件模式开发,也请关注。

所以以后就是俩博客一起跑,这个博客记录知识点和生活,那个博客系统的写一些比较大的题目。

分类
作品

山维空间2014

(图为花莲七星潭,与文章无关。明天去台湾呀,咿呀咿呀哟~~)

开博客以来,虽然也挂着广告,但我其实并不是很操心访问量——我当然希望有人来看,但是因为懒,不想太花时间……而且你看电视上网站一上线就会有人访问……同样的缘故,我一直只向Google提交sitemap,所以百度开始并未收录这个博客。今年国庆后,不知为何百度突然开始引流,访问量蹭蹭涨起来。但是广告收入几乎一点没变……

WordPress每逢年底都会给一份总结报告,其中“TOP文章排行榜”引起了我的注意。访问量最高的文章里,有些写作时间较早,可能当时我的认识理解还不到位,也可能技术本身发生了不小的变化,总之某些内容已经不适用了。所以今年除去早就计划好的长篇连载之外,我准备把这些文章也翻出来更新一下。

以下就是今年的TOP10文章:

导出Table数据并保存为Excel

这篇文章还算比较新,问题不大。关于多表格的操作可以补进去。

禁用鼠标滚轮事件

说实话我很不明白为啥这篇文章的访问量这么高,可能是页游开发的同行吧。看内容的话,随着浏览器升级似乎也该更新了,不过考虑到现在Flash的市场状况,往后放吧。

HTML5的File API应用

这篇文章写于肉大师第一版时,很早以前。正如我在更新中所说,当时我弄混了FileFileSystem。其实这个题目很大,还是写成系列文章罢。

悲催的Android Webview——记新版广告墙开发Android Hybrid App四大坑原来早期Android的WebView真的很奇葩

关于Android Hybrid应用的几篇文章,内容没太大问题,多半是表述方面的,不很影响阅读或者后来的实施。长篇连载时会好好说说。

Backbone.Collection.fetch小优化一则

使用Backbone两年之后,我终于明白这才是正确姿势……回头写一篇Backbone最佳实践吧。

本地部署weinre帮助移动开发

工具应用,没什么问题。

重写Backbone.js的加载动作

刚开始使用Backbone那会儿写的,问题比较大,得改一改。

Phonegap 2.6在Android上的Icon设置

其实问题不在phonegap,而是小米手机的图标刷新很慢。

总结

一些排名靠后的文章也有问题,我就不一一列举了。整体说来,可以分成三部分:Backbone最佳实践、Hybrid应用开发、HTML5文件API。慢慢写吧。

分类
作品

新个人首页

最近比较忙,为了排遣压力,把我的首页重新整了一下:点我访问

感谢各种开源组织和个人,感谢github提供静态托管服务,感谢点乐让我成长起来,可以随手一搞就完成这个项目。

分类
作品

二维码小工具

这两天利用业余时间,做了个二维码的小工具,用来在页面里插入二维码。这个工具比较方便编辑同学在自己的文章或者专题里添加二维码,推广手机应用,或者手机网站。——要么说第一份工作很重要呢,离开媒体那么多年,想做点独立项目还是跟编辑工作有关。

工具地址是:http://meatqr.sinaapp.com/

代码也是完全开放的,采用MIT协议,托管在Github上,地址是:http://meathill.github.com/qrcode.js

有兴趣的同学试用下吧,记得给我反馈哟,我会不断更新维护的。


分类
作品

新年写书计划——《ActionScript 3.0高级编程》

看到那个年仅21岁的外国男孩,周游世界,写完《Javascript Web应用开发》,然后入职twitter,无法不佩服起老外的敢想敢做。

新年是一个定各种计划,许各种愿的时候。此时此刻我决定写一本书,书名暂定《ActionScript 3.0 高级编程》,内容可想而知。这本书未必能最终付印,可能最后会成为我博客上的一系列教程,总之我决定写出来,因为写书这件事儿听起来太nb了。

分类
as js 作品

Astinus 0.2版升级计划

我决定,正式将“肉山用户路径分析系统”命名为“Astinus”,中文名“阿斯特纽斯”。关于阿斯特纽斯,可以看下这个链接

在8月内,我计划对该产品进行一次升级,升级的主要Features如下: