Context-Based UI: Use these techniques to make UI Experiences more Practical! - Related to context-based, fixing:, use, ui, advanced

4 steps to building a natural language search tool

“We have a problem. Our current search method for sifting through PDFs is extremely manual and time consuming. Is there an easier way?”.

As a developer, this is one of those questions that really gets me excited. I was tasked with finding a way to transform a cumbersome, archival process into an efficient, intuitive search experience. It’s a way to make a group of people’s lives easier, and because of the organizations they work for, help them be more effective in providing humanitarian assistance to people in need around the world. I couldn’t imagine a more effective project to be working on.

Unlocking the United Nations’ legacy for rapid action.

Since 1945, the United Nations has produced resolutions and other documents that guide international peace and security efforts. Yet accessing this wealth of knowledge remains a challenge, including for organizations such as the International Committee of the Red Cross (ICRC). Currently, delegates at ICRC’s permanent observer mission to the UN advise member states and other stakeholders on international humanitarian law and humanitarian issues. When states negotiate relevant resolutions and other UN products, leaning on pre-existing humanitarian language from UN resolutions can provide precedence. This often requires sifting through PDFs to find relevant content within documents—a time-intensive, manual process ill-suited to the fast-paced world of humanitarian diplomacy.

A live, accessible, and scalable search platform.

To solve this, I built a single-page application (SPA) that enables clients to input natural language queries and instantly retrieve relevant UN resolutions. The solution is live now at [website] and serves as a robust example of how technology can simplify access to critical information.

Using Amazon Textract, I extracted raw text from decades’ worth of UN Security Council Resolutions and Presidential Statements and six years of UN General Assembly Resolutions. A Go script then parsed this text using Regex matching, segmenting it into individual resolutions for easier indexing. Search-ready database with MongoDB Atlas.

I adapted a [website] script from MongoDB to upload the parsed resolutions as embeddings into a MongoDB Atlas database. This step ensures the content is structured for fast and relevant searches. User interface built with [website].

The front end is an intuitive SPA created with [website] consumers simply enter semantic search queries—such as “resolutions on humanitarian access in armed conflicts”—and receive results in seconds. Backend hosted on AWS.

The backend relies on AWS Lambda and API Gateway, ensuring scalability and seamless performance. The entire application is hosted as a subdomain on AWS Amplify, combining reliability with ease of access.

This code is publicly available at projectrefuge/resolutions-search-template. This initiative will empower other organizations to adapt and expand the solution to their unique needs.

Broader implications: a blueprint for impact.

The implications of this project go far beyond the ICRC’s use case with UN Resolutions. With slight modifications, the tool could index and search any collection of legal and policy documents. This approach is a blueprint for organizations aiming to leverage technology for improved decision-making and more effective action. For nonprofits, this demonstrates the power of owning your code and building tailored solutions. For developers, it’s a reminder of how open source can accelerate progress in humanitarian and public policy sectors.

Projects like [website] highlight the potential of open source to transform how we access and use information. If you’re a nonprofit, explore GitHub for Nonprofits to discover tools and resources that can help you build your own solutions. Developers eager to contribute to impactful work can browse the For Good First Issue program to find projects that align with their skills and values.

Finally, stay tuned as we work to identify other opportunities with humanitarian actors such as the ICRC to bridge the technology and humanitarian space. Together, we can build a future where knowledge is more accessible and tools are built with collaboration in mind, ensuring that humanitarian efforts are supported by cutting-edge technology.

Let’s code for good—and make a lasting impact.

Ryan is joined by Fynn Glover (CEO) and Ben Papillon (CTO), cofounders of Schematic, for a conv......

Stationery Pad is a handy way to nix a step in your workflow if you regularly use document templates on your Mac. The long-standing F......

From finding to fixing: GitHub Advanced Security integrates Endor Labs SCA

It’s no wonder developers are increasingly overwhelmed. The number of new CVEs % in the last decade. And the average project, with just 10 direct dependencies, can have hundreds of indirect dependencies. Put simply, developers are often buried under a mountain of security alerts and unable to prioritize which ones to remediate first.

While high-profile supply chain attacks like last year’s XZ Utils backdoor tend to capture attention, the danger they pose is just a fraction of the overall threat landscape. The bigger risk often comes from unpatched vulnerabilities in lesser-known open source dependencies.

GitHub’s partnership with Endor Labs cuts through the noise to help developers accurately identify, remediate, and fix the most critical vulnerabilities—without ever leaving GitHub.

Fixes in minutes, not months GitHub Advanced Security helps teams eliminate security debt and prevent new vulnerabilities with AI-powered remediation, static analysis, secret scanning, and software composition analysis. Learn about GitHub Advanced Security >.

With Endor Labs software composition analysis (SCA) integrated into GitHub Advanced Security and Dependabot, development teams can dismiss up to 92% of low-risk dependency security alerts to focus instead on the vulnerabilities that matter most.

Prioritize Endor Labs findings in GitHub based on function-level vulnerability reachability for both direct and transitive dependencies.

Endor Labs SCA brings context into open source vulnerability detection.

Endor Labs SCA helps identify and prioritize dependency vulnerabilities by their potential impact, , exploitability, and more. For example, Endor Labs checks if the vulnerable function of a given dependency is actually reachable by your application or if it is just sitting on an unused corner of a transitive dependency. Security teams can also configure risk, licensing, and permission profiles to ensure developers are not bothered unless the risk is truly warranted.

