Native CSS Search Engine für den Browser

Jets.js
Keine Kommentare

Vielen Entwicklern dürfte das folgende Szenario bekannt sein: das HTML-Markup ihrer Seite rendert Backend-seitig und beinhaltet dabei ein mehr oder minder großes Datenset. Will man diese Liste durchsuchen, stehen Entwickler verschiedene Methoden für die Implementierung einer Suchfunktion zur Verfügung, die – je nach Umfang der Datenliste – durchaus einige Zeit in Anspruch nehmen kann.

Besonders einfach lässt sich eine solche Suche mit der von Denis Lukov entwickelten nativen CSS Search Engine Jets.js einbinden. Die Idee hinter dem Tool ist simpel: es soll während des Filterns nicht jedes Attribut jedes Tags beeinflussen; stattdessen wird nur im <style>-Tag eine dynamische CSS-Regel angewandt, anhand der der Browser entscheidet, welche Einträge in der Liste angezeigt oder versteckt werden.

Der besondere Vorteil von Jets.js liegt dabei auf der Hand. Da es sich um reines CSS handelt, kann das Tool auf jedes Tag angewandt werden – egal, ob es sich dabei um eine geordnete oder ungeordnete Liste, ein <div> oder ein Tabellen-Tag handelt.

Installation und Nutzung

Die Installation der nativen CSS Search Engine ist denkbar einfach: sie kann entweder mit Bower oder npm installiert werden; alternativ steht sie auf GitHub zum Download zur Verfügung. Das Tool kommt zudem mit allerhand verschiedener Optionen und Methoden daher, die es Usern ermöglichen, die CSS Search Engine an ihre eigenen Bedürfnisse anzupassen. Sie sind übersichtlich auf der Produkt-Website zusammengefasst.

Der Browser-Support von Jets.js umfasst alle modernen Browsern, den Internet Explorer ab Version 9 sowie zahlreiche Mobile-Browser. Aktuell steht Version 0.1.0 des Tools zur Verfügung; mehr Informationen dazu finden sich entweder auf GitHub oder der Produktseite. Dort gibt es auch eine Demo-Version, die das Tool in Aktion zeigt.

Name Jets.js
Hersteller Denis Lukov
Projektwebsite http://nexts.github.io/Jets.js/
GitHub https://github.com/NeXTs/Jets.js
webinale – the holistic web conference

Webperformance und Page Speed 2021

mit Sven Wolfermann (maddesigns)

UX Design: Kitsch – du willst es doch auch!

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

 

Software Architecture Camp

Advanced Web Pentesting

mit Christian Schneider (Schneider IT-Security)

What Star Wars Taught Me About Secure System Design

mit Anne Oikarinen (Nixu Corporation)

Aufmacherbild: Airplanes on airshow. Aerobatic team performs flight at air show von Shutterstock / Urheberrecht: Lucian BOLCA

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -