【魔改大赛心得】我们靠的不是坚持,而是协作。

经过几天沈淀、思考后,觉得本次大赛感受最深、成长最多的就是「协作能力」。因此来分享一下这段过程中,我是如何与队友协作、与自己协作、与困难协作的。

与队友协作

一个完整的项目,不论是购物网站、服务平台、还是企业官网等等,通常都无法靠一己之力完成。因此学会与队友协作,就如同学会与同事/领导协作一般,是件需要不断练习、不断思考、不断精进的能力。

这次的JDStore魔改大赛,我找到了一个神队友 Anndo,从事前的主题、策略拍版,到过程中每天的Standup沟通、每周的Meetup复盘,在项目的方向上,都非常地顺畅、几乎没有沟通成本。听起来是不是觉得很幸运,感觉这两人天生就三观一致,而且特别好说话?但事实上,我们在过程中调整了许多次协作模式,当没有达到预期目标,或是对自己太宽容时,我们尝试了不同的方式去互相激励、监督,将问题即时反馈、快速解决

「隐瞒问题是不负责任的行为」,当你身处一个团队里,所有的行为都不再只是为自己负责,而是需要对所有的伙伴负责。此时将问题即时提出,并且信任队友、一起解决,才是正确的协作模式。因此我们时刻告诫自己、也信任对方,当遇到无法独立解决的问题时,会花上时间共同商议、排除困难,甚至有可能立即调整策略。

在这次大赛里,看到许多团队在参赛过程中的问题点,大多的都是沟通上的问题,对方很固执、对方很懒散、对方就是个傻逼!但我们不会总遇到神队友,那你怎么保证你的能力强,不是建立在队友牛逼的狀態下呢?如果对方是个不可控因素,那我们就要将可控因素,「自己」,变得更牛逼。提高自己的协作能力,主动沟通、积极参与、不断思考,带动整个团队正向循环,朝目标迈进。


与自己协作

学到现在,你真的懂怎么与过去的自己协作了么?在参赛的过程中,许多代码我都不是重新码出来的,而是从以前做过的Job-Listing、Rails101或其他项目中粹取出来,许多功能也是从以往写过的功能中举一反三、推导而出。其实你已经懂不少了,只是你自己没发现、也未曾将这些知识串连起来,建构起你的编程体系

透过每天ORID复盘、与队友Standup沟通、检视自己过往的代码、将错误记录下来,不斷地去做,便能渐渐形成肌肉记忆,将编程技能如同拼图一般,慢慢地拼出板块。

如果要我推荐一个与自己协作最好的方式,那就是试著将自己做过的功能,写成教程,最好是写成傻瓜都能看懂的教程。你会发现,在思考这教程如何编写的过程中,会因为教学需求,必须最简化流程、必须最优化代码、必须最浅显易懂,甚至加上截图或动图,让学习更为轻松。这当中你会发现,你不只是写出了一篇牛逼的教程,也重新教会了自己更好的编程方式,不相信?自己写一篇试试吧,绝对比你想像中的困难,也绝对比你想像中的有所成长。


与困难协作

编程是什么,编程某方面来讲就是一堆问题朝你迎面而来,把你打得像个傻逼一样。但为什么还是这么多人对编程趋之若鹜?因为解决问题是人的本性,其中带来的成就感绝非打游戏这种娱乐所能比拟,将所有难题解决后的那个完整成果,更是让人感到充实、感到满足。

编程中的困难,其实都有迹可寻,从报错文字中、从编码行为中,都能透过逻辑推导,抽丝剥茧的将问题找出。因此我们要与困难协作,只有反覆地面对挑战,才能减少对困难的恐惧,才能面对未知,去挑战新的方向。

这次比赛,让我与 Anndo 最意想不到的是,我们除了教程,给予同学们最多、最大的帮助,就是协作技巧,虽然这能力好像人人都具备,但我们都知道现实生活中,那种最聪明、能力最强、最有经验的人,并非都是最好的战友。反而是那些与人协作流畅的人,可以走到更高、更远的地方

因此,感谢这次大赛,让我重新磨练,从编程中获得许多知识的同时,也增进了我的协作能力。最后,再次感谢我的神队友 Anndo,对我的不离不弃,共同奋战到最后一刻。






【JA魔改秘笈】实用秘笈列表

这里收集了 Jimmy 王品睿 & Anndo 柯禹安 精心制作的各种教程,与经验及心得分享。希望能对正在学习编程、协作或Ruby on Rails的你有些许的帮助 :D

