15+ Haqqında Bilməlisiniz Ön Sıx vasitələr: 2020-ci il üçün Ən Sevdiyim Tapşırıqlar

Bir il keçdi və sənayedə bir çox veb tərtibatçısı kimi olsanız, ehtimal ki, iş axınında özünüzə aid hesab etdiyiniz yeni qabaqcıl alətlər tapmısınız. Mən eyni qayıqda oluram, xüsusən də yenilikləri mütəmadi araşdırmaqda çox iştirak etdiyim üçün alətlər mənzərəsi.


Bu yazıda, Mən (bəzi ekran görüntüləri və nümayişləri ilə) tapdığım ən maraqlı cəbhə alətlərinin bəzilərini toplayacağam ki, düşünürəm ki, 2020-ci ildə faydalı olacaqsınız. Bunlar mütləq ən populyar alətlər və ya isti vasitələr deyil, amma düşünürəm ki, onların hər biri istifadə vəziyyətində unikaldır və bir az daha çox diqqətə layiqdir. Bunlar mahiyyətcə mənimdir ön alətlərdə ilin ən sevimli tapıntıları.

Ən yaxşı cəbhə alətləri

İsti düymə

Ön son alətlər: isti düymə

JavaScript ilə tuş vuruşlarını aşkar etmək çox mürəkkəb bir iş deyil, lakin GitHub-dakı komandanın bu kiçik faydası onu çox sadə edir.

Bununla, bir klaviatura qısayolu ilə bir elementə hərəkət edə bilərsiniz.

Qısayolların növlərinə bir düymə, düymələr kombinasiyası və ya hətta düymələrin ardıcıllığı daxildir. Ayrıca bir hərəkət üçün çox qısa yola sahib ola bilərsiniz.

JavaScript idxal ilə birlikdə yalnız bir bəyannamədir:

‘./hotkey.js’ dən {quraşdırma} yükləyin;

üçün (const el of document.querySelectorAll (‘[data-hotkey]’)) {
quraşdırmaq (el)
}

Bu kod yerində olduqdan sonra əsas iş HTML-də aparılır. İstifadə olunan qısayoldan asılı olaraq bəzi məzmunu göstərmək üçün yaratdığım bağlantıların siyahısı:

  • Nümunə
  • Nümunə
  • Nümunə
  • Nümunə
  • Nümunə

Bağlantıların hər birinə əlavə edilmiş məlumat ötürücü atributlarına diqqət yetirin. Məqsədli hərəkətlər üçün açar düymələri (bu vəziyyətdə a: CSS vasitəsilə hədəf seçicini tetikleyen) təmin edən şeylərdir. Birdən çox isti düymələr vergüllə ayrılır; düymələrin birləşmələri bir artı simvolu ilə ayrılır; və açar ardıcıllıqlar boşluqla ayrılır.

Budur canlı nümayiş:

Qısayolların hər birini sınayın və JavaScript panelindəki kodun minimal olduğunu unutmayın. Modul idxal edildikdən sonra qurmaq çox sadədir. Və bir yan nöqtə olaraq, modal bir pəncərədə göstərmək istədiyiniz çoxsaylı qısa düymələr olan bir tətbiqiniz varsa (Twitter, GitHub və s. Kimi), yoxlamaq istəyə bilərsiniz SualMark.js, və mənim köhnə layihəm.

Əlbətdə ki, klaviatura qısa yolları ilə əlçatanlıq problemlərinə diqqət yetirmək istərdiniz, bu barədə məlumat üçün reponun README sənədini yoxlayın..

Freezeframe.js

Öndən gələn alətlər: Freezeframe.js

Qısa videoları veb səhifələrə yerləşdirmək, baş verən bir hərəkəti göstərmək üçün adi haldır. Bəzən cizgi GIF də uyğundur. Lakin GIF-lər diqqəti yayındırır, çünki məzmunu avtomatik oynayır.

