Despre CodePen – biblioteca de scripturi gratuite

Despre biblioteca de scripturi CodePen 

Biblioteca de scripturi CodePen este o adevarata comoara ascunsa in lumea internetului. Este si locul favorit de joaca a designerilor web. CodePen si dezvoltarea frontend (partea din fata a site-ului) au devenit aproape sinonime. CodePen poate fi accesat de la adresa https://codepen.io/. Aceasta biblioteca iti ofera posibilitatea sa cauti printre diferite scripturi scrise in HTML, CSS si JavaScript. In plus, poti crea si salva chiar propriile tale scripturi tot aici.

CodePen este ca si un cutit de armata elvetian. Pe scurt, gasesti orice te poti gandi pentru frontend. Nu exista un alt site mai bun unde poti construi, testa in timp real, salva si distribui scriptul tau, dar si rasfoi printre alte scripturi. Important de retinut este ca poti orice script gasit sa il modifici si sa il testezi in timp real instant, fara nici un pas in plus. Trebuie doar sa adaugi codul tau. Printre filtre ai la dispozitie scripturi populare, scripturi pe teme si scripturi alese.

Fiecare script are propriul sau nume si autor, afisate inainte de a accesa pagina sa, dar si la accesarea paginii. Scripturile sunt sortate pe teme dupa cum urmeaza:

• React
• Vue
• D3.js
• GSAP
• Zdog
• Tailwind CSS
• Sass
• anime.js
• Splitting.js
• Acordeon
• Iconite pentru meniuri hamburger
• Tabele
• Grafice
• Taburi
• Iconite pentru note
• Butoane
• Firmituri
• Dialoguri
• Meniuri dropdown
• Formulare de autentificare
• Loadere
• Bari de progres
• Paginatie
• Calendare
• Emailuri
• Harti
• Toogle-uri
• Slidere
• Carduri Media
• Panouri de control

Orice script gasit poti sa il salvezi in propria ta colectie. Ai nevoie doar de un cont pe site. Contul este gratuit, dar poate fi si cu plata in functie de ce alte functionalitati mai doresti.

In acest articol, iti vom prezenta cateva caracteristici pe care s-ar putea sa le adori, dar nu le cunosti sau nu ai tinut cont de ele:

Preprocesoarele

CodePen poate fi folosit in combinatie cu un numar important de preprocesatoare CSS. Poti crea componente mici fara a fi afectat de nimic altceva si fara a avea nevoie de un intreg sistem sau de vreo unealta complexa. Poti sa experimentezi si sa testezi o bucata mica de cod pana cand ajungi la un nivel mai mare.

Pentru a oferi aceasta facilitate cat mai usor si rapid tuturor, CodePen ofera acces instant la preprocesoare. Exista patru preprocesoare HTML pe care le poti folosi: Markdown, HAML, Slim si Jade. Acestea pot fi folosite pentru a scrie cod intr-un alt mod sau daca deja scrii cod in aceste preprocesoare poti sa iti pastrezi stilul de lucru.

Utilizatorii mai au acces si la preprocesoare JavaScript ca si CoffeeScript, LiveScript, TypeScript si Babel, dar si preprocesoare CSS: Less, Sass si SCSS, Stylus si PostCSS. Toate acestea pot fi unelte foarte valoroase in munca ta. Foloseste butonul View compiled pentru a scrie printr-un preprocesor.

Functionalitati incorporate

Cand vine vorba sa incluzi cod in articole sau prezentari, incorporarile CodePen sunt incredibile si au functii speciale. Toate incorporarile au o tema care controleaza antetul si alte detalii. Cele doua teme implicite sunt: cea intunecata si cea luminoasa. Fiecare membru CodePen mai primeste si o tema personalizabila care poate fi editata in functie de dorinta sa sau de site-ul sau. Daca tu schimbi tema acum, CodePen va actualiza tema pentru toate codurile scrise. Nu trebuie sa modifici individual la fiecare cod.

Daca esti membru Pro, mai ai cateva optiuni in lumea incorporarilor. In primul rand, ai teme nelimitate si poti alege pentru fiecare tip de cod ceva diferit. Poti adauga propriul tau cod CSS pentru a modifica stilul textelor si nu numai.  Poti face incorporarile editabile pentru a-ti prezenta usor codul la conferinte sau la sedinte.

Trebuie sa stii ca exista si un API numit PostMessage care poate fi modificat. In final, iti faci propria ta interfata CodePen cu toate aceste caracteristici.

Testare si sincronizare in timp real

Poti sa testezi codul scris si sa vezi rezultatul in timp real. De obicei, structura unei pagini CodePen de editare a codului este urmatoare: 

• Primul rand are 3 coloane: coloana HTML, coloana CSS si coloana JS;
• Al doilea rand cuprinde rezultatul codurilor introduse in coloanele de mai sus.

Ai posibilitatea de a testa codul si in browsere diferite cum ar fi Firefox, Safari, Chrome sau pe telefon. Nu exista limita in ceea ce priveste numarul de browsere pe care se testeaza codul scris.

Toate evenimentele sunt sincronizate intre ele. Daca tu apesi pe un buton de pe un browser, acel buton va fi apasat pe toate browserele.

Codurile ca si resurse

Desi CodePen a fost construit cu scopul de a afisa demo-uri si testari de cod mai mici, aparent utilizatori au vrut ceva mai structurat. Asa a aparut optiunea in care poti rasfoi codurile altora. Practic, se compileaza JavaScript-ul si CSS-ul impreuna cu HTML fiecarui cod, afisand rezultatul, dar impreuna cu codurile specifice. 

In plus, daca copiezi link-ul unui cod si adaugi la sfarsit .js vei vedea direct codul JavaScript. Acelasi lucru se intampla si pentru CSS. 

Pe adresa https://codepen.io/tv/, poti sa vizionezi codurile scrise de altii. Acestea sunt redate una dupa alta la un interval de cateva secunde.

Coduri salvate ca si teme

Atunci cand salvezi un cod, ai optiunea sa il salvezi ca si o tema. Asta inseamna ca poti sa il refolosesti rapid pentru un cod de al tau.

Se vor salva si setarile codului salvat. Daca in acesta s-a folosit preprocesorul Sass, atunci si in tema salvata ca si cod vei avea acest preprocesor.

Biblioteca  de scripturi poate fi folosita in WordPress

Daca ai pluginul potrivit, poti sa folosesti orice script de pe CodePen in WordPress. Noi iti recomandam pluginul gratuit WP Coder. Poti sa copiezi codurile HTML, CSS si JS de pe CodePen de la un cod care iti place si sa il muti in WordPress folosind acest plugin. Are campuri specifice pentru fiecare limbaj. Ai grija insa la setarile si codurile CSS si JS ale temei tale. In functie de acestea, elementul pe care incerci sa il muti pe WordPress s-ar putea sa nu se afiseze corect sau sa fie alte probleme. Iti recomandam sa folosesti in special efectele de animatie pentru text, titluri, imagini si butoane care sunt mai usor de configurat incat sa se incadreze in tema ta. Poti gasi foarte multe coduri in biblioteca de scripturi pe care sa le folosesti in site-ul tau WordPress. Cu ele poti creste interactivitatea site-ului, dar si experienta de navigare asa cum am scris si in articolele precedente.