Art of Debugging (Pengawakutuan) dan Pengenalan HTML serta CSS

Art of Debugging (Pengawakutuan) dan Pengenalan HTML serta CSS

Oleh Mas Amir

Frontend Beginner Class by Glints x Binar at Nongsa Digital Park Batam (Day 4)

• debugger is:

/dēˈbəɡər/

(n) a computer program that assists in the detection and correction of errors in computer programs.

• Belajar mengenai dasar anatomi JS error di https://blog.bugsnag.com/anatomy-of-a-javascript-error/.
• Unit testing ada banyak untuk JS, contoh: Jest, Mocha, Chai, Jasmine, dan Ava.
• Apa itu Lint/Linter? Lint-like tools generally perform static analysis of source code (https://en.wikipedia.org/wiki/Lint_(software)).

HTML dan CSS

• HTML kalau diandaikan sebagai cewek, CSS adalah cewek yang pake make up, dan cewek bermake up yg bawa tas gucci, itu adalah ber-Javascript.
• CSS yang terbaru adalah CSS3.
• CSS preprocessor → https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus.
• Root CSS → https://developer.mozilla.org/en-US/docs/Web/CSS/:root/
• CSS preprocessor yang paling sering digunakan adalah SASS dan PostCSS.
• CSS flexbox → https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
• CSS grid → https://www.w3schools.com/css/css_grid.asp.
• Gunakan CSS Library/CSS Framework untuk penulisan/pembuatan CSS yg lebih mudah.
• Contoh CSS Library/CSS Framework: Bootstrap, Miligram, Bulma, Materialize, FontAwesome, MDL Lite, Normalize, Pure CSS, dll.
• Slicing bisa menggunakan Photopea (https://www.photopea.com/) dan Macaw (http://macaw.co/).
• Website yang bermanfaat untuk CSS → https://daneden.github.io/animate.css/, https://wowjs.uk/ .
• Cari gambar PSD atau apapun free bisa dicek di https://www.freepik.com/.
• Aplikasi untuk memudahkan UI/UX untuk dislicing oleh Front End Engineer.
• Untuk font, bisa dicari di google font (https://fonts.google.com/).
• Jual-beli tema di https://envato.com/.

Selasa, 13 Noveber 2018