CodePen: ສ້າງ, ທົດສອບ, ແບ່ງປັນແລະຄົ້ນພົບ HTML, CSS, ແລະ JavaScript

Codepen: ສ້າງ, ທົດສອບ, ແລະຄົ້ນພົບລະຫັດ Front-End

ສິ່ງທ້າທາຍ ໜຶ່ງ ທີ່ມີລະບົບການຈັດການເນື້ອຫາແມ່ນການທົດສອບແລະການຜະລິດເຄື່ອງມືຂຽນ. ໃນຂະນະທີ່ນັ້ນບໍ່ແມ່ນຄວາມຕ້ອງການ ສຳ ລັບຜູ້ເຜີຍແຜ່ສ່ວນໃຫຍ່, ເປັນການພິມເຜີຍແຜ່ເຕັກໂນໂລຢີ, ຂ້ອຍມັກການແລກປ່ຽນສະຄິບທີ່ເຮັດວຽກເປັນບາງຄັ້ງຄາວເພື່ອຊ່ວຍຄົນອື່ນໆ. ຂ້ອຍໄດ້ແບ່ງປັນວິທີການ ນຳ ໃຊ້ JavaScript ເພື່ອກວດສອບຄວາມເຂັ້ມແຂງຂອງລະຫັດຜ່ານ, ວິທີການ ກວດເບິ່ງ syntax ທີ່ຢູ່ອີເມວດ້ວຍການສະແດງອອກແບບປົກກະຕິ (Regex), ແລະທີ່ຜ່ານມາໄດ້ເພີ່ມສິ່ງນີ້ ເຄື່ອງຄິດໄລ່ເພື່ອຄາດຄະເນຜົນກະທົບການຂາຍຂອງການທົບທວນທາງອິນເຕີເນັດ. ຂ້ອຍຫວັງວ່າຈະເພີ່ມຫລາຍສິບເຄື່ອງມືໃນເວບໄຊທ໌້ແຕ່ວ່າ WordPress ບໍ່ໄດ້ມີຜົນດີຕໍ່ການເຜີຍແຜ່ແບບນີ້…ມັນເປັນລະບົບເນື້ອຫາ, ບໍ່ແມ່ນລະບົບການພັດທະນາ.

ສະນັ້ນ, ເພື່ອເຮັດໃຫ້ສະຄິບນ້ອຍໆຂອງຂ້ອຍເຮັດວຽກຂ້ອຍມັກໃຊ້ CodePen. CodePen ແມ່ນເຄື່ອງມືທີ່ຖືກຈັດແຈງຢ່າງລະອຽດກັບແຜງ HTML, ແຜງ CSS, ແຜງ JavaScript, Console ແລະຖືກເຜີຍແຜ່ລະຫັດຜົນ. ແຕ່ລະກະດານມີຂໍ້ມູນໃນເວລາທີ່ທ່ານເມົາມັນເກີນອົງປະກອບເພື່ອໃຫ້ທ່ານເຂົ້າໃຈສິ່ງທີ່ເປັນໄປໄດ້, ພ້ອມທັງການຂຽນລະຫັດສີຂອງ HTML, CSS, ແລະ JS ຂອງທ່ານເພື່ອຊ່ວຍໃຫ້ທ່ານແກ້ໄຂແລະຂຽນງ່າຍຂຶ້ນ.

CodePen ແມ່ນສະພາບແວດລ້ອມການພັດທະນາສັງຄົມ. ໃນຫົວໃຈຂອງມັນ, ມັນຊ່ວຍໃຫ້ທ່ານຂຽນລະຫັດໃນ browser, ແລະເບິ່ງຜົນໄດ້ຮັບຂອງມັນໃນຂະນະທີ່ທ່ານສ້າງ. ບັນນາທິການລະຫັດ online ທີ່ມີປະໂຫຍດແລະເປີດເສລີ ສຳ ລັບນັກພັດທະນາທັກສະຕ່າງໆ, ແລະໂດຍສະເພາະແມ່ນການສ້າງຄວາມເຂັ້ມແຂງໃຫ້ຄົນທີ່ຮຽນຮູ້ລະຫັດ. CodePen ສຸມໃສ່ຕົ້ນຕໍກ່ຽວກັບພາສາທາງ ໜ້າ ເຊັ່ນ: HTML, CSS, JavaScript, ແລະ syntaxes ທີ່ຖືກປັບປຸງກ່ອນທີ່ຈະກາຍເປັນສິ່ງເຫຼົ່ານັ້ນ.

