Cara untuk menyumbang contribution

fakhrullah commented 7 years ago

Perkara dalam isu ini, sepatutnya di tulis dalam fail CONTRIBUTING.md.

Sebelum itu, saya nak tulis draf dulu.

setelah tulis ini baru saya perasan terlalu banyak tools (eg: nextcss, postcss, gulp, nodejs) yang saya guna. Saya rasa ini tidak baik untuk menggalakkan orang menyumbang. Jadi saya terbuka dengan sebarang cadangan baik pulih proses pembinaan web ini

Web ini dibina menggunakan ExpressJS 4, MongoDB, NextCSS, PostCss, gulp dan Node js. Anda tidak perlu pandai semua yang di atas untuk menyumbang tapi untuk mencuba web di PC sendiri semua yang di atas adalah perlu. Terutamanya, node js, gulp dan mongoDB.

Jika perlu saya akan ajar tuliskan langkah demi langkah macam mana nak guna di PC anda di masa terluang.

Sumbangan boleh datang dari mana-mana bahagian sekalipun, cuma sebab saya ajak @baliomega untuk tolong saya dari segi UI/UX, saya tulis sumbangan untuk front-end dulu.

Cara menyumbang untuk front-end

Pug (nama lama Jade) template engine untuk membina struktur web (html)
Postcss dengan gulp builder untuk design web (css)
Javascript dengan gulp builder untuk interaktiviti web
Struktur web, HTML

ExpressJS membenarkan kita guna template engine yang kita suka untuk diproses jadi HTML. Saya pilih Pug Template sebab biasa guna dan betapa jernihnya enjin ni.

Untuk mengubah struktur web, pengetahuan tentang Pug Template diperlukan. Perubahan yang kecil seperti tambah div, class dan attribute tu mudah saja. Tengok kod pun akan faham caranya.

Cuma apabila anda ingin gunakan variable, loop dan lain-lain fungsi, perlukan sedikit usaha memahami Pug Template.

Saya sentiasa sedia membantu.

Design web, CSS

Saya pilih untuk guna postcss, nextcss dan gulp builder sebab ia memudahkan segala proses kerja saya. Dengan nextcss, saya boleh guna semua fungsi-fungsi terbaru seperti variable, color(), gray() dan nesting css.

Sesiapa yang dah biasa guna pre-css (scss, less) pasti tak menjadi masalah. Cuma kepada sesiapa yang tak tahu, insyaAllah saya akan luangkan masa ajar. Sila buka isu untuk soalan.

Cara menyumbang untuk design

Jom lihat macam mana saya bina dari postcss ke css, menggunakan gulp.

// gulpfile.js

// ...

gulp.task('build-css', function(){
    var processors = [
        cssnext(),
        postcssNested()
    ];

    return gulp.src(['_css/normalize.css', '_css/main.css'])
        .pipe(concat('main.css'))
        .pipe(postCss(processors))
        .pipe(gulp.dest('public/css/'))
        .pipe(cssnano({
            discardComment:true
        }))
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('public/css/'))
        .pipe(browserSync.stream());
})

// ...

Jadi, ini bermakna sekiranya anda nak ubah css untuk web ini, sila ubah _css/main.css.

Atau buat fail baru dalam _css/ direktori kemudian ubah gulpfile.js.

Interaktiviti, JS

Saya belum guna js untuk browser lagi. Sebaiknya saya nak guna gulp untuk gabungkan (concat) dan kompres (minify).

Untuk back-end

baliomega commented 7 years ago

Salam Fakrullah. Saya sudah pun lihat demo 'Nasihat' web app dan tahniah kerana berjaya menghasilkan UI berdasarkan mockup design yang saya buat. Maaf kerana tidak turut serta pada peringkat awal pembinaan 'Nasihat'. Komen saya, ada beberapa bahagian yang boleh ditambah baik seperti icon, font dan design consistency dalam desktop & mobile. Saya kini sudah tahu menggunakan git, grunt & LESS/SASS dan mampu menyumbang dalam projek ini. Cuma sekarang saya perlukan bantuan untuk memasang framework atau apa-apa tool yang berkaitan untuk saya run 'Nasihat' dalam localhost PC. Saya akan buat perubahan, commit & push to repo. Kalau semua ok, saya akan buat pull request dan saudara Fakrullah boleh merge ke master.

fakhrullah commented 7 years ago

Waalaikumsalam, alhamdulillah siap demo je, tp xlengkap lg.

Tu lah sy silap, sepatutnya sy tulis bagainama cara nak run dekat README InshaAllah, nnt sy tulis step by step dekat README

Secara ringkas nya:

install nodejs
install mongodb, start mongodb mongod
git clone project ni
cd project ni, npm install
run project node app.js

baliomega commented 7 years ago

Baiklah. Sekiranya ada apa-apa halangan saya akan tulis di issue ini. Bagaimana dengan ExpressJS 4, NextCSS, PostCss? Adakah perlu di install?

fakhrullah commented 7 years ago

Oh, saya guna build tool, gulp. Tak pernah guna grunt, tapi sama je kan. Untuk gulp semua setting dalam gulpfile.js. Run gulp je, semua setel.

npm install akan install semua dependecies, next-css, postcss dan semua js. Jadi tak perlu install ape2 dah. Cuma kena tahu syntax nextCss.

OR nak ubah guna grunt, less, sass je? Boleh je, lagipun tak ramai lagi guna postCss. Kalau boleh nk mudahkan untuk orang join.

baliomega commented 7 years ago

Adakah ia mengambil masa untuk tukar menggunakan grunt & SASS? Kalau lama, saya rasa kita biarkan dahulu.

fakhrullah commented 7 years ago

Tak tahu lah. Tak pernah guna grunt & SASS. Grunt install, pastu tulis configurationnya kan? Sikit je gulpfile tu, tak lama kot. Cuma tak pernah guna, ambil masa sikit nak belajar.

PostCSS dlm _src/main.css tu je, 300 line lebih kurang. PostCSS ke SASS, kena tukar cara pemikiran lah sikit, sebab SASS lagi banyak fungsikan.

Saya lebih selesa PostCSS and gulp, tapi tak kisah pun, kalau nk belajar grunt & SASS. Boleh je tambah pengetahuan.

baliomega commented 7 years ago

I think we should leave as it is. Quite impressed with PostCSS functions & plugins. It's a new knowledge for me as front-end dev. There is 1 article said PostCSS is more powerful than SASS.

takpe kan saya berbahasa Inggeris sebab lebih senang menyampaikan maksud tersirat :)

fakhrullah commented 7 years ago

ok. kekalkn postcss. English pun OK.

fakhrullah / nasihati