# Snippet A short piece of code intended to showcase or implement a specific concept, often used as a reusable code template. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## The weekly snippet-server: open-sourced DevFeed: [The weekly snippet-server: open-sourced]() Original publisher: [Read original article]() Author: Khan Academy Published: 2016-02-01T23:00:00Z Content type: article Language: en Sources: [Khan Academy]() Topics: [Snippet](), [configuration](), [email](), [Markdown]() Tags: [configuration](), [email](), [engineering](), [infrastructure](), [markdown](), [news](), [open](), [snippet]() ### AI overview Craig Silverstein describes Khan Academy's open-sourced weekly snippet server, a simple tool for sharing brief weekly work updates. It uses a textbox with optional Markdown formatting and makes snippets visible according to email-domain and server configuration. ### Source excerpt By Craig Silverstein When I joined Khan Academy, my first project was to write a version of the ... Read more ## Warp any DOM element with this bookmarklet DevFeed: [Warp any DOM element with this bookmarklet]() Original publisher: [Read original article]() Author: James Long Published: 2025-11-19T12:00:00Z Content type: tutorial Language: en Sources: [James Long]() Topics: [Warp](), [Document Object Model (DOM)](), [Snippet]() Tags: [js](), [snippet](), [warp]() ### AI overview This article presents a JavaScript bookmarklet for interactively selecting a DOM element and applying a visual warp effect to it. The code includes element highlighting, selection, draggable control points, and cleanup behavior. ### Source excerpt I've been working on a design and found a cool effect that would make a great bookmarklet. A bookmarklet is a JS snippet that you can drag to your bookmarks bar and run on any page. Press ESC to cancel`;const closeBtn=document.createElement('button');closeBtn.textContent='✕ Close';closeBtn.style.cssText=`padding: 6px 12px;background: #ef4444;color: white;border: none;border-radius: 4px;cursor: pointer;font-weight: 500;font-size: 12px;margin-left: auto;`;closeBtn.onclick=cleanup;instructions.appendChild(instructionText);instructions.appendChild(closeBtn);document.body.appendChild(instructions);document.addEventListener('mousemove',onSelectorMove);document.addEventListener('click',onSelectorClick);document.addEventListener('keydown',(e)=>{if(e.key==='Escape')cleanup();});window.__bezierCleanup=()=>{instructions.remove();cleanup();};}function onSelectorMove(e){if(!selectorActive)return;const target=document.elementFromPoint(e.clientX,e.clientY);if(!target||target===highlightBox)return;const rect=target.getBoundingClientRect();highlightBox.style.display='block';highlightBox.style.left=rect.left+'px';highlightBox.style.top=rect.top+'px';highlightBox.style.width=rect.width+'px';highlightBox.style.height=rect.height+'px';}function onSelectorClick(e){if(!selectorActive)return;e.preventDefault();e.stopPropagation();const target=document.elementFromPoint(e.clientX,e.clientY);if(!target)return;selectorActive=false;highlightBox.style.display='none';document.removeEventListener('mousemove',onSelectorMove);document.removeEventListener('click',onSelectorClick);selectElement(target);}function selectElement(element){selectedElement=element;const rect=element.getBoundingClientRect();const scrollX=window.pageXOffset||document.documentElement.scrollLeft;const scrollY=window.pageYOffset||document.documentElement.scrollTop;transformedContainer=document.createElement('div');transformedContainer.style.cssText=`position: absolute;left: ${rect.left+scrollX}px;top: ${rect.top+scrollY}px;width ## Using second-pass sorting prompts to improve LLM responses DevFeed: [Using second-pass sorting prompts to improve LLM responses]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2025-10-10T16:19:26Z Content type: article Language: en Sources: [Kaushik Gopal's Site]() Topics: [Large Language Model](), [Prompt Engineering](), [Snippet]() Tags: [llm](), [llms](), [snippet](), [sorting]() ### AI overview The article argues that apparently wrong LLM responses may be an initial pass at describing competing beliefs. It recommends using neutral second-pass "sorting statements" to compare evidence and improve results. ### Source excerpt Good sensemaking processes iterate. We develop initial theories, note some alternative ones. We then take those theories that we've seen and stack up the evidence for one against the other (or others). Even while doing that we keep an eye out for other possible explanations to test. When new explanations stop appearing and we feel that the evidence pattern increasingly favors one idea significantly over another we call it a day. LLMs are no different. What often is deemed a "wrong" response is often4 merely a first pass at describing the beliefs out there. And the solution is the same: iterate the process. ... What I've found specifically is that pushing it to do a second pass without putting a thumb on the scale almost always leads to a better result. To do this I use what I call "sorting statements" that try to do a variety of things Mike Caulfield is someone who cares about the veracity of information. The entire post is fascinating and has painted LLM search results in a new way for me. I now have a Raycast Snippet aiprompt; which expands to this: What is the evidence for and against the claim/guidance just stated? Already I'm seeing much better results. ## Styled checkboxes for Obsidian tasks without plugins or a custom theme DevFeed: [Styled checkboxes for Obsidian tasks without plugins or a custom theme]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2025-02-10T08:00:00Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Obsidian](), [CSS](), [Snippet]() Tags: [css](), [snippet]() ### AI overview A concise guide to styling Obsidian task checkboxes with custom CSS, adding visual states such as canceled, rescheduled, and in-progress without relying on plugins or a custom theme. ### Source excerpt I use Obsidian for tracking my weekly tasks.1 One thing I like to do, is mark tasks as "canceled", "rescheduled", "in progress", etc. in case I move them between weeks. These tasks should visually stand out from the rest. Custom themes like Obsidian Minimal provide this as an option. There's also plugins that do this. But I like to keep my Obsidian setup lean and only wanted this feature without other cruft. CSS to the rescue again! The linked forum post had the starting css snippet I needed. I customized further to include some more options that the Minimal theme includes. You can find my custom css snippet here. that's another post in itself. ↩︎ ## The Mintlify MDX VSCode extension DevFeed: [The Mintlify MDX VSCode extension]() Original publisher: [Read original article]() Author: Hahnbee Lee Published: 2024-03-26T00:00:00Z Content type: release Language: en Sources: [Mintlify Blog]() Topics: [VS Code Extension](), [MDX](), [Documentation](), [Snippet]() Tags: [announcements](), [documentation](), [extension](), [mdx](), [snippet](), [vscode]() ### AI overview Mintlify introduces an MDX VSCode extension that provides IntelliSense and snippets for its documentation components, including Cards, Steps, Tabs, and callouts. The extension is available on the Visual Studio Marketplace. ### Source excerpt Today, we're thrilled to introduce the Mintlify MDX VSCode extension. ## Launch Week II Day 2: Snippets V2 DevFeed: [Launch Week II Day 2: Snippets V2]() Original publisher: [Read original article]() Author: Joshua Kim Published: 2024-01-09T00:00:00Z Content type: release Language: en Sources: [Mintlify Blog]() Topics: [MDX](), [Documentation](), [Snippet]() Tags: [announcements](), [article](), [documentation](), [launch-week](), [mdx](), [snippet]() ### AI overview Mintlify introduces Snippets V2, a rebuild that supports reusable components and variables through MDX imports. The feature is intended to improve flexibility, performance, documentation versioning, and content reuse. ### Source excerpt Day 2 of Launch Week II brings Snippets V2 🚀. ## How we keep our code examples fresh DevFeed: [How we keep our code examples fresh]() Original publisher: [Read original article]() Author: Cully Wakelin Published: 2021-02-26T04:00:00Z Content type: tutorial Language: en Sources: [Temporal Blog]() Topics: [Code](), [Documentation](), [Tool](), [Snippet]() Tags: [code](), [documentation](), [how-to](), [snippet](), [tool](), [tutorials]() ### AI overview The article introduces Snipsync, a tool that merges source-code snippets into documentation. It explains that snippets must fit the surrounding documentation and that comments, variables, and function calls may require adjustment, while the approach can reduce the effort of keeping code examples up to date. ### Source excerpt In a previous post, about the making of our SDK tutorials, I talked a bit about a tool called Snipsync. In essence it merges source code snippets directly into our documentation, and we have been steadily converting our code examples to use it. ## Three web development bookmarklets DevFeed: [Three web development bookmarklets]() Original publisher: [Read original article]() Author: Stanko Published: 2019-08-17T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Development](), [Web Development](), [Snippet](), [dev-tools](), [browser](), [Code](), [JavaScript](), [console]() Tags: [browser](), [code](), [console](), [developer-tools](), [development](), [javascript](), [snippet](), [web-development]() ### AI overview A developer shares three browser bookmarklets for web development: identifying elements that cause horizontal scrolling, making page text editable, and toggling between right-to-left and left-to-right layout directions. ### Source excerpt Today I want to share three bookmarklets I love to use in development. You can add them to your browser, by creating a new bookmark and entering bookmarklet code instead of URL. Clicking on a bookmarkletI usually keep them in the bookmarks bar to make them easier to find. , will run the code snippet on the page you are currently on. For each bookmarklet I added a button to try it on this page. Find elements causing horizontal scroll # I found this one long time ago, and I have been copy-pasting it to every new machine since. It is super practical and it will highlight and log all elements that are causing pesky horizontal page scroll. javascript:void(function () { var documentWidth = document.documentElement.offsetWidth; var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT); while (treeWalker.nextNode()) { var rect = treeWalker.currentNode.getBoundingClientRect(); if (rect.right > documentWidth || rect.left < 0) { treeWalker.currentNode.style.setProperty('outline', '1px dotted red', 'important'); console.log(treeWalker.currentNode); } }; }()); One line version: javascript:void(function () { var documentWidth = document.documentElement.offsetWidth; var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT); while (treeWalker.nextNode()) { var rect = treeWalker.currentNode.getBoundingClientRect(); if (rect.right > documentWidth || rect.left < 0) { treeWalker.currentNode.style.setProperty('outline', '1px dotted red', 'important'); console.log(treeWalker.currentNode); } }; }()); Horizontal scroll detection Please note that my site has overflow-x: hidden on the content area. Make page editable # This will set contenteditable to true, allowing you to edit any text on the page. You can do the same thing using developer tools, but this one is just a little bit faster (and easier for non-developers). javascript:void(function () { document.body.contentEditable = 'true'; document.designMode = 'on'; }()); One line version: ja ## Highlight variables in Atom, Babel template strings DevFeed: [Highlight variables in Atom, Babel template strings]() Original publisher: [Read original article]() Author: Stanko Published: 2016-05-07T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Atom](), [Babel](), [es6](), [Snippet](), [Less]() Tags: [atom](), [babel](), [css](), [es2015](), [es6](), [less](), [snippet](), [template-strings](), [variable]() ### AI overview A guide to fixing an Atom Babel plugin issue where variables in ES6 template strings are not highlighted. It provides an Atom style.less snippet that styles JavaScript variables and explains how to inspect Atom's element classes for additional CSS or LESS customizations. ### Source excerpt Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add atom-text-editor::shadow before your rules. If anyone is interested, I'm using Monokai Seti theme. ## Jekyll Read more link DevFeed: [Jekyll Read more link]() Original publisher: [Read original article]() Author: Stanko Published: 2016-02-27T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Jekyll](), [Snippet](), [Users]() Tags: [content](), [jekyll](), [snippet]() ### AI overview A short Jekyll tutorial showing how to add a "Read more" link when a post excerpt differs from the full post content. ### Source excerpt Please note that I'm not using Jekyll anymore, so this post might be outdated. It is nice to use post.excerpt instead of post.content on your Jekyll home page, but then users can't see if there is more to read until they open the whole post. To add Read more link, you can use this simple snippet. {% if post.excerpt != post.content %} Read more {% endif %} ## Coding: Increase Your Reading and Writing Speed DevFeed: [Coding: Increase Your Reading and Writing Speed]() Original publisher: [Read original article]() Author: Jay (noreply@blogger.com) Published: 2013-06-11T17:31:00Z Content type: tutorial Language: en Sources: [Jay Fields]() Topics: [coding](), [Snippet](), [Emacs](), [ide](), [optimize](), [Clojure]() Tags: [clojure](), [coding](), [emacs](), [ide](), [optimize](), [productivity](), [snippet]() ### AI overview The article explains how to use code-frequency analysis to choose a small number of editor shortcuts, snippets, and custom font locks. It illustrates the approach with Clojure code, Emacs, and IntelliJ examples. ### Source excerpt A teammate of mine recently expressed a desire for a shortcut for something we type often. I started looking into our shortcut options and came to a common determination: We can do this, but the number of 2 key shortcuts available to us is finite, so we better use them wisely. I wrote the following unix to give me a rough idea of what we type frequently. find . -name "*.clj" | xargs cat | tr -s '[:space:]:#()[]{}\"' '\n' | sort | uniq -c | sort -nnote: If you're not writing clojure you'll want to look for something other than .clj files, and you might also want to tweak what you replace with a new line. The above unix gave me an ordered list of the most typed 'words' across all of my codebases. At this point I had some science for setting up some shortcuts. Writing You'll want to look into whatever editor/ide you use and see if you can find key shortcuts and snippet expansion. My editor is emacs; I assigned some key-chords and some yasnippets. If you're not using emacs you should have something similar in whatever you are using. While I wanted to define some shortcuts, I also didn't want to create so many that I was constantly wasting time looking up what I'd created. Based on that desire I created: 2 shortcuts (key-chords) for two of the most duplicated words. The shortcuts are concise by design, but that makes them a bit harder to remember. You can probably get started with more than 2, but I didn't see much harm in starting there. a dozen snippets for the next most used words. These snippets are descriptive enough to easily remember, thus I felt comfortable defining several of them. e.g. pps expands to (println (pr-str )). Having shortcuts and snippets will obviously make me more productive, and the unix helped me figure out which words were the most important to optimize for. Reading Most editors/ides also give you a summary view for common code patterns. For example, IntelliJ displays lambdas when the actual code is actually an anonymous class. Emacs gives you