Bu kiçik yardım proqramı, HTML’inizə daxil edilmiş cizgi GIF-lərinə video kimi bir funksionallıq əlavə etməyə imkan verir.

Saytınıza Freezeframe.js mənbəyini daxil etdikdən sonra yalnız bir JavaScript bəyannaməsi lazımdır:

yeni Freezeframe (‘. freezeframe’, {
tetikleyici: ‘hover’,
üst-üstə düşmək: yalan
});

İkinci arqumenti (məsələn, yeni Freezeframe (‘. Freezeframe’)) tərk etsəniz, heç bir çalma düyməsinə və hover üzərində animasiya tetiklemesine səbəb olacaq. Bunun yeganə çatışmazlığı odur ki, cizgi GIF olduğuna görə texniki cəhətdən bacarmırsınız "fasilə" bu, yalnız edə bilərsiniz "dayan" bu (yenidən əvvəldən başlayır deməkdir). Ancaq ümumiyyətlə GIF-lərdə bu elə də böyük bir şey deyil.

Budur üç fərqli nümunə ilə bir demo:

Yalnız bu aləti istifadə edərək, performansa qənaət edə bilməz, çünki pərdə arxasında tam GIF yükləri görünür. Ancaq səhifəni yüklədikdə GIF ekrandırsa, bunun tənbəl yük kitabxanası ilə birlikdə istifadə olunacağını güman edirəm.

ARC Toolbar

Ön son alətlər: ARC Toolbar

Keçiddən önə çıxan alətlərinizdə çoxlu sayda əlçatanlıq variantları olmalıdır.

Bu WCAG 2.1 Səviyyə A və AA qaydaları ilə əlaqəli səhvlər və xəbərdarlıqları tapmaqda kömək etmək üçün geliştirici alətlərinizə bir nişan əlavə edən bir Chrome uzantısıdır..

Bu vasitənin çox böyük olmasının iki səbəbi:

  • Geliştirici alətlər içərisində mövcud test / ayıklama iş axını ilə birləşir
  • Əlçatanlıq anlayışlarına görə geliştirici birliyində məşhur olan Paciello qrupu tərəfindən hazırlanmışdır

ARC Toolbar Xüsusiyyətləri

Uzantı quraşdırıldıqdan sonra yalnız geliştirici alətlərinizdəki nişanı seçin və seçin "Testləri işə salın". Başlanğıc çıxışı əvvəlki ekran görüntüsündə gördüyünüzə bənzəyəcəkdir. Növbəti ekran görüntüsündə göstərildiyi kimi müəyyən bir xüsusiyyətlə əlaqəli hər hansı bir potensial əlçatanlıq problemini görmək üçün oradan aşağıya doğru sürünə bilərsiniz:

ARC Toolbar Dəstəkləri Qazma

Diqqət yetirin "Links" solda seçim onun yanında onay işareti var. Bu vəziyyətdə araşdırmağı seçdim. Bu, səhifədə canlı səhifədəki geliştirici alətləri yuxarıda görə bildiyiniz kimi bütün seçilmiş obyektlərin olduğu yerləri göstərən bir əlavə əlavə edir..

Scene.js

Öndən hazırlanan alətlər: Scene.js

Hər il cəbhə alətləri mənzərəsində yeni növ animasiya kitabxanası görünür.

Bu il üçün seçimim Scene.js.

Bu, indiyə qədər nümayiş etdirilən digərləri kimi yalnız bir neçə dəqiqə ərzində işləyib işləyə biləcəyiniz biri deyil.

API-yə alışmaq üçün öyrənmə əyrisi var, buna bənzər bir şey görünür:

səhnə olsun = yeni mənzərə ({
".axtarış qutusu": {
"0%" : "eni: 50px",
"70%": "eni: 300px",
},
".xətti": {
"30%" : "eni: 0%",
"100%": "eni: 100%",
}
}, {
müddəti: 1,
asanlaşdırma: Scene.EASE_IN_OUT,
selektor: doğrudur,
}). exportCSS ();

səhnə.setTime (0);
keçmək = yalan;