Prioritize and fix open source vulnerabilities with GitHub.

GitHub Advanced Security integrates crucial security practices directly into the development workflow, offering developers a streamlined way to secure their code. Its aspects are free for open source maintainers, including dependency review, secret scanning, code scanning, and Copilot Autofix.

GitHub Actions makes it easy to automate all your software workflows, whether you want to build a container, deploy a web service, or welcome new customers to your open source project. These actions are often updated with bug fixes and new functions, which can take time to maintain.

Endor Labs automatically discovers in-use actions and their dependencies to ensure they fit your risk, licensing, and permission profiles. Dependabot automatically updates your dependencies, and code scanning helps identify existing workflow configuration vulnerabilities and prevent new ones.

Achieve SLSA3 compliance with GitHub Actions and Artifact Attestations With GitHub Actions, you can build, test, and deploy your code right from GitHub. Artifact Attestations let you create provenance signatures, which provide an unforgeable paper trail that links your artifact back to its originating workflow run. Gate deployments through attestation verification to ensure that what you deploy is exactly what you built, guaranteeing that the artifact has not been tampered with. This significantly mitigates the most common attack vectors targeting your build pipelines.

Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for grad......

Transitioning Top-Layer Entries And The Display Property In CSS.

We are getting spoiled with so many new feat......

This week's Java roundup for February 17th, 2025 elements news highlighting: the release of Apache NetBeans 25; the February 2025 release of the Payar......

Context-Based UI: Use these techniques to make UI Experiences more Practical!

User interface (UI) design has evolved significantly over the years, focusing on efficiency, accessibility, and user experience. One emerging principle that is transforming modern interfaces is Context-Based UI.

When designing frontend experiences we are often inclined to make something that fits the aesthetics rather than its practical Utility.

We are so used to the traditional centralized settings panels and toolbars, but the issue is that: even if it looks good, for practical applications it might not be very convenient and it will also face discoverability issues from the new consumers.

Context-based UI ensures that relevant options and controls appear exactly where and when they are needed.

So lets take a Look on what is context based UI.

Context-Based UI (CBUI) is a design approach where tools, settings, and actions are placed in close proximity to the content or task at hand. Instead of forcing individuals to navigate away from their primary workflow to find settings or controls, context-based UI integrates these elements directly into the workspace.

This principle is widely used in modern applications like Visual Studio Code (VS Code), where elements like debugging, version control, and testing tools appear within the coding area itself, eliminating unnecessary friction in the developer's workflow.

Traditional UI designs often force people to switch contexts by opening separate settings windows, navigating through multiple menus, or searching for specific options. This can lead to too much strain and decreased productivity. Context-based UI, on the other hand, reduces friction by:

Minimizing context switching – customers stay focused on their primary task without unnecessary navigation.

– people stay focused on their primary task without unnecessary navigation. Improving discoverability – Essential options appear when needed, rather than being hidden in deep menus.

– Essential options appear when needed, rather than being hidden in deep menus. Enhancing efficiency – Quick access to relevant tools speeds up workflows and reduces frustration.

– Quick access to relevant tools speeds up workflows and reduces frustration. Providing intuitive interaction – individuals interact with settings in a natural and immediate way, leading to a smoother learning curve.

Visual Studio Code exemplifies this principle by embedding controls directly within the coding environment:

Run tests inline – Instead of navigating to a separate panel, a small “Run Test” button appears beside the test function.

– Instead of navigating to a separate panel, a small “Run Test” button appears beside the test function. Add breakpoints directly in the editor – Debugging controls are embedded within the code itself.

– Debugging controls are embedded within the code itself. Inline error suggestions – Rather than requiring individuals to check an error panel, suggestions appear where the issue occurs.

Google Docs enhances writing efficiency by displaying a floating formatting toolbar when clients select text. This eliminates the need to navigate to the main toolbar, making text editing faster and more intuitive.

In Figma, when selecting an object, only the relevant design and styling options appear nearby. This reduces clutter and ensures designers can focus on their work without searching through multiple menus.

Implementing Context-Based UI in Your Designs.

To create a successful context-based UI, consider the following principles:

Identify user needs – Analyze workflows to determine which actions are frequently used and where they should appear. Reduce unnecessary steps – Keep interactions efficient by eliminating redundant navigation. Use progressive disclosure – Show relevant options only when needed to avoid overwhelming individuals. Ensure consistency – Maintain uniform placement and interaction patterns across the UI. Offer customization – Allow individuals to configure which contextual elements they want to see.

As software becomes more complex, the need for smarter, more adaptive interfaces will grow.

By embracing context-based UI, designers can create more intuitive and productive experiences, ensuring that tools and settings are always exactly where they need to be—no more, no less.

This is just the part one of this series, in the coming posts we will explore this concept with a Real-World Example, where I implemented Context-Based UI design into LiveAPI.

It’s no wonder developers are increasingly overwhelmed. The number of new CVEs % in the last decade. An......

Ollama provides a lightweight way to run LLM models locally, and Spring AI enables seamless integration with AI models in Java applications. Let us de......

Wayland, qui remplace X11, a besoin d'un compositeur pour les interfaces. C'est le rôle de Labwc. Le projet est disponible en version [website] Il suppor......