Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Atom

Bagaimana Membuat Tema Custom untuk Atom

Read Time: 18 mins

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Atom, editor kode baru yang diluncurkan oleh GitHub adalah satu dari aplikasi yang muncul ke permukaan yang memungkinkan teknologi web seperti LESS, JavaScript dan HTML untuk menjalankan fungsinya di dalam lingkungan desktop secara lokal. Atom memasang dan menjalankan aplikasi desktop “regular”, tetapi ketika ia dibuka maka akan tampil seperti yang biasa ditemui para pengembang web.

Atom adalah “spesialisasi varian dari Chromium” dan ketika menjalankannya dalam mode pengembang maka ia akan memberikan akses pada “Developers Tools” yang sama dengan yang mungkin Anda gunakan pada Chrome. Jadi, seperti halnya yang dapat Anda lakukan pada aplikasi web online, Anda dapat memeriksa kode di balik elemen apa saja dari antar muka aplikasi dan melihat apa yang membuatnya menjadi demikian:

Apa artinya ini pada keadaan praktis adalah bahwa siapapun yang berpengalaman dengan desain web dan pengembangan akan segera menemukan kemiripan dengan cara kerja Atom, dan akan sangat mungkin menjadi lebih nyaman membuat modifikasi dan memberikan perbaikan dengan program yang setara. Model visual Atom didorong oleh CSS, dihasilkan dari LESS jadi Anda dapat memodifikasi tampilannya dengan cara yang sama dengan website yang menggunakan LESS seperti keinginan Anda.

Atom memiliki dua tipe “tema” yang bertanggung jawab untuk tampilannya:

Tema Sintaks yang mengontrol segalanya pada ruang dalam editor, mis. kolom samping, nomor baris, dan kode area.

Tema UI mengontrol sisanya seperti tab, sidebar, tombol, overlay, pesan, dll.

Pada tutorial ini Anda akan mempelajari bagaimana membuat kedua tipe tema ini, menghasilkan mereka dalam berpasangan sehingga seluruh antarmuka dapat ter-style dengan serempak. Mari mulai!

Memulai

Pada saat ini Atom tersedia untuk Mac saja, dan selama fase beta dapat diakses via undangan. Jika Anda belum memiliki undangan maka saran saya adalah dengan menaruh permintaan pada Twitter atau pada Forum Atom dan seseorang akan mengirimkannya untuk Anda. Unduh dan pasang seperti aplikasi lainnya.

Mengembangkan tema akan melibatkan beberapa penggunaan baris perintah khusus Atom. Jadi, hal pertama yang harus Anda lakukan adalah untuk memasang paket yang akan memungkinkan perintah tersebut. Setelah menjalankan Atom untuk pertama kali, pergi dan pilih Atom > Install Shell Commands, yang akan memasang perintah atom dan apm (atom package manager).

Saya juga menyarankan untuk menggunakan sebuah aplikasi yang memungkinkan Anda untuk membuka sambungan dari folder apa saja yang tengah Anda lihat pada Finder, karena hal ini akan memudahkan untuk menjalankan perintah pada lokasi yang tepat. Saya pribadi menggunakan XtraFinder gratis untuk menambahkan opsi “Sambungan Baru di Sini” pada konteks menu Finder.

Membuat Tema UI Baru

Proses dasar dari membuat tema UI Atom baru adalah untuk menjadikan satu, dua tema default tersedia dari GitHub, berikan nama yang Anda sukai, dan sunting file di dalamnya.

Untuk melakukan hal ini, mulailah dengan memastikan Anda memiliki akun pada GitHub, dan GitHub untuk Mac (kecuali Anda lebih memilih menggunakan garis komando) terpasang. Kemudian pergi ke gudang untuk Tema Gelap UI Atom atau tema terang UI Atom. Pada tutorial ini kita akan menggunakan warna palet gelap, jadi kita akan menyatukan tema default gelap.

Pada bagian sudut kanan atas dari gudang original UI klik tombol “Fork”:

Hal ini akan membuat duplikat dari gudang atas nama akun Anda pribadi, mis. akunanda/ atom-dark-ui. Hal selanjutnya yang perlu Anda lakukan adalah memberikan gudang ini nama Anda. Pada bagian kanan sidebar dari gudang fork Anda, klik item menu “Setting/pengaturan”.