sənəd.querySelector (".təqdim") .addEventListener ("vurun", funksiya () {
keçid =! keçid;
səhnə.setDirection (keçid ? "normal" : "tərs");
səhnə.play ();
});

Bu biri üçün koddur misallar ana səhifədə. Sadə bir kiçik cizgi axtarış qutusudur. Budur onların CodePen demoları:

Yenə də bu, tez öyrənmək üçün asan bir vasitə olmayacaq, ancaq olduqca sadə bir API kimi görünən yeni bir animasiya kitabxanasını sınamaq istəyirsinizsə, bu yaxşı bir seçim ola bilər.

Şərhlər

Ön səth vasitələri: Şərh

Mövcud məxfilikdən xəbərdar olan onlayn mənzərə bu kimi daha çox vasitələrdən istifadə edə bilər. Artıq bir müddətdir ki, WordPress veb saytımda təkmilləşdirilmiş şərh sistemlərinin seçimlərini nəzərdən keçirirəm və Commento möhkəm görünür.

Disqus (upvotes / downvotes, üst şərhlər və s.) Kimi bir şeyin işləməsini bəyənirəm, amma var çox tük.

Mən də çox istəyirəm ki, WordPress şərhləri öz-özünə ev sahibliyi edir, lakin Disqusun bu əlavə xüsusiyyətlərinə sahib deyillər. Hesab edirəm ki, Commento bu problemləri həll etmək üçün düzgün bir addımdır.

Mövcud bir şərh platformasından Commento-ya keçməyi düşünürsən kifayət qədər iş oxuduqlarımdan oxudum ki, bu, mənfi cəhətdir.

Ayrıca, Commento Disqus-dan idxal etməyə imkan versə də, idxal edə bilməyəcəksiniz "səslər" Disqus’un köhnə şərhləri və ya şərh yazan istifadəçilərin avatarları haqqında.

Əvvəlcə Disqus-a ixrac etməyincə, sonra Disqus-dan Commento-ya idxal etməyiniz (bu şərhə yazıldığınız zaman Disqus idxal vasitəsi ilə edilə bilər), köhnə WordPress şərhlərini Şərhə daxil etmək üçün bir yol yoxdur..

Son çatışmazlıq, Commento’nun özünüzü ev sahibliyi etməyincə pulsuz olmamasıdır. Ancaq Disqusun şişkinliyi və gizlilik məsələlərini nəzərdən keçirəndə kiçik aylıq ödəniş dəyərlidir.

Tarix Git

Ön Səth Vasitələri: Git Tarixi

Bu yalnız qabaqcıl alətlər kateqoriyasında olmasa da, sadəliyi və işləməsi ilə əlaqədar bu siyahıdakı ən sevilənlərimdən biridir..

Git Tarixi, hər hansı bir fayl üçün tarixi Git repo-da (GitHub, GitLab və ya Bitbucket) görmək üçün imkan verir.

Məsələn, deyək ki, dəyişikliklərin tarixinə baxmaq istəyirsən mənbə faylı üçün Normalaşdırın.css. Fayl aşağıdakı yerdədir:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Tarixini görmək üçün URL-dəki github.com-u github.githistory.xyz ilə əvəz edin:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

Yeni URL-dəki çıxış zamanla fayl dəyişikliyinə baxmaq üçün səliqəli, interaktiv bir üsul yükləyir. Hər hansı bir tarixi animasiya seçdiyiniz zaman hansı dəyişikliklərin baş verdiyini və istifadəçinin onları hansı əməli törətdiyini görməyə imkan verən bəzi maraqlı animasiyalar işə salınır..

CSS Bədii keçidlər

Öndən hazırlanan alətlər: CSS Feature Düymələri

Hələ də köhnə bir brauzer sınağını aparmalı olduğunuz bir mühitdə işləyirsinizsə, sınaq alətlər qutusuna əlavə etmək üçün bu yaxşı bir kiçik Chrome uzantısı ola bilər..

