Skip to content

Instantly share code, notes, and snippets.

View kejun's full-sized avatar
💭
I may be slow to respond.

kejun kejun

💭
I may be slow to respond.
1.7k followers · 1 following
View GitHub Profile
@kejun
kejun / dabblet.css
Created February 14, 2015 14:37 — forked from anonymous/dabblet.css
Untitled
body {
padding:10px 10px 100px;
}
@kejun
kejun / dabblet.css
Last active August 29, 2015 14:08
Untitled
.pagination {
position: relative;
padding: 10em;
background: #fff;
-webkit-filter: contrast(10);
}
.dot {
position: absolute;
line-height: 10em;
@kejun
kejun / gist:3f4851c7f3b3e209fcbb
Last active July 9, 2019 15:23
最近一次项目的总结

mathclub是最近做的一个个人项目，帮助考SAT的同学通过在线做题、回顾、问答提高成绩。用户功能有：计次/计时做题、成绩单、错题分布、错题回顾、提问、汇总以及注册登录。管理后台主要是题库管理、学员管理、成绩单管理、问题回复。怎么看都像学校里的课设，的确项目本身并不出奇，开发上选用的一些方案或许更有意思。

整个项目一个人从产品需求、原型设计、前后端开发到部署历时2周左右。可以从截图上感受一下：

image

技术选型上服务端是Node.js，应用框架选了老牌的Express（4.x变化挺大不少中间件都废了），数据服务用的是MongoLab（MongoDB的云服务平台），图片上传用的是又拍云，程序部署在Nodejitsu上。模板引擎没选主流的Jade或ejs，而是用Express React Views它实现了在服务端渲染React组件。前端框架是用React，这次有意想追求前后端全部组件化的组织。之前是用Webpack实现CommonJS模块打包，这次用Browserify配置更简单，它有丰富的transform很赞，其中的reactify转换React的JSX很完美。CSS用Sass＋autoprefixer让人省心。将这一切串起来的自动构建工具是Gulp。我其实崇尚用最精简的工具组合开发，上述组合在我看来比较精简了。（帖纸留念）

![image](http://satexam.b0.upaiyu

@kejun
kejun / dabblet.html
Created May 7, 2014 01:38
Untitled
<svg xmlns="http://www.w3.org/2000/svg" id="slides" width="100%" height="100%" viewBox="0 0 600 400">
<def>
<g id="slide2">
<g id="slide2-c1">
<circle cx="12" cy="50" r="10" stroke="#000" stroke-width="2" fill="none" />
<text x="7" y="54" font-size="10">小</text>
</g>
<g id="slide2-c2">
<circle cx="50" cy="52" r="50" stroke="#000" stroke-width="2" fill="none" />
<text x="30" y="67" font-size="40">大</text>
@kejun
kejun / dabblet.html
Created May 5, 2014 03:18
Untitled
<div style="width:160px;height:160px;">
<svg width="100%" height="100%" viewBox="0 0 10 10">
<g stroke="#000" stroke-width="1.5px" stroke-linecap="round">
<path d="M1,2 L9,2">
<animate dur=".5s" fill="freeze" attributeName="d" to="M2,2 L8,8" />
</path>
<path d="M1,5 L9,5">
<animate dur=".5s" fill="freeze" attributeName="opacity" to="0" />
</path>
<path d="M1,8 L9,8">
@kejun
kejun / dabblet.html
Created May 4, 2014 08:11
Untitled
<div style="width:160px;height:160px;">
<svg width="100%" height="100%" viewBox="0 0 10 10">
<g stroke="#000" stroke-width="1.5px" stroke-linecap="round">
<path d="M1,2 L9,2"/>
<path d="M1,5 L9,5"/>
<path d="M1,8 L9,8"/>
</g>
</svg>
</div>
@kejun
kejun / gist:10717717
Created April 15, 2014 09:34
snapsvg + smooth.js (平滑曲线)
/**
HTML:
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
<script src="http://cloud.github.com/downloads/osuushi/Smooth.js/Smooth-0.1.7.js"></script>
<a href="#">spline 1</a> |
<a href="#">spline 2</a>
*/
var points = [
[5,100],
@kejun
kejun / dabblet.css
Created April 10, 2014 04:04
Untitled
p:4px solid #fff}ul.block-grid[data-clearing]{overflow:visible}.clearing-blackout ul.block-grid[data-clearing].two-up>li:nth-of-type(2n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].three-up>li:nth-of-type(3n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].four-up>li:nth-of-type(4n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].five-up>li:nth-of-type(5n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].six-up>li:nth-of-type(6n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].seven-up>li:nth-of-type(7n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].eight-up>li:nth-of-type(8n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].nine-up>li:nth-of-type(9n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].ten-up>li:nth-of-type(10n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].eleven-up>li:nth-of-type(11n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].twelve-up>li:nth-of-type(12n+
@kejun
kejun / dabblet.css
Created April 10, 2014 04:04
Untitled
p:4px solid #fff}ul.block-grid[data-clearing]{overflow:visible}.clearing-blackout ul.block-grid[data-clearing].two-up>li:nth-of-type(2n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].three-up>li:nth-of-type(3n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].four-up>li:nth-of-type(4n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].five-up>li:nth-of-type(5n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].six-up>li:nth-of-type(6n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].seven-up>li:nth-of-type(7n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].eight-up>li:nth-of-type(8n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].nine-up>li:nth-of-type(9n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].ten-up>li:nth-of-type(10n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].eleven-up>li:nth-of-type(11n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].twelve-up>li:nth-of-type(12n+
@kejun
kejun / dabblet.css
Created April 10, 2014 04:03
Untitled
p:4px solid #fff}ul.block-grid[data-clearing]{overflow:visible}.clearing-blackout ul.block-grid[data-clearing].two-up>li:nth-of-type(2n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].three-up>li:nth-of-type(3n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].four-up>li:nth-of-type(4n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].five-up>li:nth-of-type(5n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].six-up>li:nth-of-type(6n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].seven-up>li:nth-of-type(7n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].eight-up>li:nth-of-type(8n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].nine-up>li:nth-of-type(9n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].ten-up>li:nth-of-type(10n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].eleven-up>li:nth-of-type(11n+1){clear:none}.clearing-blackout ul.block-grid[data-clearing].twelve-up>li:nth-of-type(12n+