ກ່ຽວກັບ CodePen

ດ້ວຍ CodePen, ຂ້ອຍສາມາດເຮັດທຸກວຽກທີ່ ຈຳ ເປັນ ເຜີຍແຜ່ເຄື່ອງຄິດເລກ ຂ້ອຍຝັງຢູ່ໃນເວັບໄຊທ໌້. ການສ້າງຫຼາຍທີ່ສຸດກ່ຽວກັບ CodePen ແມ່ນສາທາລະນະແລະເປີດເຜີຍ. ພວກມັນແມ່ນສິ່ງທີ່ມີຊີວິດທີ່ຄົນອື່ນແລະຊຸມຊົນສາມາດພົວພັນ, ຈາກຫົວໃຈທີ່ລຽບງ່າຍ, ຈົນອອກຈາກ ຄຳ ເຫັນ, ໄປຫາການຄົ້ນຫາແລະປ່ຽນແປງເພື່ອຄວາມຕ້ອງການຂອງຕົນເອງ.

CodePen - ເຄື່ອງຄິດໄລ່ ສຳ ລັບການຄາດຄະເນຜົນກະທົບການຂາຍຂອງການທົບທວນທາງອິນເຕີເນັດ

ດ້ວຍ CodePen, ທ່ານສາມາດປ່ຽນມຸມມອງຂອງທ່ານຖ້າທ່ານຕ້ອງການໃຫ້ແຖບເລື່ອນຢູ່ເບື້ອງຊ້າຍ, ຂວາ, ຫລືລຸ່ມທີ່ທ່ານເຮັດວຽກ…ຫຼືເບິ່ງ HTML ໃນແຖບ ໃໝ່. ມຸມເບິ່ງຂ້າງໆເຮັດວຽກໄດ້ດີທີ່ສຸດເພື່ອທົດສອບການຕັ້ງຄ່າຕອບສະ ໜອງ ຂອງທ່ານຕັ້ງແຕ່ທ່ານສາມາດປັບຂະ ໜາດ ຂອງ ໜ້າ ຈໍທີ່ສາມາດເບິ່ງໄດ້.

ທ່ານສາມາດຈັດຕັ້ງແຕ່ລະສະຄິບທີ່ເຮັດວຽກຂອງທ່ານເຂົ້າໃນ Pens, ສົມທົບພວກມັນເຂົ້າໃນໂຄງການ (ບັນນາທິການຫຼາຍເອກະສານ), ຫຼືແມ້ກະທັ້ງສ້າງສະສົມ. ໂດຍພື້ນຖານແລ້ວມັນເປັນເວັບໄຊທ໌ການເຮັດວຽກ ສຳ ລັບລະຫັດທາງ ໜ້າ ເຊິ່ງທ່ານສາມາດຕິດຕາມຜູ້ຂຽນອື່ນໆ, ແບ່ງໂຄງການທີ່ສາມາດແບ່ງປັນເປັນສາທາລະນະອື່ນໆເຂົ້າໃນຕົວທ່ານເອງເພື່ອດັດແປງ, ແລະຍັງຮຽນຮູ້ທີ່ຈະເຮັດບາງສິ່ງທີ່ມ່ວນຊື່ນຜ່ານການທ້າທາຍ

ທ່ານສາມາດປະຫຍັດເປັນ GitHub Gist, ສົ່ງອອກເປັນ zip, ແລະແມ້ກະທັ້ງ ຕິດຢູ່ ປາກກາໃນບົດຂຽນດັ່ງນີ້:

