让网站更好看!Bootstrap及素材网站分享!

最近发现很多人不知道怎么调整版面,导致网站卡在反覆修改,无法往下继续写功能的窘境。因此本文会介绍Bootstrap基本用法,及分享如何找到让网站更好看的素材,希望能解决大家的问题。


Bootstrap

Bootstrap为教程推荐的HTML+CSS+JavaScript框架,意思就是说,如果你没有打算实现特别酷炫的功能,基本上你想做的所有效果,都可以透过修改此框架的CSS或JS来实现,因此我建议大家花点时间去看官方文档,了解Bootstrap能做到什么事情,保证有所收获。

❖ Boostrap中文网,整个网站快速浏览,只需要不到两个小时的时间,你只要先知道「输入什么,能输出什么」就够了,之后有需要调用的功能,再回来查询网站该如何操作即可,不用想著把所有内容背下来 ❖


Bootstrap中文网 - 实例精选

http://v3.bootcss.com/getting-started/#examples-framework
这部分将Bootstrap最常见的用法都列出来,只要简单的点进去看一下效果就好,不用急著理解是怎么做到,之后的文档都会讲解,如果有看到喜欢的、想放在网站上的功能,可以先做个笔记备注起来


Bootstrap中文网 - 全局 CSS 样式

http://v3.bootcss.com/css
关于Bootstrap所有CSS样式的设置都在这里,只要快速看过,了解有什么样式可以透过修改CSS实现,不用全部记起来

❖ 不过以下三个部分,希望大家多花点时间去看,很多人都是跌在这些坑里 ❖

  • 栅格系统:非常重要!非常重要!非常重要!很多人排版问题都出于此,这部分介绍了行与列的关系,及各种运用,一定要看
  • 排版:常用的关于文字的设定,都在这里,不论是标题、内文、特殊用法,花点时间看准没错
  • 按钮:按钮是大家常做变化的部分,这里介绍了一些基本的用法,或许你想要的功能不需要透过修改CSS即可实现


Bootstrap中文网 - 组件

http://v3.bootcss.com/components
组件包含了字体图标、下拉菜单、按钮组、导航、警告框、弹出框等更多功能。有没有看到之前掉坑的部分阿?这部分也是先看过就好,知道哪些组件其实是透过Bootstrap实现,之后有需要再回来查询

❖ 以下几个部分,是最常见的问题,可以重点看一下 ❖

  • 下拉菜单:下拉选单的基本用法及变化
  • 按钮组:如何实现将按钮分组显示,整合在一起(这问题最近常被问到)
  • 导航条:上方导航条的基本设置(也是常见问题)
  • 缩略图:图片展示的进阶用法,Bootstrap内建就有了


Bootstrap中文网 - JavaScript 插件

http://v3.bootcss.com/javascript
Javascript是让网站页面更酷炫的东西,但前期建议大家先不用花太多时间去研究,Bootstrap内建的JS插件已经很够用了,可以先从了解、用好这些JS语法开始

❖ 这边教大家一个小技巧,以往我们调用Bootstrap的JS插件时,都是在application.js一个一个导入,实际上可以一次导入所有插件,需要时直接在页面上调用即可,作法如下 ❖

app/assets/javascripts/application.js
- //= require bootstrap/alert
- //= require bootstrap/dropdown
+ //= require bootstrap




Code School - Blasting Off with Bootstrap(修选:5.5hr)

Blasting Off with Bootstrap
如果上述文档看完,你还想是摸不著头绪,可以上Code School上学习Bootsrap的教程,会教你Bootstrap的基本用法,大约需要5.5个小时(这课程我没有上过,不过许多人都推荐,因此分享出来)

※ Bootstrap就介绍到这边,要学会更好的运用,绝对是不断地练习,但有基础知识也是很重要的,所以今天才推荐大家至少看完官方文档,再开始实战练习 ※


Google Chrome

Google Chrome - 开发者工具

这边额外介绍一个在调适CSS时非常实用的技能,看完之后你就会知道为什么这么多人都是使用Google Chrome来检查HTML页面

Step 1. 首先对页面点击右键,点击最下方的「检查」

Step 2. 这时候会出现开发者工具

可以看到左方区块显示的是页面的HTML,右侧则显示物件的CSS样式