一、前端模版 / 视觉设计

提供清晰易懂的 HTML/CSS 代码、贴心注解,帮你轻松搞定门面 Landing Page 以及购物网站的两大主页。


二、功能实作

让 J&A 手把手带你实作前后端功能,让你的网站里外兼具。

前端
後端


三、实用汇整

内心深处对 Heroku 部署充满恐惧?上线后怎么生成数据?现在这个烦恼都不是烦恼了。


四、心得分享

分工分得好,协作没烦恼。从挑主题、功能,到协作分工,通通讲给你听。

ORID 2017/06/07 - 莫忘初心

Objective

今天完成了什么事情?(与哪些人、事、物有关)
什麼部分印象最深刻?
  • 编写教程时发现了更好的写法,重新调整了结构

Reflective

今天的整体感觉如何?(情绪或感受)
  • 还行
高峰是什么?
  • 教程得到好的反馈
低点是什么?
  • 感觉效率不够高

Interpretive

今天有什么关键转捩点吗?
  • 晚上制作keynote时,又重新回顾了这段时间的学习方法,感觉还是很奇妙,思维变化很多
有什么重要的领悟?
  • 做事还是要回归初心,很容易被外界所影响,渐渐地去做偏离目标的事情,做事的目的也不是真的对自己的成长有帮助
为什么很重要?
  • 忙、茫、盲,很多时候的忙并不是在做有意义的事情,而是意志不坚定,而做了很多似是而非、填充时间的行为,到头来只能安慰自己付出许多,但却没有成长的焦虑油然而生
  • 莫忘初心、坚持行动

Decisional

我们会如何用一句话形容今天的工作?
  • 还行
明天要做什么事情?有什么需要继续努力的?
  • 写写教程
  • 改改功能
  • 听听直播

【JA魔改秘笈】一首歌的时间教会你做社群分享功能