ເບິ່ງປາກກາ
ຄາດຄະເນຜົນກະທົບການຂາຍຂອງການທົບທວນຄືນອອນໄລນ໌
by Douglas Karr (@douglaskarr)
on CodePen.


ຂໍ້ ຈຳ ກັດ ໜຶ່ງ ຂອງບັນນາທິການ Pen ແມ່ນປະລິມານລະຫັດຂອງລະຫັດ. ທ່ານອາດຈະບໍ່ເຄີຍແລ່ນຜ່ານບັນຫານີ້, ເພາະວ່າບັນນາທິການຄວນປັບ ໄໝ ກັບລະຫັດຫຼາຍຮ້ອຍຫຼືຫຼາຍພັນສາຍ. ແຕ່ເມື່ອພວກເຂົາເລີ່ມກົດລະຫັດ 5,000 - 10,000 ຫຼືຫຼາຍກວ່ານັ້ນ, ທ່ານຈະເຫັນວ່າບັນນາທິການເລີ່ມຕົ້ນລົ້ມເຫລວ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ທ່ານສາມາດເພີ່ມເອກະສານອ້າງອີງຈາກພາຍນອກເຂົ້າໃນ stylesheets ຫຼື JavaScript ທີ່ໂຮດຢູ່ບ່ອນອື່ນ!

ຂ້ອຍຂໍແນະ ນຳ ໃຫ້ເຈົ້າລົງທະບຽນ. ທ່ານຈະຖືກສະ ໝັກ ໃຊ້ອີເມວປະ ຈຳ ອາທິດຂອງພວກເຂົາແລະທ່ານຍັງສາມາດເພີ່ມອາຫານເຂົ້າໃນອາຫານ RSS ຂອງທ່ານເພື່ອໃຫ້ທ່ານສາມາດເບິ່ງປາກກາທີ່ຖືກເຜີຍແຜ່ ໃໝ່. ແລະ, ຖ້າທ່ານເລີ່ມຄົ້ນຫາຫຼືຄົ້ນເບິ່ງປາກກາສາທາລະນະຢູ່ບ່ອນນັ້ນ, ທ່ານຈະເຫັນບາງໂຄງການທີ່ບໍ່ ໜ້າ ເຊື່ອ…ຜູ້ໃຊ້ແມ່ນມີພອນສະຫວັນດີ!

ປະຕິບັດຕາມ Douglas Karr ໃນ Codepen

ຮຸ່ນທີ່ຈ່າຍ, CodePen Pro, ມີຄຸນລັກສະນະເພີ່ມເຕີມ ສຳ ລັບການປັບປຸງການເຮັດວຽກຫຼືທີມງານຕ່າງໆ - ລວມທັງການຮ່ວມມື, ຂັ້ນຕອນ, ການເປັນເຈົ້າຂອງຊັບສິນ, ມຸມມອງສ່ວນຕົວແລະແມ່ນແຕ່ໂຄງການທີ່ ນຳ ໃຊ້ກັບໂດເມນຫລືໂດເມນຍ່ອຍຂອງທ່ານເອງ. ແລະແນ່ນອນ CodePen ສະ ໜອງ ຫໍໄຕທີ່ດີເລີດດ້ວຍການລວມ Github ເຊິ່ງທີມງານທັງ ໝົດ ຂອງທ່ານສາມາດເຮັດວຽກໄດ້. ຖ້າທ່ານພຽງແຕ່ຕ້ອງການທົດສອບລະຫັດງ່າຍໆຄືກັບຂ້ອຍ, CodePen ແມ່ນເຄື່ອງມືທີ່ລ້ ຳ ຄ່າ.

ທ່ານຄິດແນວໃດ?

ເວັບໄຊທ໌ນີ້ໃຊ້ Akismet ເພື່ອຫຼຸດຜ່ອນການຂີ້ເຫຍື້ອ. ຮຽນຮູ້ວິທີທີ່ຂໍ້ມູນຂອງທ່ານຖືກປະຕິບັດ.