CodePen: HTML, CSS және JavaScript құрылды, тестілеу, бөлісу және табу

Codepen: құрастыру, сынау және алдыңғы кодты табу

Мазмұнды басқару жүйесіндегі қиындықтардың бірі - сценарийлік құралдарды сынау және шығару. Бұл көптеген баспагерлер үшін талап болмаса да, мен технологиялық басылым ретінде, басқа адамдарға көмектесу үшін кейде жұмыс сценарийлерімен бөліскенді ұнатамын. Мен қалай пайдалану керектігімен бөлістім Пароль күшін тексеру үшін JavaScript, қалай Regular Expressions көмегімен электрондық пошта мекен-жайының синтаксисін тексеріңіз (Регекс), және жақында бұны қосты Интернеттегі шолулардың сатылымға әсерін болжауға арналған калькулятор. Мен сайтқа ондаған құралдарды қосамын деп үміттенемін, бірақ WordPress бұл сияқты жариялауға өте қолайлы емес ... бұл даму жүйесі емес, мазмұн жүйесі.

Сонымен, менің сценарийлерімнің жұмыс жасауы үшін мен оларға ұнаймын CodePen. CodePen - HTML панелі, CSS панелі, JavaScript панелі, консолі және алынған код жарияланған басылымы бар ұқыпты ұйымдастырылған құрал. Әр панельде элементтерді тінтуірмен өткізіп, не болатынын түсіну үшін ақпарат, сондай-ақ HTML, CSS және JS өңдеуге және жазуға көмектесу үшін түстерді кодтау бар.

CodePen - бұл әлеуметтік даму ортасы. Оның негізінде ол сізге браузерде код жазуға және оның нәтижелерін өзіңіз құрастырған кезде көруге мүмкіндік береді. Кез-келген шеберлікті дамытушылар үшін пайдалы және босататын онлайн-код редакторы, әсіресе кодты үйренетін адамдарға мүмкіндік береді. CodePen бірінші кезекте HTML, CSS, JavaScript сияқты алдыңғы қатарлы тілдерге және сол нәрселерге айналатын синтаксисті алдын-ала өңдеуге бағытталған.

CodePen туралы

CodePen көмегімен мен барлық қажетті жұмысты орындай алдым калькуляторды жариялау Мен сайтқа ендірдім. CodePen-де жасалған туындылардың көпшілігі жалпыға қол жетімді және ашық ақпарат көзі болып табылады. Олар басқа адамдар мен қоғамдастық өзара әрекеттесе алатын тірі заттар, қарапайым жүректен бастап, пікір қалдыру, өз қажеттіліктері үшін айыру және өзгерту.

CodePen - Интернеттегі шолулардың сатылымға әсерін болжауға арналған калькулятор

CodePen көмегімен көріністерді өзгертуге болады, егер сіз жұмыс істеген кезде панельдер сол жақта, оң жақта немесе төменде тұрғыңыз келсе… немесе HTML-ді жаңа қойындыда көріңіз. Қатар тұрған көрініс сіздің жауап беретін параметрлеріңізді тексеру үшін өте жақсы жұмыс істейді, өйткені сіз көрінетін панельдің өлшемін реттей аласыз.

Сіз өзіңіздің жұмыс сценарийлеріңіздің әрқайсысын қаламға орналастыра аласыз, оларды жобаларға біріктіре аласыз (көп файлды редактор), тіпті жинақтарды құра аласыз. Бұл, негізінен, сіз басқа авторларды қадағалап, жалпыға ортақ жобаларды өзгерту үшін өзіңіздің жеке ойыңызға қосуға, тіпті қиындықтар арқылы қызықты нәрселер жасауды үйренуге болатын алдыңғы кодқа арналған жұмыс портфолиосы.

Сіз GitHub Gist ретінде сақтай аласыз, zip файлында экспорттай аласыз және т Ендірме осындай мақалада қалам:

Қаламды қараңыз
Интернеттегі шолулардың болжамды сатылым әсері
by Douglas Karr (@douglaskarr)
on CodePen.


Pen редакторының шектеулерінің бірі - кодтың үлкен көлемі. Сіз ешқашан бұл мәселеге тап болмауыңыз мүмкін, өйткені редактор жүздеген, тіпті мыңдаған кодтармен жақсы болуы керек. Бірақ олар 5,000 - 10,000 немесе одан да көп жолдар кодын бастай бастағанда, редактордың істен шыққанын көресіз. Дегенмен, сіз басқа жерде орналастырылған стильдер кестесіне немесе JavaScript-ке сыртқы сілтемелерді қоса аласыз!

Мен сізді жазылуға шақырамын. Сіз олардың апта сайынғы электрондық поштасына жазыласыз, сонымен қатар RSS арнасына арнаны қоса аласыз, сонда сіз жаңа шыққан қаламдарды көре аласыз. Егер сіз сол жерде қоғамдық қаламдарды іздеуді немесе шолуды бастасаңыз, онда сіз керемет жобаларды таба аласыз ... қолданушылар өте талантты!

орындаңыз Douglas Karr Codepen-де

Ақылы нұсқасы, CodePen Pro, жетілдірілген функционалдылыққа немесе командаларға арналған бірнеше қосымша мүмкіндіктерді ұсынады: ынтымақтастық, процестер, активтерді орналастыру, жеке көріністер және тіпті өз доменіңізбен немесе қосалқы доменіңізбен орналастырылған жобалар. Әрине, CodePen сіздің бүкіл командаңыз жұмыс істей алатын Github интеграциясымен керемет репозиторий ұсынады. Егер мен сияқты қарапайым кодты сынағыңыз келсе, CodePen - бұл баға жетпес құрал.

Сен не ойлайсың?

Бұл сайт спамның төмендеуі үшін Akismet пайдаланады. Деректеріңіздің қалай өңделетінін біліңіз.