本篇文章将介绍如何在一首歌的时间内快速新增社群分享功能,包含Facebook、Twitter、Google+、微博、微信等(如果做不完肯定是你选的歌太短了!


让我们开始吧!

Part 1 - 新增GEM social-share-button

https://github.com/huacnlee/social-share-button

Gemfile
+ gem 'social-share-button'
  • $ bundle instal
  • $ rails s 重启服务器
  • $ rails g social_share_button:install


Part 2 - 导入CSS及Javascript

app/assets/stylesheets/application.scss
+ *= require social-share-button
app/assets/javascripts/application.js
+ //= require social-share-button
+ //= require social-share-button/wechat


Part 3 - 新增分享按钮(范例为products#show页面)

app/views/products/show.html.erb
+ <%= social_share_button_tag(@product.name, :allow_sites => %w(facebook twitter google_plus wechat weibo), :image => @product_images.first.image.main.url , desc: @product.description) %>

@product.name 设定分享标题
:allow_sites => %w(facebook twitter google_plus wechat weibo) 设定社群分享按钮,可自行调整(这个Gem共有17个社群网站分享功能)
:image => @product_images.first.image.main.url 设定分享图片
desc: @product.description 设定分享内容

大功告成!!

这样就完成了,是不是非常简单阿!?

※ 社群分享按钮基本上都是抓当前网址的信息,因此本机无法测试,请先确认分享按钮可正常弹出后,推上Heroku查看分享内容

※ 目前完成了最「基本」的分享功能,每个社群分享的效果、设定皆不相同,可依照需求自行调整,也可以参考github上的官方文档 social-share-button






Plus - 优化分享效果(选修)

做完上面社群分享功能,有些人可能会对分享的页面不太满意,这是因为在分享时很多资讯(标题、描述、图片等)会存放在<head></head>里,上面的Gem虽然可以快速实现功能,但部分的效果不够完整

因此我们可以另外设置,进一步优化分享效果(下面以Facebook、Google+为例子)

Part 1 - 新增GEM seo_helper

https://github.com/techbang/seo_helper

Gemfile
+ gem 'seo_helper'
  • $ bundle instal
  • $ rails s 重启服务器


Part 2 - 新增config/initializers/seo_helper.rb,加入基础设置

  • touch config/initializers/seo_helper.rb 新增Helper
config/initializers/seo_helper.rb
+ SeoHelper.configure do |config|
+  config.site_name = "J & A SELECT"
+ end
  • config.site_name = "J & A SELECT" 设置网站名称


Part 3 - 在Layout上方<head></head>中加入设置

app/views/layouts/application.html.erb
<head>
- <title>J & A SELECT</title>
+ <%= render_page_title_tag %>
+ <%= render_page_description_meta_tag %>
+ <%= render_page_image_link_tag %>
+ <meta property="og:title"       content="<%= page_title %>"/>
+ <meta property="og:description" content="<%= page_description %>"/>
+ <meta property="og:image"       content="<%= page_image %>"/>

 ...
</head>
  • <title>J & A SELECT</title> 删除原先页面标题设定
  • <%= render_page_title_tag %> 加入页面标题设定
  • <%= render_page_description_meta_tag %> 加入页面描述设定
  • <%= render_page_image_link_tag %> 加入页面图片设定
  • <meta property="og: ... /> 下方三行为Facebook的特殊设定


Part 4 - 在Controller设置内容(范例为show页面)

app/controllers/products_controller.rb
def show
    ...
  
+   set_page_title       @product.name
+   set_page_description @product.description
+   set_page_image       @product.image.thumb.url
end
  • set_page_title @product.name 设定页面标题
  • set_page_description @product.description 设定页面描述
  • set_page_image @product.image.thumb.url 设定页面图片

大功告成!!


※ 这样就完成了进一步的设置,如果你想深入研究,也可以参考github上的官方文档seo_helper

※ 眼尖的同学应该有发现,这个Gem是拿来设计网站SEO的,以后有SEO的相关需求也可以透过上述方法来实现




若有任何问题都可以在下方留言,或在Wechat、Slack上找到我,希望本篇文章对你有帮助 :D

【JA魔改秘笈】还卡在前端的坑吗?教你如何第一次做Landing Page就上手!!

前情提要:最近的JDStore大赛,很多同学都因为卡在前端而导致作品难产,因此我跟Anndo搜集了一些购物网站常用的板块,希望能帮大家解决首页Landing Page架设的问题,将更多时间拿来增加后端功能,或是继续美化页面

  • 6/5更新:增加商品详情页面,微调商品列表页面

Github:https://github.com/xbearx1987/jdstore-theme-simple
Demo:https://jdstore-theme-simple.herokuapp.com


GEM

bootstrap-sass (*Bootstrap 模版)
font-awesome-rails (*Fontawesome 图标)

HTML + SCSS + JS

app/assets/stylesheets/application.scss (*存放所有CSS代码)
app/assets/javascripts/application.js (*存放所有JS代码)
app/views/welcome/index.html.erb (*网站首页)
app/views/common/_navbar.html.erb (*网站导览)
app/views/common/_footer.html.erb (*网站页脚)
app/views/products/index.html.erb (*产品列表)
app/views/products/show.html.erb (*产品详情)

功能 / 板块

  • Navbar
  • Navbar 特效(*滚动页面调整Navbar背景颜色)
  • Footer
  • 首页-广告轮播
  • 首页-品牌故事
  • 首页-服务优势
  • 首页-商品分类
  • 首页-推荐商品
  • 首页-用户反馈
  • 首页-合作品牌
  • 首页-立即购买
  • 产品列表
  • 产品详情

可以看得出来,这边只使用了最少的GEM及页面,保证在引用板块时,不会出现问题,且容易修改


好啦!开始进入正题!

如何快速引用板块?

Step1. 找到想要引用的板块

Step2. 到app/views/welcome/index.html.erb里找到对应的HTML代码,并复制到你的index页面里

  • 每一个板块都是用<section></section>包住
  • 请记住这个板块的Class名称,此范例为show-box

Step3. 到app/assets/stylesheets/application.scss里找到对应的CSS代码,并复制到你的application.scss页面里

  • 可直接搜索CSS名称,此范例为show-box,里面会包含所有此<section>所用到的CSS

大功告成!!!

  • 只要再依据你的个人需求,调整颜色、大小、间隔等样式即可完成具有个人特色的页面啦
  • 记得将图片更换,并且使用对应的格式,也可以参考范例中的图片尺寸做裁切


※ 如果想要引用其他板块,或是navbar、footer的样式,可以直接到对应的文档里复制HTML,并在app/assets/stylesheets/application.scss里找到对应的CSS即可 ※

修改过程中遇到任何问题,都可以在Slack:xbearx1987、anndo-2找到我或Anndo,或在下方留言,我们会尽快回复

ORID 2017/05/30 - 学习就是社交

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 新增订单管理功能
  • 直播回放 - Nic 前端知识补充
  • 直播回放 - Nic 编程知识补充
什麼部分印象最深刻?
  • 没什么印象深刻的

Reflective

今天的整体感觉如何?(情绪或感受)
  • 没什么特别感觉
高峰是什么?
  • 没有高峰
低点是什么?
  • 没有低点

Interpretive

今天有什么关键转捩点吗?
  • 朋友来寻求求职建议,聊天的过程中发现,其实做事的原理都是很类似的
有什么重要的领悟?
  • 教就是最好的学,在传授知识或经验时,可以从话语中重塑认知,全盘思考架构是否符合逻辑,并经过反覆的练习,不断地修正错误,让体系更完整
为什么很重要?
  • 闭门造车是没效率且很难突破盲点的,多与人交流、接受不同的反馈,能增加思考广度及深度,加强认知的架构、不断地迭代

Decisional

我们会如何用一句话形容今天的工作?
  • 还可以吧
明天要做什么事情?有什么需要继续努力的?
  • 学习Rails 百宝箱 第一集

ORID 2017/05/29 - 用最充足的准备,做最坏的打算

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 参加北京线下Meetup
  • 新增社群分享功能
  • 新增精选商品功能
什麼部分印象最深刻?
  • 没什么特别深刻的

Reflective

今天的整体感觉如何?(情绪或感受)
  • Soso
高峰是什么?
  • 卡了一下午的社群分享功能,晚上回家突然就搞定了
低点是什么?
  • 今天整体效率不高

Interpretive

今天有什么关键转捩点吗?
  • 晚上回家虽然很累,还是坚持把功能做完,这是对自己也是对队友的承诺
有什么重要的领悟?
  • 你想像中最坏的情景永远不会发生,可以预设最坏的结局提前准备好资源及拯救方案,但不要因此就放弃治疗、直接摆烂
为什么很重要?
  • 未来是可以透过努力去改变的,如果毫无作为,就是任凭外界决定你的结局,这是最蠢的行动策略。以最差的情况提前做准备,可以让自己有充足的心理准备,并想好因应的策略、准备好相应的资源,等到事情真的失控时,会增加很多挽救的机会

Decisional

我们会如何用一句话形容今天的工作?
  • 还可以继续加强
明天要做什么事情?有什么需要继续努力的?
  • 新增出货管理功能
  • 尝试做排序功能

ORID 2017/05/28 - 实践才能成长

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 参加极速读书会
  • 目标复盘+制定新目标
  • 新增库存限制功能
什麼部分印象最深刻?
  • 对目标作复盘时,发现计划永远都是很美好的,但最后回过头看,几乎很难完成每一项任务,现实跟理想还是有非常大的差距

Reflective

今天的整体感觉如何?(情绪或感受)
  • 挺累的,昨晚没睡好,整体效能下降
高峰是什么?
  • 晚上跟Anndo聊了许多,过程中重新检视这段时间来自己的心境变化,对于目标的执行客观的反思,受益良多
低点是什么?
  • 身体状态太差,一整天都没太有效率

Interpretive

今天有什么关键转捩点吗?
  • 制定新目标时,发现上阶段的目标虽然达成,但行动却与当初预设的差非常多,这中间包含了自我认知不够清晰,以及信息掌握得不够充足
有什么重要的领悟?
  • 道理学的多,还不如将最质朴的方法反覆实践、不断反思,践行的过程会逐渐领悟更多真理,只有当理论亲身验证后,才能了解真正的涵意,并且越用越好
为什么很重要?
  • 很多人都患有资讯恐惧症,害怕错过任何资讯,似乎没有全盘掌握,自身竞争力就会大幅下降。但事实是,看得越多、做得越少,这些看来的资讯、道理,都无法转换成自身的养分、提供成长,反而会不断阻碍前进

Decisional

我们会如何用一句话形容今天的工作?
  • 还需继续加油!!!
明天要做什么事情?有什么需要继续努力的?
  • 参加北京线下Meetup
  • 至少做一个功能

ORID 2017/05/27 - 正视问题才是解决之道

Objective

今天完成了什么事情?(与哪些人、事、物有关)
  • 三篇Javascript功能教程
  • 一篇参赛心得文
  • Review Meeting with Anndo
什麼部分印象最深刻?
  • 在复盘时突然意识到上周策略的不足,重新思考了正确的目标该如何拟定

Reflective

今天的整体感觉如何?(情绪或感受)
  • 还算可以,晚上有点累
高峰是什么?
  • 在写教程时突然发现两个Javascript可以整合在一起,并且优化写法、减少代码,写教程就是重新整理思路,真的是个不错的提取练习
低点是什么?
  • 意识到这周进度缓慢,有种无力感

Interpretive

今天有什么关键转捩点吗?
  • 复盘时重新检视这周的状况,发觉还是要设定清晰的目标及时间限制,或许才有更强大的动力去推动,增加执行能力、更积极找寻排除困难的方法,并也调整了协作模式,想办法互相支持、激励,达成正向循环,让相互之间协助、成长的效率提升
有什么重要的领悟?
  • 沟通很重要、也很难,碍于人情、面子,我们总是难以表达真实感受,甚至因此没有仔细思考问题出在哪里。但坦诚沟通,是解决问题最快的方法,用心思考、协力找出增加协作的方式,才是正确的团队运作方式
为什么很重要?
  • 一个人时只需要对自己负责,在团队中就要对所有人负责,如果自己状态不好,还未求助寻找资源,其实某方面来讲,造成任务延误,也是种不负责任的作法。健康的团队都是愿意互相协助、彼此激励的。

Decisional

我们会如何用一句话形容今天的工作?
  • 还行吧
明天要做什么事情?有什么需要继续努力的?
  • 参加极速读书会
  • 至少完成库存管理功能

【JA魔改秘笈】好的策略就是成功的一半

虽然比赛还没结束,但先来分享一下为了这次JD-Store魔改大赛所做的事前准备与策略吧,希望对大家有所帮助。

有些人会问我,为什么我跟Anndo在比赛开始那一刻,就可以丢出一个完成度较高的参赛作品。

时间回到比赛开始前一周(5/10),在XDite老师直播前一天,我们就进行了三小时的线上Meeting,确定了本次参赛的策略,大致可以分成以下三部分。


一、主题

请找自己熟悉的主题,这会让你在写文案或找素材时不会产生太多阻碍(相信很多人都在这里跌过坑,将太多时间花在找资料上,而不是编程)我跟Anndo在讨论之前就先在石墨文档上,将自己有兴趣的主题罗列上去,并且加入一个重要条件,这个主题要能作出好看的网站!(我们都很注重颜值!)也就是主题延伸的风格是双方都喜欢的,这也能减少日后前端设计时,争论的时间。

❖ 因此,我的建议是主题最好是双方都熟悉,且风格明确、素材好获取 ❖


二、功能

确定主题后,我们便设定第一阶段的时间节点,也就是比赛开始前两天(5/20),并依照这Deadline排定Must Have、Should Have、Could Have及Nice to Have四种不同程度的功能。

一开始先头脑风暴,我们共列出了19个功能,这时候不用著急,依照时间限制去排序(设定时间限制非常重要,很多人无法判断轻重缓急,就是没有把时间列入评断标准)。

最后我们的Must Have只有标准的首页、产品、购物、订单功能,加上搜索、用户、品牌、分类等之前做过的功能。也就是我们只优先做自己熟悉的功能,而不是以作出酷炫的功能为前提。(因为我们分工明确,最后又多做了四个Should Have的功能)

❖ 因此,我的建议是功能以做过且熟悉,或者是教程上的功能优先实现,不要死嗑在前端或排版上 ❖


三、分工

目前比较少听到分工打架的状况,但我也来分享一下我们的分工情形。我们是将前后端分开做,我去做首页的设计及排版(包含navbar及footer),Anndo负责所有后端MVC的建立。

等到首页完成后,我便将之前所建立好的MVC毛胚屋去做页面调整(毛胚指的是先将页面功能及动作按钮放上,不需要管设计与排版),Anndo一样继续功能开发。基本上我们在协作过程中,不会两人同时修改同个功能,或彼此冲突的部分,这也是让效率提升的重要因素。

❖ 因此,我的建议是功能分工最好明确、不互相冲突,刚开始不用担心练不到前端或后端,可以中期再调整分工 ❖


本篇写得较无章法,只是想稍微分享下心得,还请各位见谅,如果想要了解更多细节,也可以联系我们

最后分享一些我们使用的工具,仅供参考:

石墨文档:线上文档协作工具,可多人同时修改,将讨论结果记录在文档上,方便日后沟通及检视

Tower:线上任务协作工具,将待办任务、进行中任务、已完成任务呈现在表单中,让项目进度更清晰

Zoom:线上会议工具,可共享屏幕,增加讨论效率

微信:这就不用介绍了吧...XD,用于日常沟通、即时反馈


最后的最后,XDite老师写的教程基本上具备了以上所有要点 商店创意大赛参赛手册,真的不知道如何下手,遵循此手册准没错!

如果有任何任务拆解、项目协作或其他的问题都可以在下方留言,一起讨论 :D