Pada bagian atas halaman “Setting/pengaturan” Anda akan melihat kolom untuk nama gudang. Ketiklah nama baru, nama pilihan Anda, (untuk saya “nuance-dark-ui”), pada kolom ini pastikan menyertakan “-ui” pada bagian akhir, kemudian klik “Rename”:

Anda sekarang telah siap untuk mengunduh tema pada lingkungan offline Anda sehingga Anda dapat mulai menyuntingnya. Untuk melakukan ini, kembali pada halaman utama gudang Anda kemudian lokasikan dan klik tombol “Clone in Desktop” pada sidebar:

"GitHub untuk Mac" kemudian akan mengunduh gudang untuk Anda ke dalam lokasi GitHub default Anda. Dari daftar gudang Anda pada “GitHub untuk Mac”, klik kanan pada tema UI yang baru saja Anda duplikasikan dan pilih “Show in Finder”.

Jendela Finder akan terbuka untuk menunjukkan Anda folder tema UI di dalam folder GitHub. Klik dua kali untuk memasuki folder sebenarnya dan melihat isinya.

Buka Atom dalam Dev Mode

Buka sambungan baru pada lokasi ini dan jalankan perintah atom --dev

Perintah ini akan membuka Atom dalam mode pengembang, menunjukkan Anda file tema dan struktur folder pada sidebar. Pada sidebar ini, klik file “package.json” untuk membukanya untuk disunting, kemudian ubah namanya, nomor versi, dan deskripsi. Sekali lagi, pastikan Anda mempertahankan “-ui” pada akhir nama tema, kemudian simpan:

Terakhir, Anda perlu membuat Atom mengetahui bagaimana mengakses folder tema Anda dari folder GitHub local. Kembali pada sambungan Anda, yang harusnya masih berda di folder tema Anda, dan jalankan perintah apm link

Memilih Tema Anda

Sekarang kembali pada Atom dan tekan cmd-alt-ctrl-L atau pilih View > Reload dari menu atas untuk memuat antarmuka, yang akan menyegarkan daftar tema UI yang tersedia, memungkinkan milik Anda untuk dipilih.

Dari menu atas pilih Atom > Setting untuk membuka halaman pengaturan dan klik “Themes” pada sidebar kiri panel. Anda harusnya melihat tema Anda pada daftar ini dengan label "UI Themes" jadi segera pilih: 

Tema UI baru Anda sekarang telah aktif dan siap untuk disunting. Namun, sebelum kita melanjutkan kita akan menghasilkan tema sintaksis juga sehingga Anda dapat menyunting keduanya dalam waktu bersamaan, mengawasi bagaimana kedua tema ini bekerja sama.

Membuat Tema Sintaks

Membuat tema sintaksis baru adalah proses yang lebih mudah daripada tema UI.

Pada Atom, tekan cmd-shift-P untuk mengaktifkan perintah palet, kemudian mulailah mengetik “Hasilkan Tema Sintaksis”. Ketika Anda melihat Package Generator: Generate Syntax Theme muncul, klik untuk mengeksekusi perintah:

Sebuah jendela akan muncul yang Anda dapat memasukkan jalan dan nama untuk tema sintaksis Anda. Apapun pilihan Anda untuk nama tema Anda, ia harus berakhiran “-syntax”. Misalkan tema UI saya adalah “nuance-dark-ui”, saya menamakan tema sintaksis saya “nuance-dark-syntax”.

Setelah memasukkan jalan dan nama tema tekan Enter untuk melanjutkan.

Atom akan menghasilkan tema sintaksis baru unutk Anda dan bukalah pada sidebar. Sekarang Anda dapat pergi ke Atom > Setting lagi dan pilih tema sintaksis Anda di samping label Syntax Theme:

Membuka Tema UI dan Sintaksis pada Mode Pengembang

Karena kita akan bekerja pada tema UI dan sintaksis bersamaan, kita ingin untuk mengakses keduanya dari file masing-masing sidebar. Kita juga ingin berada pada mode pengembang/ “Dev Mode” ketika menyunting file ini. Karena, ini berarti Atom akan secara otomatis menyegarkan tampilannya ketika kita menyimpan perubahan yang kita buat.

