CodePen. Ներկառուցված, փորձարկում, տարածում և բացահայտում HTML, CSS և JavaScript

Կոդավորում. Կառուցեք, փորձարկեք և բացահայտեք ճակատային ծածկագիրը

Բովանդակության կառավարման համակարգի հետ կապված մարտահրավերներից մեկը սցենարով գործիքների փորձարկումն ու արտադրությունն է: Չնայած դա հրատարակիչների մեծամասնության պահանջը չէ, բայց որպես տեխնոլոգիական հրատարակություն, ես սիրում եմ ժամանակ առ ժամանակ կիսել աշխատանքային սցենարներ ՝ այլ մարդկանց օգնելու համար: Ես կիսվել եմ, թե ինչպես օգտագործել JavaScript ՝ գաղտնաբառի ուժը ստուգելու համար, Ինչպես ստուգեք էլփոստի հասցեի շարահյուսությունը կանոնավոր արտահայտություններով (Regex), և վերջերս ավելացրեց սա հաշվիչ `առցանց ակնարկների վաճառքի ազդեցությունը կանխատեսելու համար, Հուսով եմ, որ կայքում տասնյակ գործիքներ կավելացնեմ, բայց WordPress- ը հենց այնպես չի նպաստում այսպիսի հրատարակություններին… դա բովանդակության համակարգ է, այլ ոչ թե զարգացման համակարգ:

Այսպիսով, որպեսզի աշխատեն իմ փոքրիկ սցենարները, որոնք ես հաճույքով եմ օգտագործում CodePen, CodePen- ը կոկիկորեն կազմակերպված գործիք է `HTML վահանակով, CSS վահանակով, JavaScript վահանակով, Վահանակով և ստացված կոդի հրապարակմամբ: Յուրաքանչյուր վահանակ ունի տեղեկատվություն, երբ տարրերը մկնիկի վրա եք դնում, որպեսզի հասկանաք, թե ինչն է հնարավոր, ինչպես նաև ձեր HTML- ի, CSS- ի և JS- ի գունային կոդավորումը `ավելի հեշտ խմբագրելու և գրելու համար:

CodePen- ը սոցիալական զարգացման միջավայր է, Իր հիմքում դա թույլ է տալիս զննարկչում գրել կոդ և կառուցելիս տեսնել դրա արդյունքները: Codeանկացած հմտություն մշակողների համար օգտակար և ազատագրող առցանց կոդերի խմբագիր, մասնավորապես ՝ կոդավորող մարդկանց համար զորեղ: CodePen- ը հիմնականում կենտրոնանում է ճակատային լեզուների վրա, ինչպիսիք են HTML, CSS, JavaScript և նախամշակման շարահյուսությունները, որոնք վերածվում են այդ իրերի:

CodePen- ի մասին

CodePen- ի միջոցով ես կարողացա կատարել այն աշխատանքը, որն անհրաժեշտ էր հրապարակել հաշվիչը Ես տեղադրված եմ կայքում: CodePen- ի ստեղծագործությունների մեծ մասը հանրային է և բաց աղբյուր: Նրանք կենդանի արարածներ են, որոնց հետ կարող են փոխազդել այլ մարդիկ և համայնքը ՝ սկսած պարզ սրտից, մեկնաբանություն թողնելուց, պատառաքաղ անել և փոխել իրենց սեփական կարիքների համար:

CodePen - առցանց ակնարկների վաճառքի ազդեցության կանխատեսման համար հաշվիչ

CodePen- ի միջոցով դուք կարող եք փոխել ձեր տեսքը, եթե ցանկանում եք, որ աշխատելու ընթացքում ապակիները լինեն ձախ, աջ կամ ներքևում… կամ HTML- ը դիտեք նոր ներդիրում: Կողք կողքի դիտումը աներևակայելիորեն լավ է աշխատում ՝ ձեր պատասխանատու պարամետրերը ստուգելու համար, քանի որ կարող եք հարմարեցնել տեսանելի պատուհանի չափը:

Կարող եք ձեր աշխատանքային սցենարներից յուրաքանչյուրը կազմակերպել Գրիչների մեջ, դրանք համատեղել Projectրագրերի (բազմապանակ ֆայլերի խմբագիր) կամ նույնիսկ հավաքածուներ կառուցել: Այն հիմնականում աշխատանքային պորտֆոլիոյի կայք է, որը նախատեսված է ճակատային ծածկագրերի համար, որտեղ դուք կարող եք հետևել այլ հեղինակների, պատառաքաղել այլ հրապարակային բաժանված նախագծեր ձեր սեփական մեջ ՝ փոփոխելու համար և նույնիսկ սովորելու, թե ինչպես կարելի է զվարճալի բաներ անել մարտահրավերների միջոցով:

Կարող եք պահպանել որպես GitHub Gist, արտահանել zip ֆայլում և նույնիսկ պառկեցնել գրիչը նման հոդվածում.

Տե՛ս գրիչը
Կանխատեսված վաճառքի ազդեցությունը առցանց ակնարկների վրա
by Douglas Karr (@douglaskarr)
on CodePen.


Գրիչի խմբագրի սահմանափակումներից մեկը ծածկագրի մեծ ծավալն է: Դուք կարող եք երբեք չհանդիպել այս խնդրին, քանի որ խմբագիրը պետք է լավ լինի հարյուրավոր կամ նույնիսկ հազարավոր տողերով ծածկագրերով: Բայց երբ նրանք սկսեն խփել 5,000 - 10,000 կամ ավելի կոդերի տողեր, կտեսնեք, որ խմբագիրը սկսում է ձախողվել: Այնուամենայնիվ, դուք կարող եք ավելացնել արտաքին հղումներ ոճաթերթերին կամ JavaScript- ին այլ վայրում:

Ես ձեզ խորհուրդ կտամ գրանցվել: Դուք բաժանորդագրված կլինեք նրանց շաբաթական էլ. Փոստին և կարող եք նաև ավելացնել թարմացվող բովանդակությունը ձեր RSS հոսքին, որպեսզի կարողանաք տեսնել նոր հրատարակված գրիչները: Եվ, եթե դուք սկսեք որոնել կամ զննել այնտեղի հանրային գրիչները, դուք կգտնեք մի քանի անհավանական նախագծեր… օգտվողները բավականին տաղանդավոր են:

Հետեւեք Douglas Karr Codepen- ի վրա

Վճարովի տարբերակը ՝ CodePen Pro- ն, առաջարկում է մի շարք լրացուցիչ գործառույթներ բարելավված ֆունկցիոնալության կամ թիմերի համար ՝ ներառյալ համագործակցություն, գործընթացներ, ակտիվների հոսթինգ, մասնավոր դիտումներ և նույնիսկ տեղակայված նախագծեր ձեր սեփական տիրույթում կամ ենթահամալիրում: Եվ, իհարկե, CodePen- ը հիանալի պահեստ է տրամադրում Github- ի ինտեգրմամբ, որտեղ կարող է աշխատել ձեր ամբողջ թիմը: Եթե ​​դուք պարզապես ցանկանում եք ստուգել ինչ-որ պարզ կոդ, ինչպիսին ես եմ, CodePen- ը անգնահատելի գործիք է:

Ինչ եք կարծում?

Այս կայքը օգտագործում է Akismet- ը սպամի նվազեցման համար: Իմացեք, թե ինչպես է ձեր տվյալները մշակվում.