PenisJS и още 7 безсмислени JavaScript библиотеки
Всички се възхищават на стабилността, надеждността и логичността на JavaScript. Аз също съм върл фен на този език. Както знаем, освен с адекватно поведение в разнообразни ситуации, езикът е дарен и с олимпийски NPM басейн със смислени, ефективни и подпомагащи разработката библиотеки.
Днес ще ви запозная с тези JavaScript библиотеки, без които един сериозен проект би бил невъзможен.
PenisJS
Най-накрая някой е излязъл извън зоната си комфорт и е описал на какво точно прилича ===
операторът. Разбира се, отговорът е ясен. Ствол на пенис.
Библиотеката определено хваща окото чрез иновативния начин, по който можем да сравним две променливи. Нека проследим предимствата на PenisJS чрез този пример:
// Традиционно, супер безсмислено сравняване на променливи
let a = "mitio";
let b = "pishtova";
if (a === b) {
console.log("equal");
}
PenisJS разбива стереотипа и предлага нова възможност за сравнение. Такъв пробив в подхода на програмиране може да бъде сравнен единствено с откриването на електричеството. Убедете се сами:
// След като е заредена библиотеката:
// Задаваме топки
penis.setBalls("mitio");
// Задаваме главичка
penis.setHead("mitio");
// Най-накрая имаме удобството да използваме глобалните
// променливи, които PenisJS се е погрижил да зададе за нас
if (B===D) {
console.log("equal");
}
#КОЙ би се сетил, че подходът с ползването на глобални променливи ще се окаже толкова логичен, надежден и ефективен!
Thanos JS
Този NPM пакет стана известен преди малко повече от година и предизвика истински фурор сред научните среди на софтуерното инженерство.
Възможностите на този CLI побеждават в битката с всички компресори и оптимизатори до момента. Само с една команда Thanos JS редуцира проекта ви с цели 50%! Нещо повече, премахва изцяло онези файлове, които сметне за непотребни. Изборът се случва изцяло по негово усмотрение. Повечето аматьорски компресори като YUI и UglifyJS смачкват кода, премахват шпациите и новите редове, но не си свършват работата напълно. Винаги остават огризки.
Thanos JS прави всичко по-лесно и ефективно:
thanos snap-fingers --with-glove
Elevator.js
Една библиотека, насочена към хората, за които асансьорът е като втори автомобил. Ако клиентите от вашата ниша имат турбофетиш към автоматичното бавно изкачване, съпроводено от успокояваща музичка, определено си струва да включите Elevator.js в проекта си. Ще увеличите конверсиите си с поне 33%.
Практически библиотеката прави scroll-to-top бутон, работещ като копче на асансьор в панелка – без запаметяване на етажа и включвайки скърцащ, издигащ механизъм. Нечовешко удобство за потребителското изживяване обаче е музичката, която се пуска.
window.onload = () => {
// Задаваме песента и звука, когато
// някой се е изкачил до върха
const elevator = new Elevator({
mainAudio: "/src/to/galena.mp3",
endAudio: "/src/to/dzun.mp3",
});
// Палим
elevator.elevate();
}
Vapor.js
Това определено е най-гъвкавата и бърза библиотека, която съм виждал. С точно 0 реда код, тя не ви задължава да следвате някакъв подход за разработка. Не налага извикването на иницииращи функции. Не дава причина да я псувате.
Какво повече можете да искате от това?
Вкарването на Vapor.js в който и да е проект също е изключително лесно:
<script src="vapor.js"></script>
В модерните браузъри дори можете да използвате Data URL:
<script src="data:application/javascript,"></script>
И ето я черешката на тортата – реално не е необходимо да зареждате какъвто и да е код:
<script></script>
Brototype
Ако ви е омръзнало от грешката undefined is not a function, тази библиотека ще ви излекува от мъките. Brototype превежда последователните проверки с оператор &&
на народен език.
Тази гняз:
let myURL;
if (
app
&& app.config
&& app.config.environment
&& app.config.environment.buildURL
) {
myURL = app.config.environment.buildURL("dev");
}
се превръща в тази гняз това произведение на изкуството:
let myURL;
Bro(app)
.iDontAlways("config.environment.buildURL")
.butWhenIdo((buildURL) => {
myURL = buildURL("dev");
});
Смятам, че не ви трябват повече аргументи за това, защо си струва да включите Brototype в следващия си проект.
ComcastifyJS
Кой досега не се е чудил как да си увеличи времето на зареждане на страницата? С такива гнусни вируси като instant.page, които само забързват страниците, трябва да балансираме ситуацията по някакъв начин. ComcastifyJS идва на помощ!
Това е изключително модерна библиотека, която увеличава времето за зареждане на изображенията в една страница.
// Намираме всички img тагове и ги приготвяме
comcastifyjs.letsPrepareTheseImages();
// Поправяме бързото зареждане
comcastifyjs.fixMyImagesLoadingSoFast({
// Колко от максималния размер на
// изображението да се заради (0 - 1)
loadMaxPercent: 0.75,
// Колко допълнително време да се добави
// за зареждане в ms
loadSpeed: 100,
// Брой пиксели, който се зарежда при
// всеки тик на loadSpeed интервала
loadIncrement: 5,
});
jQuery
Това е големият гигант сред библиотеките, които изброявам. Чувствам, че е неравностойно да го включвам в този списък, тъй като бие по всички критерии останалите. Все пак, нека видим на какво е способен jQuery и защо не можем без него!
Една от най-отличителните черти за тази библиотека е символът $
. Той е синоним на основната функция jQuery()
, с която можем да селектираме елементи от DOM дървото. Това е нещо, което можем да правим и без jQuery, но, признайте си, не харесвате ли да си мислите за пари докато пишете код? $$$
jQuery ни дава стойностни алтернативи на множество native операции, които JS може да извършва с DOM дървото. Ето примери:
Селектиране
// Селектиране на елемент с jQuery
$(".zdr.bepce");
// Супер безсмислено селектиране без jQuery
document.querySelectorAll(".zdr.bepce");
Взимане на атрибути
// Взимане на стойността на съвсем
// случаен атрибут с jQuery
$(el).attr("data-poluchi-li");
// Иу. Защо без долар?
el.getAttribute("data-poluchi-li");
Скриване на елемент
// Кратко и ясно. С кинти.
$(el).hide();
// Бляк. По-добре да си импортна jQuery
el.style.display = "none";
Мисля, че напълно и аргументирано ви убедих, че jQuery трябва да присъства в проекта ви. Направете си кефа да пишете доларче!
cowsay
Ако въображавате потребителите си като едър рогат добитък, то най-ползотворна комуникация с тях ще проведете, ако им привлечете вниманието със себеподобни. Cowsay решава този проблем по иновативен начин – рисува крава чрез символи. Ето как се случва магията:
const cowsay = require("cowsay");
console.log(cowsay.say({
text : "хайде да гласуваме за ГЕРБ",
e : "oO",
T : "U "
}));
Кодът горе ще покаже на конзолата това:
____________________________
< хайде да гласуваме за ГЕРБ >
----------------------------
\ ^__^
\ (oO)\_______
(__)\ )\/\
U ||----w |
|| ||
Заключение
Мързи ме да пиша заключение. Затова просто ще ви похваля NS1. Супер бърз хостинг и готин съпорт. Хоствам 4 тежки сайта на машина с неголеми ресурси там. Моят блог също е при тях. Струва си да опитате!