10 Цодепен Савјети за почетнике

Цодепен је супер једноставан и популаран сајт хемијска оловка доле радни фронт-енд код комбинован одмах. Ако не знате шта је Цодепен раније или нисте чули за њега, у основи је игралиште за онлине изворни код (назовимо га ОСЦП да звучи нердиер) за три мускетара фронт-енд кодирања; ХТМЛ, ЦСС и ЈаваСцрипт.

Постоје и други слични ОСЦП-и као ЈСФиддле, ЈС Бин, ЦССДецк & Дабблет. Цодепен је дефинитивно један од најпознатијих међу фронт-енд програмерима. Без даљег одлагања, скочимо право на неке основни и корисни савјети за коришћење Цодепена.

1. Покрените дугме

Ако нисте љубитељ начина на који излазни код у Цодепен-у стално освјежава док куцате, можете опт оут оф тхе “Ауто Упдате Превиев” опција, и добијате Рун тастер. Када га кликнете, моћи ћете да видите и ажурирате излаз вашег кода кад год пожелите.

Ово је такође одлична опција ако радите са кодом чији излаз пролази кроз многе измене изгледа, и понавља се сваки пут када се ажурира, што доводи до спорости.

2. Повећање / смањење броја

Повећајте или смањите бројеве у коду у кодном коду без уношења нових бројева. Све што треба да урадите је да користите комбинацију тастера Цтрл / Цмд и Стрелице горе и доле.

3. Мултипле Цурсорс

Можете поставити курсоре на више тачака у изворном коду, затим откуцајте или уредите све те тачке истовремено. Ово ради само ако уносите исте информације и смањујете потребу за копирањем. Само држите притиснут тастер Цтрл / Цмд док кликате на више тачака.

4. Различите обојене конзолне поруке

Тхе Конзола ЈаваСцрипт објекат има још неколико метода Осим тога Пријава() да вам дозволим штампајте ствари на веб конзоли.

Можете користити инфо (), упозори () и грешка () методе за информације, упозорење и еррор. Типично, веб конзоле обојавају ове поруке типично или ће приказати одговарајућу икону поред њих (као знак упозорења за поруку упозорења) за лакше препознавање.

Цодепен има своју конзолу које можете отворити кликом на дугме Конзола у доњем левом углу. Идеалан је за брзу провјеру конзолних порука без потребе да отварате конзолу претраживача. Ова конзола разликује различите типове конзолних порука са различитим бојама позадине.

5. Извоз

Једном спремљен, а хемијска оловка (јединствени кодни код) може се извести као ЗИП датотеку са свим својим ХТМЛ, ЦСС и ЈС кодом у датотекама. Постоји и опција за спремање оловке као гитуб (Гит репозиториј). Можете пронаћи дугме за извоз у доњем десном углу сваке оловке.

6. Пронађите и замијени

Пронађи и замијени - суштинска операција за људе који имају тенденцију да преименују имена променљивих сваки сада и онда. Цтрл / Цмд + Схифт + Ф је комбинација кључа у отвори “Пронађи и замијени” диалог.

7. Еммет Таб Триггер

Да ли знате за табулатори за Еммет кодирање? Еммет је алатка за продуктивност за фронт-енд програмере који вам дозвољавају откуцајте скелетни код који ће се касније проширити. Да бисте то урадили у Цодепен-у, једноставно укуцајте одговарајућу скраћеницу у едитор, притисните тастер Таб и комплетан код се појављује одједном. Доступно само за ХТМЛ ин Цодепен.

8. Набавите појединачне датотеке кода

Ако користите опцију извоза као што је раније поменуто, добићете све три датотеке (ХТМЛ, ЦСС и ЈС) ваше оловке. Али ако сте заинтересовани само један или два, и желите да их преузмете појединачно, постоји опција за то у Цодепен-у.

Када се улогујете у Цодепен, идите на вашу оловку и кликните на дугме Цханге Виев у горњем десном углу. На дну падајуће листе, видећете директне везе за преузимање појединачних датотека.

9. Прегледајте ЈаваСцрипт варијабле

Како се Цодепенова ЈаваСцрипт конзола повезује са ЈаваСцриптом сачуваним у вашој оловци, можете га користити и за брзо тестирање ЈаваСцрипт-а. Ова функција је нарочито погодна увид у ЈС варијабле, као овај пут не морате да уносите додатне конзоле или поруке упозорења у оригинални код искључиво у сврху тестирања.

10. Окрените оловку у шаблон

Ако имате тенденцију да покренете већину својих оловака са исти сет кода, можете користити предложак за сачувајте оне који понављају код. Да окренете оловку у предложак, означите опцију Предложак у менију Подешавања. Када касније креирате нову оловку, можете започните са сачуваним шаблоном кликом на стрелицу надоле на десној страни дугмета Нев Пен. Отворит ће се падајућа листа са свим спремљеним предлошцима које можете изабрати.