Step 3. 点击工具左上角的箭头,并选到想要调适的物件上

点击会发现移到页面上时,页面会变成被框住的物件,并显示基本样式资讯

Step 4. 修改物件的CSS

选到物件后,会发现右方列出所有属于该物件的CSS样式,此时可以随意调整,你会发现页面上的物件会立即根据你调整的样式发生变化,甚至可以将CSS样式取消(调整样式前方的勾选选项)

Step 5. 将调适好的CSS,直接输入到项目中对应的CSS样式

※ 此工具在调整页面时十分好用,本意就是让你可以快速修改并即时显示 ※

上述只是介绍了最基本的用法,你甚至能找出为什么物件套用了你的属性,却没有变化,可能是因为被父属性覆盖了。

其馀进阶功能就不多做介绍,可以先将基本用法熟悉运用。


网站素材

Icon 图标

Icon的运用在网站中非常广泛,这里只介绍三个最常用的Icon素材网站,其实我觉得这三个网站就能满足90%对Icon的需求

Font Awesome:小型/纯色/基本样式的Icon在这都能找到,一般使用这个网站

http://fontawesome.io


Flaticon:这网站能满足你大部分的需求,建议买会员(USD$9.99/M),会节省你非常多找素材网站的时间

http://www.flaticon.com


Iconfont 阿里巴巴矢量圖库:国外素材网站常常找不到Wechat、微博等Icon,此时才会来这找

http://www.iconfont.cn




Color 配色

网站配色不知道怎么选?对色彩敏感度不佳?赶快试试以下几个网站吧!

Colordot:非常好用的网站,随著鼠标在画面上移动,会不断变更色彩,找到喜欢的颜色后,只要点击左键就会储存,并且可以储存多种颜色,来调整网站主要配色

https://color.hailpixel.com


BrandColor:列出常见国外企业品牌配色,不知道该怎么选择网站配色时,可以直接参考

https://brandcolors.net


Material:网页标准色网站,里面有基本配色,可以依造色调挑选

https://www.materialui.co/colors


Nippon Colors:好看的网站,内为各种日本传统色,点击喜欢的颜色后,背景色会自动调整,方便检视

http://nipponcolors.com/#shironezumi 日本传统色




Pohto 图片

图片素材网站太多了,以下只介绍常用的几个,StockSnap、Pexels、Picjumbo使用起来差不多,图片皆为免费使用;

StockSnap

https://stocksnap.io


Pexels

https://www.pexels.com


Picjumbo

https://picjumbo.com


Gratisography:风格强烈的图片网站

http://www.gratisography.com


Shutterstock:个人认为最好的付费图片素材网站,不过费用不便宜

http://www.shutterstock.com




Vector 矢量图

Freepik:其实网站里不止矢量图,还有图片及Icon,不过个人最常拿来搜索矢量图素材

http://www.freepik.com




Template 模版

Bootsnipp:基于Bootstrap的模版,内有许多制作精良的模版素材,都有HTML/CSS/Javascript可直接套用

http://bootsnipp.com


Codepen:非常酷炫的模版网站,也都有HTML/CSS/Javascript可直接套用

https://codepen.io





Bootstrap Theme(选修)

Bootwatch:一个基于Bootstrap的开源项目,上面有许多不同风格的主题,如果想要在原先的Bootstrap上做点变化,又不想套用复杂的模版,以下会教大家如何操作

http://bootswatch.com

Step 1. 先找到喜欢的主题 -> 点击主题名称下拉选单 -> 对bootstrap.css选项点击右键,选择另存连结

Step 2. 将bootstrap.css档案更名为bootstrap.scss

Step 3. 将bootstrap.scss 放到项目中的 app/assets/stylesheets 文件夹

大功告成!

❖ 如果想要变更主题,只要再次如法炮制即可 ❖








你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


ORID 2017/04/21 - 教就是最好的学

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 重新学习Markdown,调整Logdown一些文章
  • 在Logdown写了两篇文章,分别是Devise及Simple_form进阶用法
  • 回答了三个技术问题!
  • 修改职赢网项目
    • 限制简历投递数量
    • 修正职位推荐及职位信息排版,并适配移动端
    • 管理后台新增职位数量、收藏数量及筛选功能
