no.hideout-lastation.com
Paradis For Designere Og Utviklere


10 Codepen tips for nybegynnere

Codepen er et super enkelt og populært nettsted for å peke ned en fungerende front-end- kodekombinasjon med en gang. Hvis du ikke vet hva Codepen er eller ikke har hørt om det før, er det i utgangspunktet en online kildekode lekeplass (la oss kalle det OSCP til lyd nerdier) for de tre musketerne for front-end koding; HTML, CSS og JavaScript .

Det finnes andre lignende OSCPer der ute som JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen er definitivt en av de mest kjente blant front-end-utviklere. Uten videre, la oss hoppe rett inn i noen grunnleggende og nyttige tips for å bruke Codepen.

1. Kjør-knapp

Hvis du ikke er fan av måten utgangen av koden din i Codepen holder forfriskende mens du skriver, kan du velge bort alternativet "Auto Update Preview" og få en Kjør-knapp i stedet. Når du klikker på det, kan du se og oppdatere kodens utgang når du vil .

Dette er også et flott alternativ hvis du jobber med en kode som utdataene går gjennom mange layoutendringer, og repaints hver gang den oppdateres, noe som resulterer i langsomhet.

2. Antall økning / reduksjon

Øk eller reduser tallene i koden din i Codepen uten å skrive inn de nye numrene . Alt du trenger å gjøre er å bruke tastekombinasjonen av Ctrl / Cmd og Opp og Ned piler.

3. Flere markører

Du kan sette markører på flere punkter i kildekoden, og skriv deretter inn eller rediger på alle disse punktene samtidig . Dette virker bare hvis du skriver inn samme informasjon, og reduserer behovet for kopi-liming. Bare hold nede Ctrl / Cmd-tasten mens du klikker på de flere punktene.

4. Ulike fargerte konsollmeldinger

Console JavaScript-objektet har noen flere metoder, i tillegg til log() slik at du kan skrive ut ting i webkonsollen .

Du kan bruke info(), warn() og error() metoder for informasjon, advarsel og feil . Vanligvis sprer webkonsollene disse meldingene typevis, eller viser et passende ikon ved siden av dem (som et advarselsskilt for advarselsmeldingen) for enklere gjenkjenning .

Codepen har sin egen konsoll som du kan åpne ved å klikke på konsollknappen nederst i venstre hjørne. Den er ideell for rask kontroll av konsollmeldinger uten å måtte åpne nettleserens konsoll . Denne konsollen skiller de ulike typer konsollmeldinger med forskjellige bakgrunnsfarger .

5. Eksport

Når en gang er lagret, kan en penn (en enkelt Codepen-enhet) eksporteres som en ZIP-fil med alt i HTML, CSS og JS-kode i filer. Det er også et alternativ å lagre pennen som en Github-egenskap (et Git-arkiv). Du finner knappen Eksporter i nederste høyre hjørne av hver penn.

6. Finn og erstatt

Finn og erstatt - en viktig operasjon for folk som pleier å endre navn på deres variabelnavn hver nå og da. Ctrl / Cmd + Shift + F er nøkkelkombinasjonen for å åpne dialogboksen "Finn og erstatt" .

7. Emmet Tab Trigger

Vet du om tabulatorene for Emmet-koding? Emmet er et produktiv verktøy for front-end utviklere som lar deg skrive skjelett kode som senere blir utvidet . For å gjøre dette i Codepen, skriv bare riktig forkortelse i redigereren, trykk på Tab-tasten, og hele koden vises samtidig. Kun tilgjengelig for HTML i Codepen.

8. Få individuelle kodefiler

Hvis du bruker alternativet Eksporter som nevnt tidligere, vil du få alle tre filene (HTML, CSS og JS) på pennen din. Men hvis du bare er interessert i bare én eller to av disse filene, og vil laste ned dem individuelt, er det et alternativ for det også i Codepen.

Når du er logget på Codepen, gå til pennen din, og klikk på knappen Endre visning i øverste høyre hjørne. På bunnen av rullegardinlisten vil du se direkte nedlastingskoblinger for de enkelte filene .

9. Kontroller JavaScript-variabler

Når Codepen's JavaScript-konsoll kobles til JavaScript som er lagret i pennen, kan du også bruke det til å raskt teste JavaScript. Denne funksjonen er spesielt nyttig når du inspiserer JS-variabler, slik at du ikke trenger å sette inn ekstra konsoll eller varslingsmeldinger i den opprinnelige koden utelukkende for testformål.

10. Vri penn til mal

Hvis du pleier å starte de fleste pennene dine med samme sett med kode, kan du bruke en mal for å lagre den gjentatte koden . Hvis du vil slå en penn i mal, merker du inn malalternativet under Innstillinger-menyen. Når du senere oppretter en ny penn, kan du starte med din lagrede mal ved å klikke på pil ned i høyre side av knappen Ny penn. Det vil åpne en rullegardinliste med alle dine lagrede maler å velge mellom.

Topp 10 nettsteder å stille alle dine programmeringsspørsmål

Topp 10 nettsteder å stille alle dine programmeringsspørsmål

Når vi lærer å kode eller utvikle programvare, nettsteder eller apper, vil vi vanligvis bli sittende fast med et problem eller en feil som nekter å bli løst, uansett hva du gjør. I slike tilfeller kan programmerere som deg kanskje ha svar på spørsmål relatert til ulike kodende språk, utviklingsplattformer, verktøy, APIer og tjenester. Hvor kan

(Tekniske og design tips)

Hvordan utvide miniatyrbilde som Google-bilder

Hvordan utvide miniatyrbilde som Google-bilder

Google Images kjører et unikt brukergrensesnitt med forhåndsvisning av miniatyrbilder fra mange forskjellige nettsteder . Ved å klikke på noen av disse miniatyrbildene, utvides skjermen med flere detaljer og et større bilde.Det er et av de beste bildgalleri- funksjonene jeg har brukt, og nå kan du klone det med Gridder.js .D

(Tekniske og design tips)