Деминификујте и улепшајте код на мрежи

Деминификујте одређени формат

Сваки формат има своју страницу са детаљима важним за тај језик:

• Деминификуј JavaScriptJavaScript
• Деминификуј CSSCSS
• Деминификуј HTMLHTML
• Деминификуј XMLXML
• Деминификуј JSONJSON

Шта је минификација кода?

Програмери пишу код који ће читати и други програмери. Зато додају коментаре, увлачење, празне редове између блокова и називе променљивих који објашњавају њихову намену. Све то помаже људима, али прегледачу није потребно. Минификација је корак изградње који уклања оно што машини не треба: размаке, преломе редова, коментаре, а врло често и изворне називе променљивих и функција, замењујући их једним словом. Понашање програма остаје потпуно исто, мења се само његов изглед.

Уштеда је значајна. Минификован JavaScript пакет често је 30 до 70 процената мањи од изворног кода, што значи мање бајтова преко мреже, бржи први приказ и боље показатеље Core Web Vitals. Зато скоро сваки продукциони сајт испоручује минификован JS, CSS и HTML. Цена те уштеде је датотека сведена на један густ ред који човек тешко чита. Када треба да разумете такву датотеку, отклоните грешку или проверите шта она заправо ради, први корак је деминификација.

Шта ради овај алат за деминификацију?

LFUnminify узима минификован код и поново му даје читљиву структуру. Враћа увлачење, смешта сваку наредбу у засебан ред, раздваја блокове и операторе размацима и примењује доследна правила форматирања за препознати језик. Пакет од четири хиљаде знакова у једном реду постаје неколико стотина правилно угнежђених редова кроз које можете да се крећете, претражујете их и пратите логику.

У позадини се покреће Prettier, форматер који многи JavaScript тимови већ користе, директно у вашем прегледачу. Резултат зато одговара ономе што би ваш уређивач направио од уобичајене изворне датотеке и делује познато. Препознавање је аутоматско: налепите садржај и алат утврђује да ли је у питању JavaScript, CSS, HTML, XML или JSON, па га затим форматира одговарајућим поступком.

Једно ограничење треба одмах јасно рећи. Деминификација није декомпајлирање. Коментари, изворни називи променљивих и белешке програмера обрисани су приликом изградње и ниједан алат их не може вратити из саме датотеке. Добијате добро организован, читљив код кроз који се лако крећете, али кратки називи минификатора остају. У пракси је то довољно да пратите логику, пронађете функцију или видите које податке скрипта шаље и куда.

Подржани формати кода

Један уређивач, пет језика. LFUnminify чита налепљени садржај, препознаје језик и прослеђује га парсеру намењеном тој синтакси. Не морате да бирате формат из менија, а чак и датотека са погрешним наставком биће правилно обрађена:

• JavaScript, укључујући ES6 и новију синтаксу, модуле, асинхрони код и JSX. Типичан пример је пакет који су направили webpack, Vite, esbuild или Terser.
• CSS, укључујући савремену синтаксу, прилагођена својства, медијске упите и угнежђена правила. Идеално за стилске листове настале уз Tailwind, Sass или PostCSS.
• HTML, укључујући уграђене блокове script и style, који се форматирају заједно са ознакама уместо да остану у једном дугом реду.
• XML, укључујући мапе сајта, RSS изворе, SVG датотеке, SOAP поруке и конфигурационе датотеке испоручене без иједног прелома реда.
• JSON, укључујући дубоко угнежђене API одговоре, манифесте пакета, конфигурационе датотеке и податке из евиденција догађаја.

Када вам треба деминификација кода?

Деминификација ретко служи само радозналости. Обично је то најбржи начин да одговорите на конкретно питање о коду који нисте написали, или о свом коду који више не можете лако да прочитате:

• Отклањање грешке у продукцији. Траг стека упућује на ред 1, колону 24815 у пакету. Форматирање враћа стварне редове и омогућава да пронађете функцију која је заиста изазвала грешку.
• Провера скрипте треће стране. Пре него што додате аналитику, виџет за ћаскање или партнерску скрипту на сајт, деминификујте је и прочитајте шта прикупља, са којим доменима комуницира и шта уписује у складиште прегледача.
• Читање компајлираног стилског листа. Радни оквири са помоћним класама праве огромне CSS датотеке у једном реду. Улепшавање открива каскаду, правило које има предност и разлог због којег се ваша измена игнорише.
• Преглед API одговора. JSON подаци копирани са картице за мрежу тешко се читају без форматирања. Када се уреде, структура, угнежђивање и поље које недостаје постају видљиви за неколико секунди.
• Учење из стварног кода. Читање начина на који добро осмишљена библиотека решава проблем убрзава учење, а форматирана датотека омогућава да то радите без напора.

Како се користи LFUnminify

Код можете унети на три начина. Налепите га директно у леви панел, кликните на Изабери датотеку да отворите датотеку са свог рачунара или је превуците у област за унос. За преглед ресурса са активног сајта отворите га преко view-source или развојних алата прегледача, копирајте га и налепите овде. Можете и да сачувате .js, .css, .html, .xml или .json датотеку и отворите је помоћу дугмета Изабери датотеку.

Форматирање почиње аутоматски, без тражења посебног дугмета. Алат чека да престанете да куцате, препознаје језик и приказује улепшан резултат у десном панелу, са истицањем синтаксе. Затим једним кликом можете да копирате цео резултат у оставу или га преузмете као датотеку са одговарајућим називом и отворите у свом уређивачу.

Две ситнице помажу код дугих датотека. Укључите бројеве редова када треба да наведете тачан положај или упоредите две верзије, а избор ће бити сачуван за следећу посету. Ако препознати формат није онај који сте очекивали, и то може бити користан траг: датотека препозната као JavaScript, иако сте очекивали JSON, често је JSONP одговор или конфигурација обавијена изразом доделе.

Ваш код никада не напушта ваш рачунар

Ово заслужује јасно објашњење. Форматирање се извршава локално, у вашем прегледачу, помоћу JavaScript кода учитаног заједно са страницом. Ваш код се не отпрема, не чека у реду на серверу, не уписује у базу података и нигде се не бележи. Када се страница учита, можете да искључите мрежу и деминификација ће наставити да ради, што је најједноставнија потврда да се ништа не шаље.

Зато можете да налепите власнички код, интерни пакет, клијентски пројекат или конфигурацију чију структуру не желите да делите. Ништа што налепите или отворите не напушта ваш прегледач, а алат никада не преузима датотеке у ваше име. Наш сервер тако не сазнаје који код или које сајтове прегледате. Нема отварања налога нити праћења садржаја који уносите.

Зашто је LFUnminify бесплатан?

LFUnminify припада породици бесплатних алата које развија Ludovic Frank, заједно са генератором лозинки, генератором фавикона, алатом за палете боја и још неколико услуга. Разлог је једноставан: мали помоћни алати које програмери користе више пута недељно не треба да захтевају регистрацију, пролазак кроз рекламе или праћење преостале квоте. Овде нема налога, ограничења употребе нити понуде плаћене надоградње унутар производа.

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

Честа питања