Yuxarıda göstərilən ARC Toolkit-a bənzər CSS Feature Toggles, brauzerinizin geliştirici alətlərinə yeni bir nişan əlavə etdi.

Nişanda, müasir CSS xüsusiyyətlərinin siyahısını görəcəksiniz.

Keçid üçün mövcud olan CSS xüsusiyyətləri

İstifadəçinin həmin xüsusiyyəti dəstəkləməyən brauzerdə səhifəyə daxil olanda səhifənizin necə göründüyünü dərhal görmək üçün bunları dəyişdirə bilərsiniz. Bu, köhnə mühitlərdə sxemlərin necə pozulduğuna qısa bir baxış əldə etmək üçün əla bir yoldur.

Fərqli xüsusiyyətləri seçərkən, dəyişiklikləri göstərmək üçün səhifə avtomatik olaraq yenilənir. Məsələn, Flexbox ilə qurulan bir sayt, yeni brauzerlərdə tədricən inkişaf edərkən nizamın sağlam olmasını təmin etmək üçün bəzi köhnə CSS-lərdən faydalanacaq.

Tətbiq yaradın

Ön Səth Vasitələri: Tətbiq yaradın

Şübhəsiz ki, cəbhə alətlərinizin iş axını qurmaq üçün bir çox seçim daxildir. Bu veb veb sayt və ya Parsel, populyar aktiv bağlayıcılarından istifadə edən və ya istifadə etməyi öyrənmək istəyən inkişaf etdiricilər üçün bir öyrənmə saytı və bir layihə nəsil vasitəsidir..

Qurmaq üçün istədiyiniz variantları seçmək üçün soldakı kateqoriyalara sürün və əsas pəncərədə lazımlı fayllar və konfiqurasiya seçimlərinə baxın.

Tətbiq Konfiqurasiya Seçimləri yaradın

Səhifə tam interaktivdir, buna görə məzmunlarına baxmaq üçün istənilən virtual sənədləri vura bilərsiniz və ya təsvirə baxmaq üçün seçilmiş seçim üzərində hover edə bilərsiniz və həmin seçimə uyğun olan hissənin qurulmuş hissələrini əlavə edin..

Həm öyrənmək, həm də yeni layihələr yaratmaq üçün çox faydalıdır!

CSSJanus

Ön son alətlər: CSS Janus

Beynəlmiləlləşmə sahəsində bu, stil tablolarını soldan sağa soldan sola və əksinə çevirməyə imkan verən onlayn bir vasitədir..

Bu, asanlıqla ərəb və ivrit dili kimi sağdan sola (rtl) dillər üçün üslub cədvəlləri yaratmağa imkan verir.

Budur CSS nümunəsi:

.nümunə {
üzmək: sol;
mətn hizalanması: sol;
padding: 1px 2px 3px 4px;
kənar-sol: 1em;
background-mövqe: 5% 100px;
kursor: ne-resize;
sərhəd radiusu: 1px 2px;
}

Yuxarıdakılar aşağıdakılara çevriləcəkdir:

.nümunə {
üzmək: sağ;
mətn hizalanması: sağ;
padding: 1px 4px 3px 2px;
kənar-sağ: 1em;
fon mövqeyi: 95% 100px;
kursor: nw-boyut;
sərhəd radiusu: 2px 1px;
}

Diqqətinizə çatdıraq ki, fərqlər yalnız float kimi xətləri deyil: sol və mətn düzləndirmə: sol, digərləri üfüqi doldurma bəyannamələri və arxa mövqe dəyərləri kimi.

Faydalı olaraq, alətin bir üslub blokunu və ya tək bəyannaməni gözardı etməsini istəyirsinizsə, @noflip direktivindən istifadə edə bilərsiniz:

/ * @ noflip * /. imzalı {
üzmək: sol;
}

.nəzərə alınmayan {
üzmək: sol;
/ * @noflip * / fon: #fff (poster-ltr.png);
}

Rəng oğrusu

Öndən gələn alətlər: Rəng oğrusu