Ikuti langkah-langkah berikut untuk membuka kedua tema pada mode pengembang, dan gunakan proses yang sama kapan saja di masa depan ketika Anda perlu kembali dan menyunting tema Anda.

Bukalah Pengaturan

Pergi ke Atom > Preferences untuk membuka halaman pengaturan.

Buka Folder Atom Lokal

Klik Open ˜/.atom pada bagian bawah pengaturan di sisi kiri sidebar untuk membuka folder Atom lokal Anda pada Atom sidebar:

Tampilkan di Finder

Pada Atom sidebar, klik kanan salah satu folder tema sintaksis atau tema UI Anda dan pilih Show in Finder:

Pergi ke Terminal

Keluar dari Atom untuk menutup contoh yang ada (ini bukan pada mode pengembang sehingga kita tidak membutuhkannya), kemudian pada jendela Finder yang menampilkan folder tema Anda bukalah sambungan baru:

Buka di Mode Pengembang

Jalankan perintah atom --dev untuk membuka folder pada Atom dalam mode pengembang. Anda sekarang harusnya melihat kedua tema pada sidebar:

Karena kita berada di mode pengembang, kita sekarang dapat membuka file tema apa saja dari sidebar dan perubahannya akan secara otomatis terlihat pada antarmuka Atom.

Sekarang kita telah siap menuju proses desain!

Maket Tema UI dan Sintaksis Anda

Anda mungkin harus melakukan sedikit perbaikan untuk mendapatan warna tema Anda sesuai dengan keinginan Anda, jadi mendesain langsung dalam kode kelihatannya bukan pendekatan yang paling efisien.

Pada file sumber yang terlampir di tutorial ini Anda akan menemukan sebuah PSD bernama “colormockup.psd” yang mengandung elemen antarmuka yang cukup dan kode simulasi untuk memfasilitasi pemilihan palet warna Anda. Gunakan PSD ini untuk memvisualisasikan warna yang Anda ingin gunakan pada tema UI dan Sintaksis Anda.

Saya pribadi menyukai warna bumi, tidak terlalu cerah dan kontras rendah yang tidak terlalu mencolok mata, sehingga saya memilih ini:

Ini merupakan pilihan pribadi saya, tetapi Anda tentu saja dapat memilih model apapun yang Anda sukai.

Ketika maket Anda telah selesai, Anda siap untuk memindahkan nilai warna Anda pada kode LESS tema Anda. Kita akan mulai dengan tema sintaksis karena lebih sederhana, menggunakan variabel yang lebih sedikit daripada tema UI.

Membuat Kode Warna Tema Sintaksis Anda

Pada sidebar Atom Anda, lebarkan folder tema sintaksis Anda dan bukalah stylesheets > color.less. Anda akan melihat ini:

Jika Anda mengubah nilai dari variabel berikut ini, kemudian simpan file, Anda harusnya telah dapat melihat pembaruan area sintaksis. Misalnya, jika Anda mengubah nilai dari @dark-gray menjadi #F00 Anda akan melihat latar belakang kolom samping berubah warna:

Mmm, bagus

Warna yang terdaftar pada file ini akan terpetakan pada aspek beragam dari sintaksis melalui file “syntax-variables.less” dan “base.less”. Bukalah file ini dan ambil beberapa saat untuk memperhatikannya. Pada file “syntax-variables.less” Anda akan melihat variabel diambil dari file “colors.less”. Namun, pada file “base.less” Anda akan melihat variabel dari kedua file, “color.less” dan “syntax-variables.less”.

Sebuah Catatan pada Variabel LESS

Karena kita menambahkan skema warna pada tema ini kita akan mengubah variabel nilai pada “color.less” yang artinya nama mereka mungkin tidak akan merefleksikan warna yang mereka kandung. Misalnya, ketia variabel @purple digunakan, kita sebenarnya menggunakan corak hijau.

Untuk menjadi menyeluruh, Anda mungkin secara ideal membuat nama baru variabel yang merefleksikan skema warna baru, namun untuk tujuan tutorial ini saya tidak ingin membawa Anda untuk mengubah setiap contoh dari nama lama variabel pada file “syntax-variables.less” dan “base.less”.

Jadi, meskipun mungkin akan agak aneh, kita akan tetap mengalokasikan warna skema baru kita langsung pada nama variabel yang telah ada dalam “color.less”. Dengan ini Anda hanya perlu menyunting sebuah file untuk membuat tema sintaksis Anda.

