ໃນປີ 1999, ຂ້ອຍໄດ້ສ້າງເວັບໄຊທ໌ ທຳ ອິດຂອງຂ້ອຍໂດຍໃຊ້ Web Studio 1.0. Web Studio ແມ່ນການໂຕ້ຕອບຜູ້ໃຊ້ແບບກາຟິກ. ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງ ໜ້າ ດິນ ໃໝ່ ແລະລາກແລະວາງອົງປະກອບລົງໃນນັ້ນ. ຫຼັງຈາກນັ້ນຂ້ອຍຕັ້ງໂດເມນທີ່ບໍ່ເສຍຄ່າແລະໂຮດຕິ້ງກັບ GeoCities ແລະ voila! ຂ້ອຍມີເວັບໄຊທ໌້. ກ້າວໄປ ໜ້າ ໄວເຖິງປີ 2004, ຂ້ອຍຢາກກ້າວໄປຂ້າງ ໜ້າ ແລະອື່ນໆ, ຄືກັບຄົນອື່ນໆ, ຂ້ອຍຕັ້ງເປົ້າ ໝາຍ ທີ່ຈະສ້າງເວັບໄຊທ໌້.
- 12 ຄຳ ຖາມທົ່ວໄປຂອງ JavaScript ໄດ້ຕອບ
ມີການປ່ຽນແປງຫຼາຍຢ່າງຕັ້ງແຕ່ນັ້ນມາ. ໃນບົດຂຽນນີ້, ຂ້ອຍ ກຳ ລັງຈະເດີນທາງໄປຕາມເສັ້ນທາງຄວາມຊົງ ຈຳ ແລະສ້າງສະຖານທີ່ ໃໝ່ ສຳ ລັບເວັບໄຊຕ໌ມື້ນີ້.
ເອົາເອກະສານ ສຳ ລັບບົດແນະ ນຳ ນີ້.
ສະນັ້ນ, ເລີ່ມຕົ້ນ! ກ່ອນອື່ນ ໝົດ, ໂດຍທົ່ວໄປແລ້ວທຸກໆໂຄງການ ໃໝ່ ສຳ ລັບຂ້ອຍເລີ່ມຕົ້ນດ້ວຍ mkd ຕາມດ້ວຍ g init. ສຳ ລັບຜູ້ທີ່ຮູ້ຈັກຂ້ອຍ, ໃນບາງເວລາ, ຂ້ອຍອາດຈະໄດ້ກ່າວເຖິງ dotfiles ໃຫ້ເຈົ້າ. Dotfiles ແມ່ນເອກະສານທີ່ເລີ່ມຕົ້ນດ້ວຍຈຸດ (ມັນໃຊ້ເວລາດົນນານທີ່ ໜ້າ ປະຫລາດໃຈທີ່ຂ້ອຍສາມາດເຮັດການເຊື່ອມຕໍ່ນັ້ນໄດ້!) ແລະພວກມັນສາມາດຖືກ ນຳ ໃຊ້ເພື່ອຈຸດປະສົງຫຼາຍຢ່າງ. ສອງຂອງ dotfiles ທີ່ຂ້ອຍມັກແມ່ນ .aliasas ແລະ .functions. ຂ້າພະເຈົ້າຂໍອະທິບາຍ…
ໃນ bash, ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງໄດເລກະທໍລີ ໃໝ່ ໂດຍໃຊ້ mkdir ຄຳ ສັ່ງຫຼັງຈາກນັ້ນທ່ານຈະຕ້ອງປ່ຽນ cd directory ໃສ່ໃນລະບົບທີ່ທ່ານຫາກໍ່ສ້າງມາ. ການໃຊ້ລະຫັດທີ່ຂ້ອຍມີຢູ່ໃນເອກະສານ .functions ຂອງຂ້ອຍ, ຕອນນີ້ມັນສາມາດໃຊ້ໄດ້ mkd. ສິ່ງນີ້ຈະບໍ່ພຽງແຕ່ສ້າງໄດເລກະທໍລີ ໃໝ່ ເທົ່ານັ້ນ, ແຕ່ມັນຍັງໄດ້ປ່ຽນເປັນໄດເລກະທໍລີນັ້ນເຊັ່ນກັນ. ນີ້ອາດເບິ່ງຄືວ່າເປັນສິ່ງທີ່ເກີນໄປໃນຕອນ ທຳ ອິດ, ແຕ່ຂ້ອຍມັກການຊະນະຈຸນລະພາກເຫຼົ່ານີ້. ເມື່ອເວລາຜ່ານໄປ, ໂດຍສະເພາະຖ້າການເຮັດວຽກ ຄຳ ສັ່ງເຫຼົ່ານີ້ຫຼາຍໆຄັ້ງຕໍ່ມື້, ພວກມັນຈະເພີ່ມເວລາທີ່ປະຢັດໄດ້ຫຼາຍ.
# ສ້າງໄດເລກະທໍລີ ໃໝ່ ແລະໃສ່ມັນເຮັດ ໜ້າ ທີ່ mkd () {mkdir -p "$ @" && cd "$ _"; }
ຄຳ ສັ່ງຕໍ່ໄປ, ຖ້າທ່ານຄຸ້ນເຄີຍກັບ git, ແມ່ນພຽງແຕ່ git init, ເຊິ່ງຈະຊ່ວຍໃຫ້ພວກເຮົາສາມາດຄວບຄຸມໂຄງການໄດ້. ຂ້ອຍໃຊ້ git ຫຼາຍ, ແມ່ນແຕ່ ສຳ ລັບລາຍການຊື້ເຄື່ອງ! ສະນັ້ນແທນທີ່ຈະຕ້ອງພິມອອກ git ທຸກໆຄັ້ງ, ການເພີ່ມ alias g = "git" ໃຫ້ .aliases ອີກເທື່ອ ໜຶ່ງ ແມ່ນເຄື່ອງປະຢັດເວລານ້ອຍໆ ສຳ ລັບຂ້ອຍ.
ທຸກມື້ນີ້, ມີຫຼາຍໆກອບແລະເຕັກໂນໂລຢີທີ່ແຕກຕ່າງກັນ. ສຳ ລັບໂຄງການນີ້, ຂ້ອຍຢາກຮັກສາສິ່ງທີ່ລຽບງ່າຍ. ຂ້ອຍຈະໃຊ້ HTML, CSS ແລະຖ້າຕ້ອງການໃຊ້ JavaScript. ທຳ ອິດ, ໃຫ້ສ້າງເຄື່ອງ ໝາຍ HTML ຂັ້ນພື້ນຖານ. ແຕ່ລໍຖ້າ! ໃຫ້ຢຸດແລະຄິດເປັນເວລາ ໜຶ່ງ ນາທີ.
ບາງຄັ້ງນັກພັດທະນາ, ຕົວຂ້ອຍເອງກໍ່ລວມເອົາ, ສາມາດຕື່ນເຕັ້ນທີ່ສຸດໃນໂຄງການແລະຕ້ອງການທີ່ຈະໄດ້ຮັບຮອຍແຕກທັນທີແລະຕັ້ງຊື່ໃຫ້ແປ້ນພິມຂຽນລະຫັດ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຂ້ອຍພົບວ່ານີ້ບໍ່ແມ່ນວິທີການທີ່ດີທີ່ສຸດ. ຂ້ອຍຮັກທີ່ຈະໄດ້ຮັບພາບລວມໃນໂຄງການກ່ອນ. ໂດຍການເຮັດສິ່ງນີ້ແລະມີວິໄສທັດທີ່ຊັດເຈນກວ່າຂອງໂຄງການ, ຂ້ອຍເຫັນວ່າມັນຊ່ວຍໃຫ້ມີການຕັດສິນໃຈທີ່ດີກວ່າ. ຍົກຕົວຢ່າງ, ຖ້າຫາກວ່າຂ້າພະເຈົ້າໄດ້ເຂົ້າຫາລະຫັດໂດຍກົງ, ຂ້າພະເຈົ້າອາດຈະພົບກັບບັນຫາທີ່ຂ້າພະເຈົ້າຕ້ອງກັບໄປປະຕິເສດຕໍ່ໄປ. ມີຜົນໄດ້ຮັບທີ່ແຕກຕ່າງກັນບໍ່ຫຼາຍປານໃດກັບວິທີການນີ້. ຫນ້າທໍາອິດ, ມັນອາດຈະແມ່ນວ່າຂ້ອຍຕ້ອງລຶບລະຫັດທັງຫມົດແລະເລີ່ມຕົ້ນອີກເທື່ອຫນຶ່ງ; ອັນທີສອງ, ຖ້າສືບຕໍ່ໃນແບບນີ້ຂ້ອຍອາດຈະສິ້ນສຸດດ້ວຍ 'ລະຫັດ spaghetti' ເຮັດໃຫ້ມັນມີຄວາມຫຍຸ້ງຍາກໃນອະນາຄົດໃນການປັບປຸງ, ແກ້ໄຂແລະສົ່ງຜົນໃຫ້ເກີດການສູນເສຍການປະຕິບັດ; ອັນທີສາມ, ບາງຄັ້ງມັນກໍ່ບໍ່ດີແລະທ່ານຈົບດ້ວຍລະຫັດທີ່ດີກວ່າ, ແຕ່ຂ້ອຍມັກເວົ້າວ່າຜົນໄດ້ຮັບທີ ໜຶ່ງ ແລະທີສອງແມ່ນມີຫຼາຍ.
ໂຄງການນີ້ແມ່ນຂະ ໜາດ ນ້ອຍພໍສົມຄວນ; ມັນມີສອງສາມ ໜ້າ: ໜ້າ ທຳ ອິດ, ຂ່າວ, Gigs, ສື່, ເວັບບອດ, ລິ້ງແລະພາກສ່ວນທົ່ວໄປໃນບັນດາ ໜ້າ ເວັບເຫຼົ່ານີ້: ຫົວຂໍ້, ນຳ ທາງ, ເນື້ອຫາພິມ, ລາຍການ, ຮູບພາບ, ວິດີໂອ. ເມື່ອການກໍ່ສ້າງເວບໄຊທ໌ Flash ໃນປີ 2004, ສິ່ງທີ່ງ່າຍດາຍຫຼາຍໃນແງ່ຂອງການທົດສອບ. ເວບໄຊທ໌ໄດ້ຖືກສ້າງຂຶ້ນໃນ Flash, ສຳ ລັບ Flash ໃນຄອມພິວເຕີ້ຄອມພິວເຕີ້ດ້ວຍຄອມເມັນແລະແປ້ນພິມ. ມື້ນີ້, ການ ນຳ ໃຊ້ອິນເຕີເນັດມືຖືແລະແທັບເລັດແມ່ນມີຢູ່ທົ່ວໄປຫຼາຍກ່ວາໃນຄອມພີວເຕີ້ຄອມພີວເຕີ້, ແລະທ່າອ່ຽງນີ້ ກຳ ລັງເພີ່ມຂື້ນເລື້ອຍໆ.
ເພື່ອເຮັດໃຫ້ປະສົບການທີ່ດີກວ່ານີ້ ສຳ ລັບທຸກຄົນທີ່ເຂົ້າເບິ່ງເວັບໄຊທ໌້, ຂ້ອຍຈະພິຈາລະນາບາງສິ່ງບາງຢ່າງໃນຕອນເລີ່ມຕົ້ນຂອງໂຄງການແລະໃຊ້ກົນລະຍຸດ ທຳ ອິດໃນມືຖື. ເພື່ອເຮັດແນວນັ້ນ, ແລະອີກຄັ້ງ ໜຶ່ງ, ກ່ອນຈະຂຽນລະຫັດໃດ ໜຶ່ງ, ຂ້ອຍຈະອອກປາກກາແລະເຈ້ຍທີ່ເກົ່າແກ່ເກົ່າ. ຫນ້າທໍາອິດ, ຂ້ອຍຂຽນແຜນຜັງເວັບໄຊທ໌; ໃນການເຮັດດັ່ງນັ້ນມີບາງຂົງເຂດທີ່ຂ້ອຍຄິດວ່າສາມາດປັບປຸງໄດ້. ຍົກຕົວຢ່າງ, ເວັບໄຊທ໌ຕົ້ນສະບັບຂອງຂ້ອຍປະກອບມີຫລາຍໆ ໜ້າ ສຳ ລັບແຕ່ລະອັນລະບັ້ມຂອງວົງດົນຕີ. ໃນຊ່ວງເວລາທີ່ພວກເຂົາມີສາມອັນລະບັ້ມແລະພໍດີພໍດີໃນການ ນຳ ທາງ. ດຽວນີ້ພວກມັນມີຫຼາຍແລະມີທ່າແຮງທີ່ຈະມາເຖິງ, ສະນັ້ນຢູ່ໃນໃຈຂອງຂ້ອຍແລ້ວຂ້ອຍ ກຳ ລັງຄິດກ່ຽວກັບວິທີຕ່າງໆທີ່ຈະເຮັດໃຫ້ສະຖານທີ່ດັ່ງກ່າວມີຫຼັກຖານໃນອະນາຄົດຫຼາຍຂື້ນ (ເຄື່ອງເກົ່າແກ່ແຕ່ສິ່ງທີ່ດີແມ່ນ Dan Cederholm's Bulletproof Web Design).
ຕອນນີ້ຂ້ອຍມີຄວາມຄິດທີ່ຫຍາບຄາຍໃນຫົວຂອງແຜນຜັງເວັບໄຊທ໌ແລະຫນ້າຕ່າງໆ, ຕໍ່ໄປແມ່ນການສ້າງສາຍໄຟສາຍຕ່ ຳ. ຈາກປະສົບການທີ່ຜ່ານມາສ້າງຫຼາຍເວັບໄຊທ໌ຕອບສະ ໜອງ, ມືຖືມາພ້ອມກັບສິ່ງທ້າທາຍໃນການອອກແບບ, ຄືວິທີການສ້າງການ ນຳ ທາງ, ແຕ່ຍັງເຮັດໃຫ້ຄົນສາມາດເບິ່ງເນື້ອຫາຫຼັກຂອງເວັບໄຊທ໌້ໄດ້. ຂ້ອຍຈະໄປພ້ອມກັບຜົນໄດ້ຮັບການອອກແບບທີ່ພວກເຮົາທຸກຄົນໄດ້ເຕີບໃຫຍ່ເພື່ອຮັກ / ກຽດຊັງ: ວິທີການເມນູເບີເກີ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຂ້ອຍຈະເພີ່ມຕື່ມອີກເລັກນ້ອຍ. ວຽກງານສິລະປະຕົ້ນສະບັບໄດ້ໃຊ້ນົກ, ສະນັ້ນ, ແທນທີ່ຈະແມ່ນຮູບສັນຍາລັກຂອງເມນູເບີເກີ, ຂ້າພະເຈົ້າຈະໃຊ້ຮູບແຕ້ມນົກຊະນິດທີ່ຈະເປີດໃຊ້ເມນູແລະເປີດແລະປິດປີກຂອງມັນເພື່ອເປັນວິທີການຊີ້ບອກວ່າເມນູມີການເຄື່ອນໄຫວຫຼືບໍ່.
ສິ່ງທີ່ຢູ່ໃນໃຈຂອງຂ້ອຍຕອນນີ້ເລີ່ມມີຮູບແບບ, ໂດຍມີແນວຄວາມຄິດກ່ຽວກັບວິທີທີ່ຄົນຈະສາມາດ ນຳ ທາງອ້ອມສະຖານທີ່. ດຽວນີ້ຂ້ອຍຈະຄິດກ່ຽວກັບ ໜ້າ ເວັບຕ່າງໆທີ່ ໜ້າ ຈະເບິ່ງ. ເລີ່ມຕົ້ນຈາກ ໜ້າ ທຳ ອິດ, ມັນງ່າຍດາຍພໍສົມຄວນ, ມີເນື້ອໃນການພິມດີດ. ຕໍ່ໄປ, ຂ່າວ - ເນື້ອໃນການພິມດີດອີກເທື່ອ ໜຶ່ງ, ຮູບພາບທີ່ມີທ່າແຮງແລະຫຼັງຈາກນັ້ນການ ນຳ ທາງບາງປະເພດເພື່ອເບິ່ງຂໍ້ຄວາມເກົ່າ. Gigs - ບັນຊີລາຍຊື່ຂອງ gigs ທີ່ຈະມາເຖິງທີ່ມີການເຊື່ອມຕໍ່ເພື່ອຊື້ຕົ.ວ. ສຳ ລັບສື່ມວນຊົນ, ການເບິ່ງກັບຄືນໄປບ່ອນເວັບໄຊທ໌ກ່ອນ ໜ້າ ນີ້, ຂ້ອຍມີ 'ຮູບພາບ' ແລະ 'ວິດີໂອ' ເປັນສອງພາກສ່ວນທີ່ແຕກຕ່າງກັນ, ແຕ່ໃນນີ້ຂ້ອຍຄິດວ່າມັນມີຊ່ອງຫວ່າງ ສຳ ລັບການປັບປຸງແລະການຮວບຮວມເປັນ 'ສື່'. ອັນລະບັ້ມ, ແມ່ນແລ້ວ, ອັນລະບັ້ມ - ດຽວນີ້ແມ່ນບ່ອນທີ່ເຮັດສິ່ງນີ້ຈ່າຍໄປ. ທ່ານເຫັນ, ໜ້າ ເວັບບອດມີຮູບແບບພິມແລະຮູບພາບ, ແລະ ກຳ ລັງຕ້ອງການການ ນຳ ທາງບາງຢ່າງເພື່ອເບິ່ງບົດຄວາມເກົ່າ. ສຽງຄຸ້ນເຄີຍບໍ? ຟັງຫຼາຍຄ້າຍຄືກັບໂຄງສ້າງດຽວກັບ ໜ້າ ຂ່າວ! ມີພາບລວມລະດັບສູງສຸດນີ້ຂ້ອຍສາມາດເບິ່ງແລະຄິດສິ່ງຕ່າງໆໄດ້ໃນສ່ວນປະກອບທີ່ມີຄວາມຫຼາກຫຼາຍ, ບາງອັນກໍ່ສາມາດເວົ້າເຖິງລະດັບການອອກແບບປະລໍາມະນູ, ຖ້າເຈົ້າຄຸ້ນເຄີຍກັບວຽກຂອງ Brad Frost.
ຕອນນີ້ຂ້ອຍມີຄວາມຄິດກ່ຽວກັບວິທີທີ່ເວັບໄຊທ໌້ຈະເຮັດວຽກໃນອຸປະກອນນ້ອຍແລະອົງປະກອບທີ່ໃຊ້ ໃໝ່ ໄດ້, ມັນແມ່ນເວລາທີ່ຈະເຮັດຂັ້ນຕອນກັບອຸປະກອນທີ່ໃຫຍ່ກວ່າ. ຍ້ອນວ່າເວັບໄຊດັ່ງກ່າວແມ່ນງ່າຍດາຍພໍສົມຄວນ, ແລະດ້ວຍເສັ້ນລວດລວດລາຍທີ່ຖືກສ້າງຂື້ນມາແລ້ວ ສຳ ລັບມືຖື, ຂ້ອຍເຫັນວ່າອຸປະກອນທີ່ໃຫຍ່ກວ່າແມ່ນຄ້າຍຄືກັນ - ນອກຈາກດຽວນີ້ພວກເຮົາມີຫ້ອງເພີ່ມເຕີມ, ດັ່ງນັ້ນພວກເຮົາສາມາດເປີດກວ້າງເນື້ອຫາແລະລວມທັງການ ນຳ ທາງດ້ານຂ້າງ.
ການ ນຳ ທາງຂ້າງແມ່ນສ່ວນນ້ອຍໆຂອງເວັບໄຊທ໌້ທີ່ຕັ້ງແຕ່ຊົດເຊີຍທີ່ຂ້ອຍຮູ້ສຶກຕື່ນເຕັ້ນທີ່ສຸດ.ໂດຍໄດ້ຮັບແຮງບັນດານໃຈຈາກວຽກງານສິລະປະຕົ້ນສະບັບຂອງວົງດົນຕີ, ຂ້ອຍໄດ້ສ້າງການ ນຳ ທາງເປັນຮູບແຕ້ມຕົ້ນໄມ້ທີ່ມີໃບ. ໃບແຕ່ລະໃບແມ່ນປຸ່ມທີ່ເຊື່ອມໂຍງກັບ ໜ້າ ຕ່າງຂອງເວັບໄຊທ໌້. ພ້ອມກັນນີ້, ເມື່ອທ່ານເລື່ອນເຂົ້າໄປແລະຫ່ອນໄປຈາກໃບ, ໃບໄມ້ຈະມີຊີວິດ, ລົ້ມລົງຢູ່ພື້ນດິນ. Flash ແມ່ນຍິ່ງໃຫຍ່ຢູ່ທີ່ນີ້; ມັນໄດ້ຖືກເອີ້ນວ່າ tweening. ທ່ານສາມາດ ກຳ ນົດອົງປະກອບ ໜຶ່ງ ໃນ keyframe ໃນອິນເຕີເຟດໃນຕາຕະລາງເວລາ, ສ້າງ keyframe ອື່ນຕື່ມອີກຕາມເສັ້ນເວລາແລະເພີ່ມເສັ້ນທາງ ສຳ ລັບອົງປະກອບທີ່ຕ້ອງຕິດຕາມ. ເອົາສິ່ງເລັກນ້ອຍຕື່ມອີກ, ປ່ຽນແປງໄປຕາມເສັ້ນທາງ, ໄລຍະເວລາແລະຄວາມໄວຂອງໃບໄມ້ຫຼຸດລົງ, ຂ້ອຍໄດ້ສິ້ນສຸດດ້ວຍບາງສິ່ງບາງຢ່າງທີ່ຂ້ອຍພໍໃຈຫລາຍ.
ແຕ່ຕອນນີ້ພວກເຮົາບໍ່ໄດ້ໃຊ້ Flash, ສະນັ້ນພວກເຮົາຈະເຮັດແນວໃດ? ຂ້ອນຂ້າງຫຼາຍຂ້ອຍຈະເຕັ້ນໄປຫາ CodePen ຫຼື JS Bin. ສຳ ລັບທ່ານທີ່ບໍ່ຮູ້, CodePen ແລະ JS Bin ແມ່ນບໍລິການ online ທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດລະຫັດແລະບັນທຶກໄດ້ໄວ. ຂ້ອຍມີແນວໂນ້ມທີ່ຈະເບິ່ງ CodePen ຍ້ອນວ່າການອອກແບບຫລາຍຂື້ນແລະ JS Bin ເນັ້ນ JavaScript ຫລາຍຂື້ນ. ສຳ ລັບໂຄງການນີ້ຂ້ອຍຈະໃຊ້ CodePen ເພື່ອສ້າງການ ນຳ ທາງຕົ້ນໄມ້ດ້ວຍເຫດຜົນສອງສາມຢ່າງ. ຫນ້າທໍາອິດ, ຂ້ອຍຕ້ອງການເລີ່ມຕົ້ນສ້າງສະບັບມືຖືຕົ້ນຕໍຂອງເວັບໄຊທ໌້, ແລະໃນຄວາມເປັນຈິງໂດຍການເຮັດສິ່ງນີ້, ຖ້າສິ່ງຕ່າງໆມີເວລາທີ່ສໍາຄັນ, ຂ້ອຍອາດຈະຈົບລົງດ້ວຍ mvp. ເຖິງແມ່ນວ່າມີການປັບປຸງເວັບໄຊທ໌້ທີ່ສາມາດເຮັດໄດ້ໂດຍການເພີ່ມໃບ ນຳ ທາງທີ່ດີແລະພາບເຄື່ອນໄຫວ, ມັນຈະໃຊ້ເວລາໃນການຜະລິດດົນກວ່າ. ປະໂຫຍດຂອງການເຮັດວຽກໃນ CodePen ສຳ ລັບການ ນຳ ທາງຕົ້ນໄມ້ ໝາຍ ຄວາມວ່າມັນແຍກອອກຈາກເວັບໄຊທ໌ຕົ້ນຕໍແລະພື້ນຖານລະຫັດ. ຖ້າສິ່ງຕ່າງໆມີຄວາມຫຍຸ້ງຍາກໃນການເຮັດ ສຳ ເລັດ, ຂ້ອຍສາມາດປະຫຍັດບ່ອນທີ່ຂ້ອຍຢູ່, ດຳ ເນີນການກໍ່ສ້າງເວັບໄຊທ໌້ຕົ້ນຕໍ, ແລະກັບມາ ນຳ ທາງ. ບາງຄັ້ງຂ້ອຍພົບວ່າໃນການໄປຈາກບັນຫາ, ຫລືແມ່ນແຕ່ນອນຢູ່ເທິງມັນ, ຄວາມຮູ້ສຶກທີ່ບໍ່ຮູ້ຕົວຂອງຂ້ອຍສາມາດຄິດກ່ຽວກັບມັນໄດ້. ຫຼັງຈາກນັ້ນເມື່ອກັບຄືນສູ່ບັນຫາ, ວິທີແກ້ໄຂບັນຫານັ້ນເອງ.
SVGs! ຂ້ອຍຮັກ SVGs. ກ່ອນ ໜ້າ ນີ້ໃນ Flash, ຂ້ອຍໄດ້ແຕ້ມຊັບສິນຂອງໃບໃນ Illustrator. ເຮັດໃຫ້ປະລາດຂ້ອຍຍັງມີຊີດີທີ່ເຮັດວຽກກັບສິລະປະຕົ້ນສະບັບແລະສາມາດເປີດມັນໄດ້. ມື້ນີ້ຂ້ອຍໃຊ້ Sketch ແລະມັນໄດ້ເຮັດວຽກທີ່ດີໃນການເປີດເອກະສານ. ດຽວນີ້ຂ້ອຍມີຊັບສິນໃບໄມ້ພ້ອມທີ່ຈະສົ່ງອອກເປັນ SVGs. ເປັນຫຍັງ SVGs? ມີຫຼາຍເຫດຜົນ. ຖ້າພວກເຮົາຕ້ອງໃຊ້ jpg, ຫຼື gif ໃນອຸປະກອນ Retina, ພວກເຮົາກໍ່ຕ້ອງສະ ໜອງ ຊັບສິນທີ່ໃຫຍ່ກວ່າ, ຖ້າບໍ່ດັ່ງນັ້ນພວກມັນຈະມົວ. ພ້ອມກັນນັ້ນ, ກັບ SVGs, ພວກເຮົາສາມາດໃຊ້ CSS. ນີ້ແມ່ນດີເລີດແລະຊ່ວຍໃຫ້ພວກເຮົາປ່ຽນສີຂອງ SVG ໂດຍໃຊ້ CSS ເລັກນ້ອຍແທນທີ່ຈະຕ້ອງສ້າງຊັບສິນຮູບພາບອື່ນ. ນີ້ ໝາຍ ຄວາມວ່າມັນງ່າຍຕໍ່ການຮັກສາ, ແລະເປັນເງິນລາງວັນມັນກໍ່ມີຜົນງານຫຼາຍຂື້ນ. ຖ້າທ່ານບໍ່ຄຸ້ນເຄີຍກັບ SVGs, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ອ່ານກ່ຽວກັບພວກມັນແລະຜົນງານທີ່ບໍ່ ໜ້າ ເຊື່ອຈາກເພື່ອນທີ່ດີຂອງຂ້າພະເຈົ້າ, Sara Soueidan.
ດ້ວຍຊັບສິນຕົ້ນໄມ້ແລະໃບໃນປະຈຸບັນ, ສະຖານທີ່ສຸດທ້າຍທີ່ຈະເພີ່ມແມ່ນພາບເຄື່ອນໄຫວ. ມີສອງສາມວິທີທີ່ຂ້ອຍສາມາດປະຕິບັດກັບສິ່ງນີ້. ຫນຶ່ງອາດຈະເປັນຄວາມຈິງກັບເສັ້ນທາງ Flash ຕົ້ນສະບັບສິບສອງທີ່ຂ້ອຍໄດ້ເຮັດ. ນີ້ ໝາຍ ຄວາມວ່າການ ຈຳ ລອງເສັ້ນທາງແລະການ ນຳ ໃຊ້ SVG ແລະຕໍ່ມາອາດຈະເຮັດວຽກຕື່ມອີກກັບ SVG ກັບ paths ແລະ animateMotion. ຂ້ອຍມັກແນວຄວາມຄິດນີ້ຈາກມຸມມອງທີ່ ໜ້າ ເບື່ອຫນ່າຍ, ແຕ່ວ່າ CSS ໄດ້ເກີດຂື້ນມາຫຼາຍປີແລ້ວ, ແລະດຽວນີ້ພວກເຮົາໄດ້ຫັນປ່ຽນແລະແປຕາມຂໍ້ ກຳ ນົດຂອງພວກເຮົາ, ສະນັ້ນນີ້ອາດຈະເປັນອີກວິທີ ໜຶ່ງ. ການເອົາສິ່ງຕ່າງໆເປັນບາດກ້າວຕື່ມອີກ, ພວກເຮົາຍັງສາມາດເພີ່ມບາງ JavaScript ເຊິ່ງຈະເຮັດໃຫ້ໃບໃບລົ່ນ.
ທັງສອງທາງເລືອກແມ່ນດີ, ແຕ່ຂ້ອຍຈະຍ້າຍໄປສູ່ເສັ້ນທາງທີ່ ນຳ ພາ CSS ຫຼາຍຂື້ນ. ນີ້ແມ່ນຜົນປະໂຫຍດອີກອັນ ໜຶ່ງ ຂອງການໃຊ້ CodePen, ຂ້ອຍສາມາດໄປຫາວິທີ ໜຶ່ງ ຢ່າງໄວວາ. ຖ້າມັນສະແດງວ່າມັນມີຄວາມສັບສົນຫຼາຍກວ່າທີ່ຂ້ອຍໄດ້ຄິດໄວ້ໃນຕອນຕົ້ນ, ຫຼືມັນບໍ່ມີຄວາມຮູ້ສຶກທີ່ຖືກຕ້ອງ, ຂ້ອຍສາມາດທົດລອງໃຊ້ແນວທາງອື່ນໂດຍບໍ່ໃຊ້ເວລາ ໜ້ອຍ. ໃນຄວາມເປັນຈິງສິ່ງນີ້ໄດ້ກາຍເປັນຄວາມຄິດທີ່ດີ! ຂ້ອຍຍັງຊອກຫາຕົວເລືອກຕ່າງໆ ສຳ ລັບສິ່ງນີ້ - ກະລຸນາເບິ່ງໂຄງການຢູ່ GitHub ສຳ ລັບຜົນສຸດທ້າຍ.
ດ້ວຍການ ນຳ ທາງຕົ້ນໄມ້ດຽວນີ້ຖືກຈັດລຽງ, ຂ້ອຍຫັນກັບໄປຫາວິທີ ທຳ ອິດໃນມືຖື, ສ້າງການ ນຳ ທາງ. ຖ້າທ່ານຄຸ້ນເຄີຍກັບ Sass, ທ່ານມີຕົວປ່ຽນແປງຫຼາຍກວ່າການພົບ. ແຕ່ທ່ານຮູ້ບໍ່ວ່າຕົວປ່ຽນແປງມີຢູ່ໃນ CSS ແລ້ວບໍ? ພວກເຂົາມີການສະ ໜັບ ສະ ໜູນ browser ທີ່ ເໝາະ ສົມໃນ Chrome, Edge, Safari ແລະ Samsung Internet ເຊັ່ນກັນ! ໃນຂະນະທີ່ຂ້າພະເຈົ້າພະຍາຍາມຮັກສາ CSS ຂັ້ນພື້ນຖານແລະຫລີກລ້ຽງຄວາມຕ້ອງການຄວາມເພິ່ງພາອາໃສພິເສດ, ນີ້ແມ່ນຂ່າວດີ. ສະນັ້ນພວກເຮົາຈະຈັດຕັ້ງປະຕິບັດແນວໃດ? ຢູ່ເທິງສຸດຂອງເອກະສານສະບັບຂ້ອຍປະກາດຕົວແປຂອງຂ້ອຍ:
: ຮາກ {--grey: #ccc; --red: # fb0f0c; - ຂະ ໜາດ ກວ້າງ: 10px; }
ຕອນນີ້ພວກເຂົາຖືກປະກາດແລ້ວ, ຂ້ອຍສາມາດໂທຫາພວກເຂົາ, ດັ່ງນັ້ນຕົວຢ່າງການຕັ້ງສີພື້ນຫລັງຂອງຮ່າງກາຍຈະເບິ່ງຄືແນວນີ້:
ຮ່າງກາຍ {ພື້ນຫລັງ: var (- ສີເທົາ); }
ການເອົາບາດກ້າວນີ້ຕື່ມອີກແລະເພື່ອຊ່ວຍໃນການຈັດວາງຕາຂ່າຍໄຟຟ້າ, ພື້ນທີ່ສີຂາວ, ຈັງຫວະຕັ້ງ, ທ່ານອາດຈະໄດ້ສັງເກດເຫັນວ່າຂ້ອຍຍັງໄດ້ ກຳ ນົດຕົວປ່ຽນຂະ ໜາດ ຕາຂ່າຍໄຟຟ້າ. ຕົວປ່ຽນແປງເຮັດວຽກໄດ້ດີທີ່ສຸດກັບ calc ແລະທີ່ມີລັກສະນະເລັກໆນ້ອຍໆເຊັ່ນນີ້:
// ຕົວແປມາດຕະຖານທີ່ຖືກ ນຳ ໃຊ້, ຜົນຜະລິດ 10px. padding-top: var (- ຕາຂ່າຍໄຟຟ້າ - ຂະ ໜາດ); // ເພີ່ມ calc ເພື່ອຄູນຄ່າຕົວປ່ຽນໂດຍ 2, ຜົນຜະລິດ 20px. padding-bottom: calc (var (- ຕາຂ່າຍໄຟຟ້າ - ຂະ ໜາດ) * 2);
ດ້ວຍຮູບແບບການ ນຳ ທາງແບບມືຖື ສຳ ເລັດ, ໃຫ້ແກ້ໄຂ ໜ້າ ທີ່ ສຳ ລັບການປິດບັງແລະສະແດງມັນ. ສຳ ລັບປຸ່ມສະຫຼັບພວກເຮົາຈະ ນຳ ໃຊ້ປ້າຍຊື່, ຫຼັງຈາກນັ້ນໃນແທັບ nav ພວກເຮົາຈະເພີ່ມ ຄຳ ເຫັນໃສ່:
header> h1> ແຖບເວບໄຊທ໌ / h1> h2> ໜ້າ ທຳ ອິດ / h2> ປ້າຍ ສຳ ລັບ = "mobileNav_toggle"> ເປີດ / ປິດປ້າຍ / / ຫົວຂໍ້> nav> ປະເພດປ້ອນເຂົ້າ = "checkbox" id = "mobileNav_toggle" role = "ປຸ່ມ"> ul> li> a href = "#"> ໜ້າ ບ້ານ / a> / li> li> href = "#"> ກ່ຽວກັບ / a> / li> li> href = "#"> ພອດການລົງ / a> / li> li> a href = "#"> ຂ່າວ / a> / li> li> href = "#"> ຕິດຕໍ່ / a> / li> / ul> / nav>
ການ ນຳ ໃຊ້ CSS ຕໍ່ໄປນີ້, ພວກເຮົາສາມາດສະແດງແລະເຊື່ອງເມນູ ນຳ ທາງ; ເນື່ອງຈາກວ່າພວກເຮົາຕ້ອງການປ້າຍທີ່ຢູ່ໃນຫົວ, ພວກເຮົາສາມາດໃຊ້ ~ aka tilde ຫຼື (U + 007E) ສະນັ້ນມັນເຮັດວຽກໄດ້ໃນຂະນະທີ່ບໍ່ໄດ້ຮັບຜົນ ສຳ ເລັດໂດຍອົງປະກອບ ທຳ ອິດ.
#mobileNav_toggle [type = checkbox] {ສະແດງ: ບໍ່ມີ; } #mobileNav_toggle [type = checkbox]: ເຊັກ ~ .mobileNav_list {ສະແດງ: ບັອກ; }
ດ້ວຍການ ນຳ ທາງມືຖື ສຳ ເລັດສົມບູນ, ມັນຮອດເວລາທີ່ຈະປະຕິບັດການອອກແບບເວັບທີ່ຕອບສະ ໜອງ ໄດ້. ເພີ່ມໃນເນື້ອຫາຕົ້ນຕໍ ສຳ ລັບເວັບໄຊທ໌້, ຫຼັງຈາກນັ້ນໂດຍໃຊ້ມຸມມອງທີ່ຮັບຜິດຊອບໃນ Chrome Developer Tools, ຂ້ອຍສາມາດເພີ່ມຄວາມກວ້າງຂອງມຸມມອງເບິ່ງຈົນກວ່າຂ້ອຍຈະຮູ້ສຶກວ່າມີຫ້ອງພຽງພໍໃນການ ນຳ ທາງຕົ້ນໄມ້. ສິ່ງນີ້ຈົບລົງທີ່ 600px, ແລະ ສຳ ລັບສິ່ງນີ້ພວກເຮົາສາມາດໃຊ້ ຄຳ ຖາມກ່ຽວກັບສື່:
.treeNav {ສະແດງ: ບໍ່ມີ; } ໜ້າ ຈໍ @media ແລະ (min-width: 600px) {.treeNav {display: block; }}
ເກືອບວ່າມີ! ສຸດທ້າຍເພື່ອໃຫ້ການ ນຳ ທາງຕົ້ນໄມ້ນັ່ງຢູ່ໃກ້ພື້ນທີ່ເນື້ອຫາຫຼັກ, ຂ້ອຍຈະໃຊ້ Flexbox:
. ຕົວແທນ {ສະແດງ: flex; } .treeNav {ສະແດງ: ບໍ່ມີ; min-width: 140px; }
ດຽວນີ້ການ ນຳ ທາງຕົ້ນໄມ້ມີຄວາມສູງ 100%, ໂດຍເນື້ອຫາຈະຄືກັນແລະນັ່ງຢູ່ເບື້ອງຂວາຂອງມັນ. ນີ້ ໝາຍ ຄວາມວ່າບໍ່ວ່າເນື້ອຫາຈະດົນປານໃດ, ມັນຈະບໍ່ໄຫຼພາຍໃຕ້ການ ນຳ ທາງຕົ້ນໄມ້. ຖ້າທ່ານຢາກຮູ້ເພີ່ມເຕີມກ່ຽວກັບ Flexbox, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ກວດເບິ່ງ flexbox.io ໂດຍໃຊ້ Wes Bos ດຽວເທົ່ານັ້ນ. ມັນມີຫຼາຍຢ່າງທີ່ມັນສາມາດເຮັດໄດ້!
ນັ້ນແມ່ນສິ່ງທີ່ຂ້ອຍມີເວລາ ສຳ ລັບດຽວນີ້, ແຕ່ວ່າຍັງມີຫລາຍໆຢ່າງທີ່ພວກເຮົາສາມາດເຮັດເພື່ອເຮັດໃຫ້ໂຄງການນີ້ດີຂື້ນ. ຖ້າທ່ານມີ ຄຳ ຖາມ, ຫຼືມັກບົດຂຽນ, ກະລຸນາເວົ້າສະບາຍດີໃນ Twitter ຫຼືຜ່ານເວັບໄຊທ໌ຂອງຂ້ອຍ, ຫຼືສົ່ງ ຄຳ ຮ້ອງຂໍດຶງໃນ GitHub!
ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບທີ 304 ຂອງສະບັບ ສຸດທິ, ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະພັດທະນາເວັບ. ຊື້ເລກທີ 304 ຢູ່ບ່ອນນີ້ ຫຼື ຈອງທີ່ນີ້.