Rəng oğrusu həqiqətən səliqəlidir və istifadəsi olduqca sadədir, lakin istifadə hallarında çox spesifikdir.

Əsasən, bu yardım proqramından istifadə edərək JavaScript-dən istifadə edərək müəyyən bir görünüşə əsaslanaraq 2-dən 20-yə qədər rəngin rəngini dəyişdirə bilərsiniz..

Bu, hər veb saytda və ya tətbiqdə istifadə edəcəyiniz bir şey deyil, amma xoş bir fikirdir və yəqin ki, bir müddətdir və son bir ildə yenilənib.

Sadə API istifadə edərək, görüntüdən bir sətirlə bir palitranı çəkə bilərsiniz:

qoy myPalette = colorThief.getPalette (img, 10);

Oradan, geri dönən serialı idarə etmək məsələsi var. Aşağıdakı CodePen’də qurduğum bir nümayişimi görə bilərsiniz. Göstərilən şəkildəki istifadəçi daxil etdiyi rənglərin sayını tutur. Serialda istifadə etdiyim kod:

myPalette.forEach (
element => rənglər.innerHTML + = ""
);

Palitranı elementlərdən və daxili üslublardan istifadə edərək düzəldirəm. Rənglər RGB dəyərləri olaraq qaytarılır.

CodePen demosunda mən CodePen-də rastlaşdığım kross-mənşəli problemlərlə tanış olmaq üçün bir vasitə istifadə edirəm, lakin adətən bu sətirlərə (şərhlərə) ehtiyacınız olmayacaq.

RegexGuide

Ön səth vasitələri: RegexGuide

Hər il müntəzəm ifadələr yaratmağa kömək edən cəbhə alətləri kolleksiyasına əlavə etmək üçün sərin bir interaktiv tətbiq tapdığım kimi görünür, bu ilki giriş budur. Əgər mənim kimi olsam, bunları qurmaq üçün əlindən gələni edəcəksən.

Bu, əvvəlcə başınızı gəzdirmək üçün bir az qəribədir, çünki bir sehrbaz kimi addım-addım irəliləyir..

Tamamlandığınız və hər bir şəraitiniz varsa, göstərilən şərtlərə cavab vermək üçün fərqli dəyərləri sınamaq iqtidarındadır..

Bu cür alətlər həmişə mənim çox sevdiyim yerlərdəndir, çünki onlar yalnız yorucu ola biləcək kodu yaratmaq üçün bir yol olaraq işləmir, ancaq sintaksisinizi də öyrənməyə kömək edir..

Ön üz alətləri: hörmətli qeydlər

Beləliklə, bunlar, mənim fikrimcə, son bir il ərzində kifayət qədər diqqət yetirmədiyini düşündüyüm daha maraqlı cəbhə alətləridir. Əminəm ki, belə bir tapıntılarınız var, buna görə onları aşağıda şərhlərdə qeyd etməkdən çəkin. Bununla yanaşı, əsas siyahı yaratmayan, lakin qeyd etməyi düşündüyüm işlərin son siyahısı budur:

  • wehatecaptchas – Heç bir şəkil və ya məktub / nömrə deşifrinə sahib olan bir captcha alternativi, hətta bir onay qutusu da yoxdur "robot olmadığımı təsdiqləyin"
  • sadəParallax – JavaScript ilə paralaks effektləri etmək üçün asan bir yol.
  • Lite YouTube Embed – Görünür 224X ənənəvi tətbiq kodundan daha sürətli.
  • Brauzerin standart üslubları – Hər hansı bir HTML elementini daxil edin və bu vasitə sizə hər bir brauzerin həmin element üçün standart CSS-i izah edəcəkdir.
  • Kim istifadə edə bilər – İki rəngli kombinasiyanı daxil edin və bu vasitə görmə qabiliyyəti olmayan istifadəçilərin hansı kombinatı mətn / fon üçün istifadə edə biləcəyini söyləyəcək.

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Layihə və təqdimat Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map