什麼部分印象最深刻?
  • Devise教程写得还算满意,图文并茂并且循序渐进
  • Simple_form教程写得力不从心,这种类型不好解释,也算是一个坑
  • 有人参考我的代码遇到问题来找我求助,但没看github上的代码我自己也找不到问题症结,要加强解决问题的能力

Reflective

今天的整体感觉如何?(情绪或感受)
  • 烧脑,写教程比想像中花时间
高峰是什么?
  • Devise教程受到大家的肯定
低点是什么?
  • 一天快结束时才发现自己的项目两天来都没什么调整,时间掌控还要加强

Interpretive

今天有什么关键转捩点吗?
  • 在写Devise教程时,发现自己操作也是会出现一些小状况,将文章最后审视时又会发现可以补充的信息,真的就如同老师所说的,教就是最好的学,这是最好提取练习的方法
有什么重要的领悟?
  • 教是最好的学,在教导别人的过程中,脑中的知识结构重新排列,建立新的连结,也让记忆更加深刻
为什么很重要?
  • 看了很多书、上过很多课、学了很多东西却用不好,可能都是因为没有实践,实践中最好的办法就是去教人,自己会用只是第一步,能够清晰、易懂的方式教导别人,才是最高境界

Decisional

我们会如何用一句话形容今天的工作?
  • 新的尝试、新的挑战,继续努力
明天要做什么事情?有什么需要继续努力的?
  • 参加北京线下Meetup
  • 写一篇网站素材心得
  • 至少写一个新的项目功能







你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


Simple_form进阶用法:优化栏位设置(包含Model设定)

本篇文章将介绍Simple_form的更多用法,关于栏位大家使用得非常多,因此如何调整f.input成了常见到的问题,以下会分享一些最常用的调整方法,让页面上的栏位更美观、更实用。(因为栏位限制与Model息息相关,文章中也会介绍Model中的设定)

❖ 本文使用新生大学全栈营job-listing教程内容为架构 ❖


让我们开始吧!

Part 1 - f.input常见用法介绍

我们以app/views/admin/jobs/new.html.erb做示范(为了示范日期格式,增加了created_at栏位)

app/views/admin/jobs/new.html.erb
<%= simple_form_for [:admin,@job] do |f| %>
    <div class="form-job">
      <%= f.input :title, label: false, error: '请输入职位名称', hint: '请输入完整职位名称', placeholder: '职位名称', required: true, autofocus: true, input_html: { class: "form-control"} %>
      <%= f.input :description, label: '职位介绍' %>
      <%= f.input :wage_lower_bound, as: :string %>
      <%= f.input :wage_upper_bound %>
      <%= f.input :contact_email, input_html: { maxlength: 16 } %>
      <%= f.input :created_at, label: '职位建立时间', start_year: 2010, end_year: Date.today.year %>
      <%= f.input :is_hidden, :label => false, as: :radio_buttons, collection:  [['显示', false], ['隐藏', true]] %>
    <div class="form-actions text-center">
      <%= f.submit "Submit", disable_with: "Submiting...", class: "btn btn-primary"%>
    </div>
  <% end %>

1、label:栏位上方文字,如果设定为false则隐藏文字
2-1、placeholder:栏位内文字
2-2、autofocus:设置为true,则进入该页面时,会自动focus在此栏位上(可以看到栏位外框变色,及栏位内出现游标)
3、hint:栏位下方文字
4-1、as: :radio_buttons:用单选按钮方式呈现(多选为as: :check_boxes)
4-2、collection:选项内容,用[]框住,如果要设置选项代表的值,可用['#name','#value'],例如[['显示', false], ['隐藏', true]]

5-1、start_year: 起始年份,可直接输入年份(栏位格式必须为date)
5-2、end_year: 结束年份,Date.today.year为限制到当前年份(栏位格式必须为date)
❖ 预设为当前年分正负五年 ❖

6-1、error:错误提示
6-2、required:设置为true,则此栏位必须得输入
7、as: :string,强制设定栏位为字串型态(原本integer栏位无法输入文字)
8-1、input_html:栏位CSS格式, { class: "#css样式"}
8-2、input_html:如果设置为input_html: { maxlength: 16 }则限制栏位最多只能输入16个字符

