Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[rockthenet]

Moin Leute,

ich bin schon lange stiller Leser hier im Forum und habe schon oft von euren Tipps profitiert. Heute möchte ich mal etwas an die Community zurückgeben.

Die Idee kam mir heute ganz spontan: Da ich mittlerweile viele meiner großen Skripte nur noch maintaine, vergesse ich manchmal schlichtweg, wie sie im Detail aufgebaut sind oder wo genau ich welche Logik versteckt habe. Die normale Browser-Suche (Strg+F) hilft in Blockly leider gar nicht, da sie den Workspace nicht bewegt.

Ich habe mich heute mal an ein wenig "Vibe Coding" mit Gemini gesetzt und dieses kleine Bookmarklet entwickelt. Es ist dafür gedacht, in riesigen Blockly-Bergen sofort ans Ziel zu kommen.

Was kann das Teil?

• Springt direkt zum Block: Suchbegriff eingeben, und der Workspace zentriert sich sofort auf den gefundenen Block.

• Multi-Search: Bei mehreren Treffern (z.B. 1/5) einfach das Bookmarklet nochmal klicken (oder im Feld Enter drücken), um zum nächsten Block zu springen.

• Exakter Match: Sucht ihr mit Anführungszeichen (z.B. "Licht an"), wird nur nach dem exakten Wortlaut gesucht. Ohne "" ist es eine "Enthält-Suche".

• Deaktivierte Blöcke: Findet auch ausgegraute Blöcke zuverlässig.

• Visueller Glow: Der Block bekommt kurzzeitig einen dezenten weißen Schein, damit man ihn sofort sieht (ohne ihn permanent zu markieren).

Der Code für das Lesezeichen:
Einfach ein neues Lesezeichen im Browser anlegen und bei der URL diesen Code einfügen:

javascript:(function(){window.blyIdx=window.blyIdx||0;window.lastS=window.lastS||"";let s=prompt(`Suche (Treffer: ${window.lastHits||0}, Aktuell: ${window.blyIdx+1}):`,window.lastS);if(!s){window.blyIdx=0;window.lastS="";return}if(s!==window.lastS){window.blyIdx=0;window.lastS=s}let isEx=s.startsWith('"')&&s.endsWith('"');let q=isEx?s.slice(1,-1):s.toLowerCase();let f=(d)=>{let all=Array.from(d.querySelectorAll(".blocklyText, .blocklyEditableText text")).filter(e=>{let t=e.textContent;return isEx?t===q:t.toLowerCase().includes(q)});let ifs=d.querySelectorAll("iframe");for(let i=0;i<ifs.length;i++){try{let res=f(ifs[i].contentDocument);if(res.length>0)all=all.concat(res)}catch(e){}}return all};let results=f(document);window.lastHits=results.length;if(results.length>0){if(window.blyIdx>=results.length)window.blyIdx=0;document.querySelectorAll(".blocklyPath").forEach(el=>el.style.filter="");let t=results[window.blyIdx];const b=t.closest("g[data-id]");const d=t.ownerDocument;const w=d.defaultView;if(b&&w.Blockly){const id=b.getAttribute("data-id");const ws=w.Blockly.getMainWorkspace();if(ws&&id){const canvas=d.querySelector(".blocklyBlockCanvas");if(canvas){canvas.style.transition="transform 0.4s ease-out"}ws.centerOnBlock(id);w.Blockly.hideChaff();setTimeout(()=>{if(canvas)canvas.style.transition=""},500);const p=b.querySelector(".blocklyPath");if(p){p.style.filter="drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.9))";setTimeout(()=>{p.style.filter=""},4000)}}}window.blyIdx++}else{alert("Keine Treffer für: "+s);window.blyIdx=0}})();

Kurze Anleitung:

• Lesezeichen anklicken.

• Wort suchen.

• Wenn es mehrere Treffer gibt, einfach nochmal das Lesezeichen klicken und Enter drücken, um zum nächsten zu "steppen".

Vielleicht hilft es dem einen oder anderen von euch ja auch so sehr wie mir! Da es JS ist, kann sich das natürlich jeder im Code noch auf seine Bedürfnisse anpassen (z.B. die Glow-Farbe oder Dauer).

Viel Spaß beim Suchen 🔎😉