Mengetahui di mana Variabel Masing-masing Warna Digunakan

Untuk membantu Anda memahami variabel mana yang mempengaruhi aspek mana dari skema warna, gantikan kode penuh dari file “color.less” dengan ini:

Komentar yang ditambahkan pada bagian pertama memberitahukan Anda di mana masing-masing variabel warna “abu-abu” digunakan pada area sintaksis.

Bagian kedua dengan variabel tujuh warna lebih kompleks karena masing-masing mempengaruhi tipe berbeda dari kode. Untuk mendapatkan ide kasar bagaimana variabel ini akan muncul, buat file PHP baru dan tempel ini:

Catatan: file ini juga termasuk dalam file sumber.

Ketika Anda melihat kode di atas pada Atom, Anda akan melihat contoh bagaimana masing-masing dari tujuh variabel warna terlihat ketika diterapkan pada sintaksis. Kode yang sama digunakan pada “colormockup.psd” tersedia sehingga Anda dapat melihat bagaimana warna-warna terhubung.

Periksa komentar yang dimasukkan untuk deskripsi variabel warna mana yang diasosiasikan dengan masing-masing elemen kode. Anda dapat menggunakan kode ini bersamaan dengan PSD untuk membantu Anda mengetahui variabel warna yang Anda pilih yang harus Anda petakan pada file “color.less”.

Modifikasi Variabel Warna “Abu-abu”

Kita akan mulai dengan membawa warna “abu-abu” dari maket PSD Anda.

Variabel pertama yang didaftarkan pada “color.less” adalah @very-light-gray yang kita ketahui (dari komentar yang baru saja Anda tambahkan), digunakan pada “Teks polos dan nomor baris”. Pergi pada PSD Anda dan salin kode hex yang Anda  pilih untuk nomor baris. Temple/paste nilai itu, yakni #9b836 pada “color.less” untuk menggantikan default untuk @avery-light-gray.

Selanjutnya, dapatkan kode hex warna yang Anda pilih pada teks komentar dan tambahkan pada variabel @light-gray. Lanjutkan model ini hingga lima variabel “abu-abu” terperbarui. Untuk tema “nuance-dark-syntax” saya menggunakan:

Simpan file "colors.less" dan Anda dapat segera melihat area sintaksis Anda terlihat sedikit berbeda:

Modifikasi Variabel Tujuh “Warna”

Sekarang untuk membawa variabel warna pada bagian kedua.

Pertama dari variabel ini adalah @cyan, dan isi dari file PHP yang kita buat sebelumnya mengandung komentar array = .support.function > @cyan, memeberitahu kita bahwa warna ini digunakan pada kata “array”. Pergi ke PSD Anda dan salin kode hex yang Anda terapkan pada kata “array” di sana. Pada tema “nuance” adalah #446675

Ulangi proses yang sama dalam menemukan nama variabel pada komentar di file PHP Anda untuk melihat tipe kode ia diterapkan, kemudian salin pada warna yang Anda pilih dari PSD Anda.

Untuk tema “nuance” saya menggunakan:

Setelah menyimpan, lihatlah file PHP Anda kembali dan harusnya Anda melihat semua warna baru terefleksikan, cocok dengan PSD Anda:

Tema sintaksis Anda sekarang selesai! Sekarang waktunya bergerak pada tema UI.

Kode dalam Warna Tema UI Anda

Menambahkan skema warna Anda pada tema UI agak sedikit lebih pelik daripada tema sintaksis karena tema ini menggunakan sedikit lebih banyak variabel. Tambahan, tidak semua warna pada tema default terdefinisikan sebagai variabel sehingga dalam beberapa kasus Anda harus menyunting model sesungguhnya.

Mayoritas warna yang digunakan pada tema UI didefinisikan sebagai file “ui-variables.less”. Segeralah dan perbesar folder tema sintaksis Anda dan bukalah untuk menyunting dari folder “stylesheets”.

Nama Variabel Deskriptif dan Styleguide

Atom berjalan dengan “Styleguide” yang sangat berguna yang akan memberikan Anda pratinjau elemen UI yang dipengaruhi oleh tema Anda. Bukalah dengan pergi ke Packages > Styleguide > Show.