以上就是最常见的几种用法,有没有发现栏位限制、错误提示也可以直接在f.input里设置呢?但为了美观及统一管理,下面会介绍在Model里设置的方法

如果实在无法理解上面各种设定,最简单的方法就是复制一份到文档中,实际应用马上就会明白了!


Part 2 - 在Model设定栏位限制

❖ 在开始前请先把刚刚那行练习用的<%= f.input :created_at, label: '职位建立时间', start_year: 2010, end_year: Date.today.year %>删除,才不会影响到操作 ❖

app/models/job.rb
validates :title, presence: { message: "请填写职位名称" }
validates :description, presence: { message: "请填写职位描述" }
validates :wage_lower_bound, presence: { message: "请填写最低薪水" }
validates :wage_upper_bound, presence: { message: "请填写最高薪水" }
validates :wage_lower_bound, numericality: { less_than: :wage_upper_bound, message: "薪水下限不能高于薪水上限" }
validates :wage_upper_bound, numericality: { greater_than: 0, message: "最小薪水必须大于零" }
validates :contact_email, presence: { message: "请填写联系用的邮箱" }
validates_format_of :contact_email, :with => /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\Z/i , message: "请输入正确的邮箱格式"

1-1、presence:限制栏位必须输入

1-2、message:可直接将错误提示写在message里
例如presence: { message: "请填写职位名称" }

2-1、numericality:限制栏位内容必须为数字

2-2、less_than:栏位数值必须小于另一个栏位
例如less_than: :wage_upper_bound

2-3、greater_than:栏位数字必须大于设定

例如greater_than: 0

3、validates_format_of :contact_email, :with => /\A([^@\s]+)@((?:[-a-z0-9]+.)+[a-z]{2,})\Z/i
这段代码的意思为contact_email必须符合E-mail格式

至于为什么每个栏位要分开写呢?这部分是个人习惯,整体浏览起来对每个栏位的设定比较清楚,大家可以依造自己需求调整



关于Simple_form就介绍到这边

强烈建议大家先去看Simple_form的官方文档,https://github.com/plataformatec/simple_form,里面有非常详细的介绍,先快速扫过即可,不用去背里面的代码,日后需要调用时在回来查询。





有任何问题或建议都可以留言给我,或在微信、Slack上找到我 :D