Untuk banyak bagian Anda akan menemukan nama variabel dalam file “ui-variabels.less” bersifat deskriptif dan saling berhubungan, berurutan dengan elemen UI yang terdaftar pada Styleguide. Contohnya, beberapa variabel awal menggunakan prefiks @text-color dan berhubungan dengan bagian pertama dari Styleguide, diberi label “Kelas Teks”.

Jika Anda tidak yakin variabel mana yang akan memberi efek apa, jangan takut untuk mengubah variabel secara acak untuk melihat aspek Styleguide mana yang berubah.

Menemukan Warna UI yang Tidak Terdefinisikan sebagai Variabel

Tidak semua warna pada tema default UI diasosiasikan sebagai variabel LESS dalam file “ui-variables.less”. beberapa warna disandikan langsung pada file LESS lainnya pada tema.

Jika Anda tidak yakin dari mana warna UI berasal dan kelihatannya tidak memiliki asosiasi variabel, gunakan inpektur elemen (inspector element) pada area yang dipertanyakan untuk menemukan nama kelas yang bertanggung jawab terhadap warna tersebut. Kemudian jalankan pencarian di dalam Finder untuk nama kelas tersebut untuk mencoba dan menentukan tema file LESS mana yang mengandung kelas ini.

Contohnya, sidebar memiliki kode hex warna #303030 pada tema default yang tidak terdefinisikan di manapun dalam “ui-variables.less”. memeriksa elemen akan menunjukkan bahwa kode hex berasal dari kelas .focusable-panel.

Menjalankan pencarian Finder di dalam folder UI untuk “focusable-panel” mengungkapkan kelas ini terkandung pada file “tree-view.less”.

File ini dapat disunting, meletakkan sebuah variabel dari file “ui-variables.less” dan bukan hardcoded nilai hex.

Terkadang pencarian Anda tidak akan memperlihatkan hasil, untuk alasana apapun, Anda mungkin harus melakukan cara yang sulit dan secara manual memeriksa satu per satu file tema UI hingga Anda menemukan kelas yang ingin Anda ubah.

Menambahkan Vaiabel Warna Anda pada Tema UI

Tema UI tidak dapat mengakses variabel warna yang didefinisikan oleh tema sintaksis, namun kita ingin menggunakan warna yang sama untuk kedua tema sehingga mereka cocok. Karena itu, kita perlu menggandakan variabel warna dari tema sintaksis pada tema UI kita.

Pada bagian atas tema “ui-variables.less”, tempelkan semua variabel dari tema sintaksis Anda:

Juga variabel ini, ada tambahan lima variabel custom yang saya definisikan untuk dibawa pada semua warna dari maket saya, juga tempelkan pada bagian atas file “ui-variables.less”:

Semua variabel ini akan digunakan pada berbagai lokasi, tetapi komentar yang termasuk memberikan contoh penggunaannya masing-masing, yang akan membantu Anda menentukan kode warna mana yang harus Anda salin dari PSD Anda. Juga, di manapun yang mungkin, layer pada PSD telah diberi nama dengan rujukan pada variabel yang dipengaruhinya.

Mendefinisikan Variabel Tambahan dan Memperbaiki File LESS

Seperti yang saya telah sebutkan di atas, beberapa nilai warna tema default merupakan hardcoded bukan menjadi variabel yang dapat diakses. Dalam beberapa kasus variabel terdefinisikan, tetapi dalam file selain file utama “ui-variables.less”. untuk membuatnya menjadi lebih mudah untuk menerapkan skema warna kita secara sentral melalui file “ui-variables.less”, kita akan mendefinisikan beberapa variabel ekstra dan membuat beberapa penyesuaian pada beberapa file tema.

Tempelkan kode berikut ini pada “ui-variables.less” Anda di bawah variabel warna yang Anda tambahkan pada langkah sebelumnya:

Catat komentar yang termasuk untuk tetap memantau file mana yang akan dimodifikasi dan pada baris mana untuk menggunakan variabel ini.

Dengan variabel baru Anda pada tempatnya, Anda sekarang dapat membuat suntingan berikut pada file tema:

tree-view.less > line 8: ubah menjadi background: @tree-view-selected-bg;

tree-view.less > line 15: ubah menjadi background: @sidebar;

tree-view.less > line 19: ubah menjadi background: @sidebar-focus;

tabs.less > line 45: ubah menjadi:

tabs.less > line 4 dan 5: ubah menjadi:

Dua bais ini dihapus dari “tooltips.less” karena sekarang variabel didefinisikan pada file utama "ui-variables.less".

Kita sekarang telah membuat semua penyesuaian untuk bersama dengan variabel kita yang baru didefinisikan, tetapi ada beberapa sentuhan lagi yang perlu kita lakukan untuk mengubah warna hardcoded dan mendapatkan semua file tema bekerja dengan baik dengan variabel kita:

utilities.less > line 6: ubah menjadi background: darken(@button-background-color, 5%);

tree-view.less > line 29: ubah menjadi color: lighten(@very-light-gray, 15%) !important;

panels.less > line 50: ubah menjadi

...buat gradient menjadi lebih lembut untuk menyesuaikan dengan warna baru kita.

tooltips.less > line 11: ubah menjadi color: saturate(darken(@red, 10%), 5%);

Memetakan Variabel Warna Kita

Kita sekarang telah memiliki semua warna dari maket PSD yang telah terdefinisikan sebagai variabel, dan semua filetema siap untuk merespon pada definisi dalam "ui-variables.less".

Yang terseisa sekarang adalah untuk memetakan variabel warna custom kita pada variabel default yang telah di tempatnya ketika kita pertama kali membuka file "ui-variables.less". tidak perlu mengubah nilai pada setiap variabel default, karena beberapa dari mereka mendukung nilai satu sama lain pada file yang sama. Contohnya, kita memiliki @text-color-highlight: #fff; dan nilai ini dilanjutkan dengan baris selanjutnya pada @text-color-selected: @text-color-highlight;.

Ganti semua kode antar komentar // Colors dan komentar // Sizes dengan kode ini:

Akan menjadi sedikit berlebihan untuk menjelaskan setiap baris dari kode ini tetapi carilah komentar // changed pada akhir baris untuk melihat di mana variabel warna custom kita dipetakan pada variabel tema default.

Ingat, jika Anda tidak yakin di mana variabel ini diterapkan Anda dapat memeriksanya pada hubungan merka dengan Styleguide, seperti yang telah dijelaskan di atas.

Setelah menyimpan file "ui-variables.less" Anda, (dan lainnya yang Anda sunting), antarmuka Anda sekarang akan terlihat seperti ini:

Jika Anda menekan ctrl-shift-P untuk menampilkan perintah palet maka akan terlihat:

Dan jika Anda menekan ctrl-F panel “find” pada bagian bawah editor akan terlihat:

Kesimpulan

Anda dapat mengunduh “Nuance” UI lengkap dan tema sintaksis pada GitHub:

Anda dapat memasangnya langsung pada Atom dengan pergi ke Atom > Preferences > Themes dan mengetik “Nuance” pada kolom saring.

Ketika Anda telah menyelesaikan sintaksis Anda sendiri dan/atau tema UI Anda memiliki pilihan untuk membagikannya dengan pengguna Atom lainnya sebagai paket. Untuk melakukan ini Anda harus memiliki gudang GitHub terbaru untuk masing-masing. Untuk petunjuk bagaimana mempublikasikan paket Atom lihatlah Atom Docs: Mempublikasikan Paket

Pada tutorial ini kita telah mempertahankan kode file LESS yang ada sebanyak mungkin, berfokus pada mengerjakan variabel. Untuk itu, jika Anda ingin menggali lebih dalam pada kode tema Anda dapat mengontrol tampilan aspek virual manapun dari sintaksis dan UI, dari bentuk tab Anda hingga warna kawat bergerigi dan operator.

Jika Anda mengharapkan beberapa potongan kode atau elemen UI Anda berbeda, cukup buka Atom mode pengembang dan gunakan element inspector untuk melihat jika ada kelas yang dapat Anda targetkan. Sebagai aturan umum, Anda dapat mengatur hampir segalanya.

Tentu saja, walau pada mode beta, Atom terlihat sangan menjanjikan pada kemampuannya untuk membuat pengaturan menjadi dapat diakses oleh semua orang dengan latar belakan teknologi website. Cobalah untuk bekerja menggunakan Atom, Anda akan terkejut melihat apa yang dapat Anda lakukan!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.