没想到这篇文章比想像中还要难写阿!!!不是很好解释这些用法,还是建议大家实际运用,才会有深刻的体会,如有不足敬请见谅。 (´ー`)








你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


Devise进阶用法:修改注册页面、新增栏位

本篇文章将介绍如何在Devise中,于注册时直接新增User的姓名及管理者权限

❖ 本文使用新生大学全栈营job-listing教程内容为架构 ❖


让我们开始吧!

Part 1 - 新增Devise相关页面,以便后续调整注册单页

Step 1. 确认当前页面

❖ 刚做完教程的同学们,没有意外的话,你的画面应该长得跟下图差不多 ❖

基础页面:

登录页面:

Step 2. 新增Devise相关Views页面

输入rails g devise:views,可以看到系统生成了许多与User相关的页面

❖ 刚安装完Devise的gem时,是没有相关的Views提供修改的 ❖

❖ 页面都放在app/views/devise里面 ❖


Part 2 - 新增User栏位

Step 1. 在User Model中新增姓名栏位

输入rails g migration add_name_to_user

Step 2. 在新增的magraion档案里加入以下代码并储存
add_column :users, :name, :string

Step 3. 执行db:migrate

输入rake db:migrate

※ 现在已经成功在User Model里新增name这个栏位,格式为string ※


Part 3 - 修改注册页面

Step 1. 新增姓名及管理者权限栏位
app/views/devise/registrations/new.html.erb
<%= f.input :name, required: true %>
<%= f.input :is_admin, as: :radio_buttons, collection:  [['一般用户', false], ['企业用户', true]], required: true %>

❖ 此时注册页面会跟下图一样 ❖


*Part 4. 实作新增功能

Step 1. 新增文件夹

输入mkdir app/controllers/users

Step 2. 新增文档

输入touch app/controllers/users/registrations_controller.rb

❖ 此文档为用来控制发生注册动作时的Controller ❖

*Step 3. 修改注册功能(将原先Devise的注册功能调整为我们想要的)
app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
  before_filter :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:is_admin,:name])
  end
end

*Step 4. 修改routes代码(设定注册时,使用上面修改的Controller)
config/routes.rb
- devise_for :users
+ devise_for :users, :controllers => { :registrations => "users/registrations" }

※ 注册功能修改成功,注册时可同时新增姓名及管理者权限 ※


Part 5 - 调整navbar导览栏

Step 1. 修改欢迎文字,从邮箱改为姓名
app/views/common/_navbar.html.erb
- Hi!, <%= current_user.email %>
+ Hi!, <%= current_user.name %>

Step 2. 此时可以尝试注册新用户,输入姓名及选择企业用户(管理者权限)

Step3. 可以看到导航栏正常显示用户姓名,下单选单里也有Admin Panel功能

大功告成!!








Plus - 优化Devise设定(选修)

当然Devise里可以修改的地方远不止上方介绍那些

可以看到之前生成的文件夹里有很多档案,透过修改HTML&CSS,可以呈现出不同的样貌,先介绍三个最常用的,其他的可自行摸索
- app/views/devise/registrations/new.html.erb 注册页面
- app/views/devise/sessions/new.html.erb 登录页面
- app/views/devise/passwords/new.html.erb 忘记密码页面


几乎每个页面下方都有这行代码
<%= render "devise/shared/links" %>

这是什么意思呢?代表他们都调用了这文档
app/views/devise/shared/_links.html.erb

透过修改文档内link_to后方的文字,就可修改如下方所示位置的文字


如果你的网站是中文语系,当然会想把提示语也更改为中文,这时候可以到这里修改,config/locales/devise.en.yml

下方红框内的文字,就是有关登录的提示,例如登录成功、登出成功等
同理,如果你想修改其他关于帐户操作时的提示,可以依需求调整,这里就不多做介绍




最后,当然你也可以针对注册/登录页面的CSS做优化,让整个网站看起来更美观


Tips

如果你在使用Devise上遇到任何问题,建议你先上
https://github.com/plataformatec/devise查看官方文档,里面会有详细的介绍及应用。不要被里面的英文所吓到,通常你都可以用关键字查到想要了解的用法,或者快速地看一下整篇文档,通常在实作代码下方都会范例可以参考,如果有解决不了的问题再Google。

一点心得与大家分享。





有任何问题或建议都可以留言给我,或在微信、Slack上找到我 :D








你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


ORID 2017/04/20 - 目标与执行力相辅相成

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 调整Logdown模版字型,并写成文章分享
  • 参加北京平日线下Meetup
  • 整理错误记录,找出适合分享的技巧
  • 全栈营直播 - Xdite 冲破人生天花板,从魔改大赛做起
什麼部分印象最深刻?
  • 今天聊到一句话印象很深刻,ORID就是再跟以前的自己协作,写到今天好像有点感觉了

Reflective

今天的整体感觉如何?(情绪或感受)
  • 下午极嗨,晚上失落
高峰是什么?
  • Meetup时跟价值观相近的小伙伴聊天太爽啦!!!果然学习成长的路上就要找到真正的伙伴!
低点是什么?
  • 没有达到预期时,小小的失落了一下

Interpretive

今天有什么关键转捩点吗?
  • 早上成功修改Logdown内文字型阿!!!这问题困扰超久,今天能够解决是因为有强烈的需求,因此不断地尝试,找出解答
有什么重要的领悟?
  • 目标跟执行力强相关,有清晰明确、可执行的目标,自然有执行力,反之亦然
为什么很重要?
  • 以前会将达不成目标,视为目标订得不好,或自己不够努力,其实可能只是目标不够清晰,或设定得超出能力范围太多;会将执行力不强,视为自己内驱力不够,环境阻碍太多,甚至是心态不好,其实可能只是不知道该做什么,没有一个清晰可向前的路径。

最近实践才发现,这两个是息息相关的,目标明确,自然有执行力,不达到目标绝不罢休。了解到这道理之后,事情就变得很简单了,如何设定好目标,变成要去思考的问题,其他自然水到渠成。


Decisional

我们会如何用一句话形容今天的工作?
  • 松懈啦!回神阿!
明天要做什么事情?有什么需要继续努力的?
  • 至少写两篇技巧分享的文章(图文并茂)
  • 至少修改两个功能
  • 看完全栈营新教程跟再看一次昨天直播







你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


史上最快速修改Logdown模版字型!!!

相信大部分使用简体中文在Logdown写文章的伙伴们,都会遇到一个问题。很多模版与简体中文不适配!!导致内文看起来不太美观...这问题也困扰了我许久,于是我花了一点时间研究,并找到最快速的解决方法,来分享给大家。

*此方法必须得是Logdown付费会员,付费会员才有权限自定义blog模版*




Step 1:至网站后台 -> Blog设定

Step 2:选择布景主题 -> 点击当前模版

Step 3:在<head></head>中间插入以下代码

(请一定要将代码放在</head>之上)

<style>
    body {font-family:SimHei !important;}
</style>


修改前:


修改后:



这样就完成了,是不是非常快速呢!?

如果要更改为其他字型,只要将font-family后面的SimHei,改成自己喜欢的字型就可以了。

如果不希望整个Blog都是同样字型,例如想将段落、清单、连结等设置不同字型,只要仿照上述格式就可以了。

最后,如果你们有不错的简体字型也麻烦分享给我,我对目前的字型还是稍微不太满意阿!

谢谢收看。








你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


ORID 2017/04/19 - 专注才能成功

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 完成v1.0版职赢网网站

    • 增加 - 筛选功能
    • 增加 - 搜索功能
    • 解决页面适配问题
    • 检查所有页面,统一视觉、排版及修改错误,并增加一些代码备注
  • 参加第二季Job Listing魔改大赛

    • 提交参赛作品
    • 新增网站内容
    • 将作品所有页面截图,制作功能介绍gif
    • 在Logdown上写一篇更详尽的介绍文章
什麼部分印象最深刻?
  • 逐一检查所有js、css、controller、model、views时,还是发现不少bug当初竟然没有察觉,并重新思考了整个网站的结构
  • 在写网站功能介绍时,才发现自己也没写几个功能阿...还需要继续努力...

Reflective

今天的整体感觉如何?(情绪或感受)
  • 感觉不错,开赛前很紧张,怕出现bug
高峰是什么?
  • 将项目推上heroku,开始新增信息时,感觉到真的完成一个项目了
低点是什么?
  • 多重筛选功能没作出来,但不想将时间抓得太紧张,所以决定之后再修改

Interpretive

今天有什么关键转捩点吗?
  • 终于把jobs_path跟_footer改好了!!变成适配移动端浏览器!!Safari也正常了!!用bootstrap排版还不够熟练,有时候排完只是在一般浏览器适配,一旦缩小至移动端场景就跑掉了,今天终于找到方法修复
有什么重要的领悟?
  • 有人问我为什么可以这么快将作品作得比较完整,其实我觉得这不难
    • 一、设定清晰的目标,要有时间限制跟自己有能力可以达成
    • 二、拆解任务,有目标后会发现有很多想做的任务,先找出最重要的完成,其他的都可以慢慢实现
    • 三、Just Do it,就放手去做,但大前提是要专注,不要被其他的事物分心,我在这期间没有学习其他不相关的技能
为什么很重要?
  • 这些道理我以前也不是不知道,但这次是真的将之实践,并且成效还不错,以后可以套用在其他的任务上,并持续迭代

Decisional

我们会如何用一句话形容今天的工作?
  • 做得不错
明天要做什么事情?有什么需要继续努力的?
  • 新增一些小功能
  • 思考教程架构
  • 参加北京平日线下Meetup,与人交流







你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


Job Listing 魔改大赛作品介绍(职赢网)

这篇文章为我参加新生大学全栈营Job Listing第二季魔改大赛的作品介绍,作品名称为职赢网,是以互联网行业为主的招聘网站。

这里会有比较详尽的作品细节,例如页面功能、Model、Gem及作品截图等,也会将之后调整的功能更新上来。

话不多说,先上图


2017-04-26 - Job-win 职赢网v1.2 - 改版方向:希望能统一管理更多信息(工作地点、职位分类及职位管理)

1、新增网站管理员权限,可以管理职位类型/工作地点;
* 新增Model:Category 职位类型 / Location 工作地点
* 新增View:管理后台 职位类型 / 工作地点
* 调整Model:User,新增 is_website_admin 栏位
* 调整Model:Job,修改category / location栏位,连结至新Model
* 调整View:管理后台 / 职位列表下拉选单 / 职位相关页面
* 修正搜索功能
2、修改职位权限,职位只能下线、不能删除
* 调整View:管理后台移除删除功能
* 调整View:职位相关页面

这版虽然看起来没新增什么功能,但新增并且调整Model之间的关连,坑比想像中多出太多了。Heroku上的数据结构也无法顺利修正,只好将过去数据删除,重新整合。

不过这版复杂一点的Model,也学到很多新技能,例如搜索及捞出数据时的用法

2017-04-21 - Job-win 职赢网v1.1

1、限制投递简历数量,每人对同一个职位只能投一次简历
2、职位列表/我的收藏/投递历史/搜索页面,右侧职位推荐/左侧职位信息,重新调整CSS及排版,现已正常并适配移动端
3、管理后台新增职位数量统计、收藏数量统计、筛选工作地点/职位类型/月薪 功能

2017-04-19 - Job-win 职赢网v1.0

主要功能及页面:

一般用户+企业用户
  • 浏览首页
  • 注册帐号、帐号登陆
  • 浏览职位列表,筛选职位类型、工作地点或月薪,随机推荐职位
    • 收藏职位、取消收藏
  • 浏览职位内容,推荐相似职位
    • 投递简历
    • 收藏职位、取消收藏
  • 搜索职位名称、工作地点或公司名称
企业用户
  • 浏览企业专区 - 工作列表,新增、修改、删除、显示/隐藏职位(只对当前帐号创建的职位有权限)
  • 浏览简历清单,下载简历

Model:

  • User 用户
    • id 用户ID
    • email 邮箱
    • name 姓名
    • is_admin 管理者权限
    • created_at 资料建立时间(系统预设)
    • updated_at 资料更新时间(系统预设)
  • Job
    • id 用户ID
    • user_id 用户ID
    • name 职位名称
    • content 职位内容
    • company 公司名称
    • category 职位类型
    • location 工作地点
    • wage_lower_bound 薪资下限
    • wage_upper_bound 薪资上限
    • contact_mail 联络邮箱
    • is_hidden 开放权限
    • created_at 资料建立时间(系统预设)
    • updated_at 资料更新时间(系统预设)
  • Resume
    • id 简历ID
    • user_id 用户ID
    • job_id 职位ID
    • content 简历介绍
    • attachment 简历档案
    • created_at 资料建立时间(系统预设)
    • updated_at 资料更新时间(系统预设)
  • Collection
    • id 收藏ID
    • user_id 用户ID
    • job_id 职位ID
    • created_at 资料建立时间(系统预设)
    • updated_at 资料更新时间(系统预设)

Gem:

  • bootstrap-sass
  • devise
  • simple_form
  • carrierwave
  • font-awesome-rails
  • will_paginate
  • will_paginate-bootstrap
  • ransack

首页:依据Landing page概念制作,可点击依造热门行业直接浏览该分类所有职位

职位页面:依造职位建立时间显示所有职位(预设隐藏的职位除外),并具备依照条件筛选、输入关键字搜索、收藏职位、投递简历等功能(右侧会随机推荐职位),职位内容页面会显示详细职位信息(右侧会显示相似职位)

帐户功能:可浏览所有收藏过的职位,以及所有投递过的简历

用户管理:可使用注册、登陆功能

管理后台:企业用户可以前往管理后台,针对职位做新增/修改/删除/隐藏/显示的操作(只对针对当前帐户创建的职位有权限),并可浏览投递过该职位的所有简历








你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


ORID 2017/04/18 - 提取练习让学习更扎实

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 举办第一次北京平日线下Meetup,地点在雍和宫附近一间逼格满满的咖啡厅
  • 继续修改job-win项目
    • 调整 - 管理后台页面
    • 调整 - 管理后台框架
什麼部分印象最深刻?
  • 数据库连动删除的用法,has_many :resumes, dependent: :destroy
  • 两种语法的写法
    • Way 1:放在后面可省略,alert: '职缺删除成功。’
    • Way 2:正常写法需加 =>,:alert => '职缺删除成功。’
  • Full Page Screenshot - Google Chrome 頁面截圖工具 https://chrome.google.com/webstore/detail/full-page-screenshot/glgomjpomoahpeekneidkinhcfjnnhmb
  • 字串裡面帶instance的用法,用 #{@instance} "#{job.wage_lower_bound} k ~ #{job.wage_upper_bound} k"
  • Ruby的特殊用法,1_000 = 1000,常用在金融系統,可以更方便辨別數字
  • 线下Meetup与人交流、分享是非常好的提取练习,让知识结构更加完善,对之后的教程文章有了新的框架及想法

Reflective

今天的整体感觉如何?(情绪或感受)
  • 开心
高峰是什么?
  • 分享了套用模版的套路,中间延伸出icon、图片、模版、配色资源的套路,又延伸出学习bootstrap的套路,甚至是找寻灵感的套路,之后会在Logdown系统性地分享
  • Nic助教解决了三个困扰已久的问题!!以及分享了Rails的特殊用法!!受益良多!!
低点是什么?
  • 没有先设定好今天的目标,效率较为低落

Interpretive

今天有什么关键转捩点吗?
  • 分享完套用模版的套路时,对教程的整个架构有了新的思路,可以初略分为初阶、进阶,及不同方面的心得
有什么重要的领悟?
  • 教就是学!提取练习很重要!
为什么很重要?
  • 重新将知识化为语言传授时,会将脑中的知识结构重新连结,以更好的形式重整,并且会发现之前没有想过的思路,额外的收获太多了!

Decisional

我们会如何用一句话形容今天的工作?
  • 大赛尚未成功,还需继续努力
明天要做什么事情?有什么需要继续努力的?
  • 完成大赛项目初版页面,并上传至heroku
  • 将项目添加资料,将页面截图、制作影片,写功能描述,准备参赛







你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D


ORID 2017/04/17 - 痛苦会过去、美会留下

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 继续修改job-win项目

    • 调整 - 首页-热门行业区块,使风格与整体更为搭配
    • 调整 - 工作列表、收藏夹、投递箱等页面
    • 增加 - will_paginate分页功能,并套上bootstrap样式
    • 增加 - 随机推荐工作功能
    • 调整 - 网站整体风格,新增加对应颜色
  • 搜寻北京适合线下Meetup的地点,预定明天举行第一次Meetup

  • 参与新生大学全栈营直播 - Nic 如何参加魔改大赛

什麼部分印象最深刻?
  • 修改工作列表时,排版花了非常久的时间,最后呈现在一般屏幕上没问题,但没适配小屏幕
  • 寻找随机抓取数据功能时,用错了关键词绕了许久,才找到想要的结果

Reflective

今天的整体感觉如何?(情绪或感受)
  • 觉得累,排版很耗精力,对成果也不够满意
高峰是什么?
  • 调整热门区块,早上询问了设计师朋友,讨论出与整体风格更一致的样式,然后进行调整,虽然这块总共改版了三次,但最后成果十分满意
低点是什么?
  • 排版、排版、排版,位置很难对齐,总是达不到想要的效果,适配也有问题

Interpretive

今天有什么关键转捩点吗?
  • 下午为了办Meetup,花了两个小时搜寻资料,与对方沟通包间费用等,脱离了写代码的节奏,之后的整体效率下降许多
有什么重要的领悟?
  • 工具的用法很重要,一直觉得ORID有些”词”不对胃口,在回顾时不知道写什么,花了一点时间研究原理后,调整成适合自己的格式,整体回顾起来流畅很多
为什么很重要?
  • 之前虽然只要有学习,就会写ORID,但那是属于半强迫的状态,并没有感受到真正的帮助,改版后在填写时,能明显感受到整体脉络,思考更为清晰、有逻辑

Decisional

我们会如何形容今天的工作?
  • 整体效能不足,没有预先设定好目标,中间又发现即将编程大赛了,需要重新调整节奏,导致效率下降
明天要做什么事情?有什么需要继续努力的?
  • 参与线下Meetup,与小伙伴共同学习
  • 继续修改Job-win项目,准备参与大赛







你好,如果觉得这篇文章有帮助,我最近在参加一个编程比赛,Job Listing 魔改大赛,如果你喜欢我的参赛作品的话,麻烦花点时间投下宝贵的一票,谢谢。 :D