# UI components Published articles for UI components. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Object-Oriented Design Lessons from Trello, Notion, Tinder, and Amazon DevFeed: [Object-Oriented Design Lessons from Trello, Notion, Tinder, and Amazon]() Original publisher: [Read original article]() Author: William Hudson Published: 2026-09-16T08:30:06Z Content type: tutorial Language: en Sources: [UX Daily - User Experience Daily]() Topics: [ui](), [User Experience](), [Design system](), [Notion]() Tags: [design](), [interface](), [object](), [properties](), [structure](), [ui-components](), [user-experience]() ### AI overview This tutorial explains object-oriented design through examples from Trello, Notion, Tinder, and Amazon. It argues that organizing interfaces around meaningful, stable objects and their operations can improve clarity and support scalable product structures. ### Source excerpt Which apps do you use throughout your day? Maybe you manage your projects on Trello, use Notion as an internal docs site, and maybe, just maybe, you do some swiping on Tinder during your lunch break. Despite looking nothing alike, these three highly successful apps are organized around the same idea: Give users a small number of meaningful objects, let them act on those objects directly, and the interface will feel intuitive without explanation.Cards. Blocks. Profiles: These UI components are the central concepts around which Trello, Notion, and Tinder organize everything else. We can call them objects. Users recognize them immediately, know what they can do with them, and build their entire... ## MCP UI: Breaking the text wall with interactive components DevFeed: [MCP UI: Breaking the text wall with interactive components]() Original publisher: [Read original article]() Author: Liad Yosef Published: 2025-08-05T17:21:27Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Model Context Protocol](), [ui](), [Shopify](), [Artificial Intelligence]() Tags: [agents](), [ai](), [mcp](), [shopify](), [ui](), [ui-components]() ### AI overview Shopify presents MCP UI, an extension of the Model Context Protocol that lets AI agents return embedded, interactive UI components instead of relying on text-only responses. The approach supports inline HTML, remote resources, and Remote DOM, enabling commerce experiences such as product cards with variant selection, bundles, subscriptions, image galleries, inventory updates, and add-to-cart flows. ### Source excerpt MCP UI extends the Model Context Protocol to enable AI agents to return fully interactive UI components. It solves the critical challenge that commerce experiences require visual and interactive elements like product selectors, image galleries, and cart flows. This open-source protocol allows agents to embed commerce components while maintaining control through an intent-based messaging system, delivering shopping experiences that go far beyond traditional text-only AI interactions. ## Meet SnappTheming DevFeed: [Meet SnappTheming]() Original publisher: [Read original article]() Author: Volodymyr Voiko Published: 2025-02-27T10:28:25Z Content type: tutorial Language: en Sources: [Snapp Mobile - Medium]() Topics: [Swift](), [Library](), [Xcode](), [JSON](), [ui]() Tags: [design](), [getting-started](), [installation](), [ios](), [json](), [library](), [open-source](), [swift](), [swift-package](), [ui-components](), [xcode]() ### AI overview This tutorial introduces SnappTheming, an open-source Swift framework for dynamically applying app themes from JSON declarations. It explains how to add the package to an Xcode project and use theme elements such as colors, fonts, gradients, images, animations, metrics, and shapes in UI components. ### Source excerpt Today, most applications interact with cloud-based content. In addition to content, app configurations such as feature flags, translations, and even UI elements (Server Driven UI) are often managed from the server. But what about theming? How can we hotswap or update app themes without requiring app updates? I have the answer! Recently, we at snappmobile.io announced our open-source library, SnappTheming. This Swift framework simplifies the integration of dynamic design themes into your applications. By utilizing JSON declarations, SnappTheming facilitates the extraction and application of various theming elements, including colors, fonts, gradients, and shape styles, directly into the application's user interface. In this article, we will explore how to get started with the SnappTheming library, including installation steps and basic usage. Getting Started In this section, we will create a sample app that utilizes the SnappTheming dependency. We will define a theme and use its declaration to retrieve styling elements and apply them to various UI components. This will demonstrate how easy it is to implement dynamic theming in your application. To get started, first create a new project in Xcode. Creating the Project Before we begin, ensure that you have Xcode installed (make sure it's a version compatible with Swift). Follow these steps to create a new Xcode project: Open Xcode and select "Create a new Xcode project." Choose the appropriate template for your app, such as "Single View App." Fill in the necessary details like project name and organization identifier, then click "Next" to create the project. Adding the Framework Dependency Next, we need to add the SnappTheming package dependency to our project. Follow these steps: Open your project's settings and navigate to the "Swift Packages" tab. Click the "+" button to add a new package. Enter the URL for the SnappTheming repository and select the version you want to use. Click "Add Package" to include it in your ## ethereum.org Cycle 1 Roadmap Adopts Six-Week Shape Up Development Cycles DevFeed: [ethereum.org Cycle 1 Roadmap Adopts Six-Week Shape Up Development Cycles]() Original publisher: [Read original article]() Author: Digital Studio Published: 2025-01-23T00:00:00Z Content type: article Language: en Sources: [Ethereum Foundation Blog]() Topics: [Website](), [Development](), [Documentation](), [ui](), [Shadcn UI](), [web design]() Tags: [cycles](), [design](), [development](), [documentation](), [ethereum-org](), [shadcn-ui](), [ui](), [ui-components](), [web-design](), [website-design]() ### AI overview ethereum.org describes its first Shape Up cycle, using six-week build periods followed by two-week cooldowns. The roadmap covers interactive educational content, audio support, native Web3 features, documentation updates, translation improvements, Shadcn UI migration, server components, and related ecosystem projects. ### Source excerpt We're evolving how we build ethereum.org. Starting January 20th, we've adopted Shape Up cycles - focused 6-week build periods followed by 2-week cooldowns. For Cycle 1, each project below will ship by the end of February - no automatic rollovers to next cycle. Quick point of clarification: this is... ## Doctave 2.0 introduces customizable themes and a component system for documentation sites DevFeed: [Doctave 2.0 introduces customizable themes and a component system for documentation sites]() Original publisher: [Read original article]() Author: Doctave Team Published: 2024-05-22T07:00:00Z Content type: release Language: en Sources: [Doctave - Build beautiful developer portals with docs-as-code]() Topics: [Documentation](), [ui](), [Markdown](), [CSS](), [HTML]() Tags: [blog](), [configuration](), [css](), [dark-mode](), [documentation](), [html](), [markdown](), [openapi](), [release](), [ui-components]() ### AI overview Doctave 2.0 is a release for documentation sites that adds customizable themes, brand-based color scales, configurable border radii, and a component system for building reusable UI components and custom HTML/CSS. ### Source excerpt Today is a big day! We're excited to release Doctave 2.0: our biggest and most ambitious release to date and we can't wait to show you everything we've built. This update brings with it a number of exciting features and improvements: An improved modern design A more customizable theme A brand new powerful component system Design Documentation sites on Doctave look better than ever with this design update. A picture tells a thousand words, so I'm going to let screenshots do most of the talking here. The familiar Doctave layout. Redefined. Every theme works in both light and dark mode without any additional configuration. OpenAPI specs have also been redesigned to match the new theme Customizable theme Doctave 2.0 computes a 12-point color scale based on your brand color and chosen grayscale. The theme will work with any color scheme with 2 lines of configuration. But you can go further than just customizing colors! You can configure the border radius of the design to match your brand: All this is configurable in your doctave.yaml project file with just a couple lines: 1 2 3 4 5 6 7 8 title: Nebularis Documentation doctave_version: 2 theme: radius: medium colors: accent: "#fa5b30" grayscale: mauve And we're not stopping there. Expect more configuration options in this space! 👀 Component System One of the things we kept hearing from customers is authors wanting to go beyond basic Markdown features. Beyond just prose, writers also want to be able to create compelling landing pages, galleries, and call-to-actions. After lots of iteration and unsatisfactory prototypes, and are excited to reveal our brand new component system! It allows you to: Use a library of pre-built, composable UI components Easily build your own reusable components from our building blocks Drop down to custom HTML/CSS when needed We've taken inspiration from many different template and component systems such as MDX, Markdoc, and Radix, and created a system specifically designed for documentation and ## Jetpack Compose: Divider DevFeed: [Jetpack Compose: Divider]() Original publisher: [Read original article]() Author: Alex Zhukovich Published: 2024-02-08T11:33:53Z Content type: tutorial Language: en Sources: [Alex Zhuk - Android development and testing]() Topics: [Jetpack Compose](), [Compose](), [ui](), [Canvas](), [implementation]() Tags: [canvas](), [compose](), [customization](), [how-to](), [jetpack](), [jetpack-compose](), [ui](), [ui-components]() ### AI overview A tutorial on Jetpack Compose dividers, comparing the Material 2 and Material 3 implementations and explaining how to use horizontal and vertical dividers. It also covers customization of size, padding, color, and thickness, plus creating custom dividers with Canvas. ### Source excerpt This article covers using and customizing the "Dividers" components from the "Material 2" and "Material 3" libraries in the Jetpack Compose. In addition to that, we will explore the difference between implementation of the Divider, HorizontalDivider and VerticalDivider. ## CatGPT - or How to Position Elements on Overlays DevFeed: [CatGPT - or How to Position Elements on Overlays]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2023-10-22T06:55:09.601000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [constraintlayout](), [Kotlin](), [Code]() Tags: [code](), [constraintlayout](), [how-to](), [kotlin](), [ui-components]() ### AI overview A tutorial showing how to position a reaction element as an overlay on a message in a Kotlin chat client. It demonstrates using a ConstraintLayout, references, and modifiers to anchor the reaction in the message component. ### Source excerpt Have you ever wondered how to display an element with an overlay while keeping it in the same position? The same way that, for example, many messaging apps highlight the message you want to react to. I had this type of challenge in one of my work projects. It took some trial and error to get it working, but I was so proud of myself when I finally found the correct modifiers (and numbers). I want to share one way to do it with you in this blog post. The Example App Okay, I must say that I maybe, just maybe, got a little bit carried away with this example app. But it's a CatGPT - a chat client where you can ask anything from a cat. Here's a short video: This app is simple; It doesn't use any third-party APIs, so the cat in question lives in the code. The app has one Room database, where it stores messages, and it has one screen called ChatScreen which displays messages. If you want to see the code, the starting point for the app is in the starting-point-branch, and the final code is in CatGPT-repository's main-branch. Showing Reaction with Message To simplify this app, each message can have only one reaction. In the Message data class, the reaction is already present: // data/Message.kt @Entity data class Message( @PrimaryKey(autoGenerate = true) val id: Long = 0, val text: String = "", val sender: Sender = Sender.ME, @TypeConverters(ReactionConverter::class) val reaction: Reaction? = null, ) And it's a nullable Reaction-enum. The complete code and converters for Reaction are in Message.kt. Let's first add code for showing that reaction before building the actual reaction picker. In the MessageRow.kt-file, there is already a ConstraintLayout, which contains the component for the message. We want to show the reaction in the bottom right corner of that component, so we'll add the reaction inside the constraint layout. The component for reaction looks like this: // ui/components/MessageRow.kt message.reaction?.let { Text( modifier = Modifier .clip(ChatScreen.shape) .back ## Zed Weekly: #21 DevFeed: [Zed Weekly: #21]() Original publisher: [Read original article]() Author: Joseph Lyons Published: 2023-09-29T00:00:00Z Content type: article Language: en Sources: [Zed Industries - Blog]() Topics: [Development](), [Storybook](), [Prettier](), [Vim](), [ui]() Tags: [feature](), [improvements](), [storybook](), [ui-components](), [vim]() ### AI overview A weekly development update for Zed covering Prettier integration, improved language-server logs, a Storybook setup for rebuilding the UI, Vim mode updates, collaboration work, and dashboard chart optimization. ### Source excerpt Improving following in collaboration, polishing channels, and continuing to rebuild Zed's UI ## Jetpack Compose: Pull to Refresh DevFeed: [Jetpack Compose: Pull to Refresh]() Original publisher: [Read original article]() Author: Alex Zhukovich Published: 2023-06-16T09:50:46Z Content type: tutorial Language: en Sources: [Alex Zhuk - Android development and testing]() Topics: [Jetpack Compose](), [Android](), [Testing](), [ui]() Tags: [android](), [article](), [code](), [compose](), [customization](), [how-to](), [jetpack](), [jetpack-compose](), [testing](), [tests](), [ui](), [ui-components]() ### AI overview A tutorial on implementing Pull to Refresh in Android apps with Jetpack Compose, customizing its indicator and behavior, and testing the refresh interaction in UI tests. The article notes that the covered APIs are experimental. ### Source excerpt This article covers adding and customizing the "Pull to Refresh" action in the Jetpack Compose. In addition to that, we will explore how to trigger pull to refresh action in UI tests. ## Server Driven UI DevFeed: [Server Driven UI]() Original publisher: [Read original article]() Author: Girish H Published: 2023-05-25T08:01:03Z Content type: tutorial Language: en Sources: [ymedialabs-innovation - Medium]() Topics: [ui](), [Mobile](), [Development](), [Web]() Tags: [accessibility](), [android](), [android-app-development](), [kotlin](), [mobile](), [mobile-app-development](), [mobile-ui-design](), [performance](), [server-driven-ui](), [ui](), [ui-components]() ### AI overview This article explains server-driven UI, in which a server provides data or instructions that a mobile app uses to render native interface components dynamically. It presents the approach as a way to reduce hard-coded layout changes and improve flexibility, and compares native components with web views in performance, user experience, security, and accessibility. ### Source excerpt Photo by Amélie Mourichon on Unsplash Server-driven UI or dynamic layout is a technique that allows the server to send data or instructions to the client, which the client then uses to render the user interface dynamically. This can improve the user experience by providing more personalised or relevant content Why do we need to use Server Driven UI? As a mobile developer, have you ever had to add a new field to a native Android layout and it would take up the entire sprint which includes development, QA and release cycle? Or, have you ever had a client who was hesitant to use web views to render content in their app? These are common issues that can be solved by implementing server-driven UI in your mobile app. Server-driven UI allows developers to render native components using data provided by a server. This means that instead of hard-coding all the layouts in the app, you can fetch the data from a server and dynamically create the UI components at runtime. This can save a lot of development time and make the app more flexible to changes in the future. Additionally, using server-driven UI can also improve the performance as the native components are rendered directly in the app, which can lead to faster load times and better performance overall. You can find some of the major differences between Native components and web-view below Performance: Native components are much faster and provide better performance as compared to web views. Web views usually require a lot of resources to render the content, which can result in slow loading times and a poor user experience. User experience: Native components provide a better user experience as they are designed specifically for the platform they are running on. They can take advantage of the device's features and offer a consistent look and feel across the entire app. Security: Native components are considered more secure as compared to web views. Web views can be vulnerable to security threats such as cross-site scriptin ## Organize your Views: SwiftUI edition DevFeed: [Organize your Views: SwiftUI edition]() Original publisher: [Read original article]() Author: Marco Gomiero Published: 2023-03-23T00:00:00Z Content type: tutorial Language: en Sources: [Posts on Marco Gomiero]() Topics: [SwiftUI](), [ui](), [Code](), [Programming](), [Jetpack Compose](), [Kotlin Multiplatform]() Tags: [code](), [components](), [declarative](), [jetpack-compose](), [kotlin](), [kotlin-multiplatform](), [maintainability](), [readability](), [state](), [stateless](), [swift](), [swiftui](), [ui](), [ui-components]() ### AI overview This tutorial explains how to organize SwiftUI views in a Kotlin Multiplatform money-management app. It recommends keeping each screen's entry-point view small, splitting UI into reusable components, hoisting state so views remain stateless, and isolating ViewModel and external-dependency connections. The author reports improved readability and maintainability. ### Source excerpt One of the pros of SwiftUI, and generally of declarative UI frameworks, is the capability of defining the UI with the same programming language the application uses. With SwiftUI, it is not necessary anymore to bridge the UI definitions from somewhere else, resulting in a decrease of context switching between two different environments (Storyboards and Swift code, for example) But "with great power comes great responsibility", and a codebase can quickly become a nightmare without some structure and organization. Long files, large structs, and stateful UI components that hinder reusability are examples that can lead to a messed codebase. ## Magic Sprinkles at DevFest UK Ireland DevFeed: [Magic Sprinkles at DevFest UK Ireland]() Original publisher: [Read original article]() Published: 2022-01-29T10:53:10Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Jetpack Compose](), [ui](), [API]() Tags: [animate](), [compose](), [compose-animation](), [compose-ui](), [devfest](), [jetpack-compose](), [repo](), [sample](), [talk](), [ui-components](), [video]() ### AI overview A shorter version of a DevFest UK Ireland talk introducing Jetpack Compose animations. It covers the animation API, simple quick-win animations, and more complex custom animations, with examples in a sample app and companion code repository. ### Source excerpt A shorter version of my Magic Sprinkles talk presented at DevFest UK Ireland Magic Sprinkles: Adding animations to your app with Jetpack Compose I have some Jetpack Compose UI components in my app and now I want to add animations, where do I start? In this presentation I will look briefly at the Jetpack Compose animation api to get an overview of the animation system. Then I will look at a few quick win simple animations that can add some magic to your app. I will dive into more complex and custom animations to see what is possible. All of these experiments will be illustrated in a sample app provided in a companion repo. At the end of this talk you will: have an overview of how animation works in Jetpack Compose have some practical animation examples that you can add to your app immediately have an idea of what is possible with complex and custom animations have a code repo of examples Repo Slides Video ## Remote rendering: Shopify's take on extensible UI DevFeed: [Remote rendering: Shopify's take on extensible UI]() Original publisher: [Read original article]() Author: Joey Freund Published: 2021-12-01T16:30:00Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Shopify](), [Extension](), [ui](), [Remote Procedure Call (RPC)](), [Web](), [Android](), [iOS]() Tags: [accessibility](), [api](), [apps](), [automation](), [browser](), [deep-dive](), [developers](), [extensions](), [ios](), [native](), [performance](), [platforms](), [rpc](), [shopify](), [ui](), [ui-components](), [user-experience](), [web]() ### AI overview Shopify describes its remote rendering architecture for extensible UI. The approach separates third-party extension code from host-side rendering, using message passing and a restricted sandbox to provide secure, reliable, native-feeling experiences across web, iOS, and Android. ### Source excerpt A deep dive into the latest generation of our technology that allows developers to extend Shopify's UI. ## Jetpack Compose: First Impressions and Learning Resources DevFeed: [Jetpack Compose: First Impressions and Learning Resources]() Original publisher: [Read original article]() Author: Márton Braun Published: 2021-03-05T19:00:00Z Content type: opinion Language: en Sources: [zsmb.co]() Topics: [Jetpack Compose](), [Compose](), [Android](), [SDK]() Tags: [android](), [app](), [components](), [compose](), [compose-ui](), [getting-started](), [jetpack-compose](), [learning](), [modular](), [resources](), [sdk](), [ui-components]() ### AI overview The article shares first impressions of Jetpack Compose in beta and recommends learning resources for getting started. It also describes a modular SDK that provides customizable Compose UI components for Android apps. ### Source excerpt Jetpack Compose is finally in beta. Here are my first impressions using its beta, and some recommended resources for getting started with it. ## CodeRAD HelpButton Component for Displaying Help or Error Text DevFeed: [CodeRAD HelpButton Component for Displaying Help or Error Text]() Original publisher: [Read original article]() Author: Steve Hannah Published: 2020-10-31T00:00:00Z Content type: tutorial Language: en Sources: [CodeName One]() Topics: [ui](), [User interface design]() Tags: [component](), [components](), [examples](), [repo](), [ui](), [ui-components]() ### AI overview This post introduces the HelpButton, a simple first-order UI component in the CodeRAD cn1lib. It displays a Help or Error icon and opens help text when clicked, with a usage example and a link to the CodeRAD GitHub repository. ### Source excerpt This is the second in a series of blog posts highlighting some of the components available in the CodeRAD cn1lib. The first post (or series of posts) introduced the RAD Chatroom component, a rich 2nd order UI component that encapsulates the user interface for a fully functional chat room. __ A second-order UI component is a complex UI component, usually composed of multiple basic components, which is designed for a specific type of application. Some examples of second-order UI components are login forms, contacts lists, chat room components, news lists, etc.. In this post I share a much simpler, first-order component: The HelpButton. The HelpButton is just a button that displays a "Help" or "Error" icon. When the user clicks on this button, it pops up with some "help" text. ## Sample Data in Compose Previews DevFeed: [Sample Data in Compose Previews]() Original publisher: [Read original article]() Author: Jossi Wolf Published: 2020-07-05T17:45:51Z Content type: tutorial Language: en Sources: [Stories by Jossi Wolf on Medium]() Topics: [Jetpack Compose](), [Compose](), [Android Studio](), [Android](), [Design system](), [ui]() Tags: [android](), [android-studio](), [components](), [compose](), [data](), [design-systems](), [jetpack-compose](), [kotlin](), [parameter](), [stories](), [ui](), [ui-components]() ### AI overview This tutorial explains how to provide sample data for Jetpack Compose previews using the @PreviewParameter annotation and PreviewParameterProvider. It addresses previews for parameterized Composables and lists, while noting that the annotation can be used on only one function parameter. ### Source excerpt This post was written for Compose 0.1.0. Jetpack Compose is Google's new Android UI Toolkit, currently in development. If you already want to have a look, you can play around with it and learn some exciting new things! One area where Compose shines is previews. By annotating Composables with @Preview , you can preview the Composables inside Android Studio. This is very useful when working with e.g. Design Systems, or you just want to explore different variants of your UI components. But often, your Composables will take parameters, like our Project Composable. https://medium.com/media/9384b6a63c4a8ba376843a4ee3b90717/href In these cases, you can't use the Preview annotation on your Composable -- after all, Compose doesn't know where to obtain those parameters. One solution to this is to create "wrapper" Composables without any parameters. https://medium.com/media/d1f3459d8cd4af796160f696d97eb84d/href This has one big downside: You will end up creating lots of preview Composables, cluttering your code. In other cases, you might have a list and want to provide some sample data. With XML, supplying data for the preview was easily doable with the tools namespace. https://medium.com/media/16d547ae6a634bce91bb44023d4919e3/hrefPreviewParameter to the Rescue Luckily, Jetpack Compose has the @PreviewParameter annotation. It can be applied to any parameter of a @Preview. It needs PreviewParameterProvider , a simple interface which we can implement. https://medium.com/media/e1c92b209a2fdff94bb2a44662eee97f/href Finally, we can use the @Preview annotation with our @PreviewParameter -annotated arguments. https://medium.com/media/25d1c0eb02a8bfd7591af59dabce8885/href One caveat is that @PreviewParameter is only allowed on one parameter of a function, which is why we assign a default value to our second parameter. With this, previews become a lot more powerful in Compose. Let me know if this is useful in your day-to-day work and comment with any thoughts on this! Sample Data in Com ## Better Custom Views with Delegates DevFeed: [Better Custom Views with Delegates]() Original publisher: [Read original article]() Author: Márton Braun Published: 2019-10-17T14:00:00Z Content type: tutorial Language: en Sources: [zsmb.co]() Topics: [Kotlin](), [ui](), [Code]() Tags: [android](), [code](), [components](), [delegates](), [design](), [design-system](), [implementation](), [kotlin](), [ui](), [ui-components]() ### AI overview This tutorial explains how to implement reusable custom UI components using Kotlin delegates. It uses a customizable card component as an example and discusses optional content, adaptive layout, built-in margins, XML layouts, and providing an easy-to-use API. ### Source excerpt Reusable UI components are all the rage these days. In this article, we'll take a look at implementing custom components easily by using Kotlin's delegates. ## How to create a Data Container Component in React DevFeed: [How to create a Data Container Component in React]() Original publisher: [Read original article]() Author: Federico Published: 2018-03-24T14:31:38Z Content type: tutorial Language: en Sources: [Federico Cargnelutti]() Topics: [React](), [ui](), [Redux]() Tags: [component](), [design-patterns](), [frameworks](), [how-to](), [javascript](), [node-js](), [react](), [redux](), [ui](), [ui-components]() ### AI overview A tutorial on the Data Container pattern in React. It explains how to separate data access and behavior from presentational components, compares inheritance with composition, and mentions Redux and other data-store options. ### Source excerpt One pattern I've used quite a lot while working with React at the BBC and Discovery Channel is the Data Container pattern. It became popular in the last couple of years thanks to libraries like Redux and Komposer. The idea is simple. When you build UI components in React you feed data into them via [...] ## How lambdas work in Kotlin. setOnClickListener transformation (KAD 18) DevFeed: [How lambdas work in Kotlin. setOnClickListener transformation (KAD 18)]() Original publisher: [Read original article]() Published: 2017-03-28T00:00:00Z Content type: tutorial Language: en Sources: [Antonio Leiva]() Topics: [Kotlin](), [Android](), [Code](), [ui](), [Framework]() Tags: [android](), [android-framework](), [examples](), [how-to](), [implementation](), [kotlin](), [transformation](), [ui-components]() ### AI overview A tutorial explaining how Kotlin lambdas simplify single-method Java interfaces, with examples focused on Android's setOnClickListener and view handling. It covers anonymous-class transformations, trailing lambdas, omitted parameters, the it keyword, and Kotlin DSL-style code. ### Source excerpt Everything Android, Kotlin and other random topics ## Component Kits for React Native DevFeed: [Component Kits for React Native]() Original publisher: [Read original article]() Author: Zach Silveira Published: 2017-03-07T17:00:00Z Content type: comparison Language: en Sources: [ReactJS News]() Topics: [React Native](), [ui](), [cross-platform](), [Library](), [Android](), [iOS]() Tags: [android](), [bug](), [components](), [cross-platform](), [ios](), [native](), [react](), [react-native](), [ui](), [ui-components]() ### AI overview The article compares several component kits for React Native. It explains that React Native has fewer styling solutions than web React and that component customization can be difficult, then discusses NativeBase, React Native Elements, React Native Material Design, and React Native Material Kit, including their strengths, limitations, documentation, maintenance, and reported bugs. ### Source excerpt You won't find as many styling solutions for React Native as you will for React JS. This stems from two simple realities: React Native is a much smaller target for component libraries than traditional CSS frameworks. In other words, Bootstrap CSS can be used with any web framework, whereas component libraries for React Native only work with...you guessed it...React Native. Customizing React Native styling isn't the easiest thing in the world. Many apps demand custom styling, which makes component kits not too useful. In addition, it is challenging to customize each and every component, as the flexibility that you gain with traditional CSS on the web doesn't carry over easily to component libraries. With that said, here are a few options. You won't find as many styling solutions for React Native as you will for React JS. This stems from two simple realities: React Native is a much smaller target for component libraries than traditional CSS frameworks. In other words, Bootstrap CSS can be used with any web framework, whereas component libraries for React Native only work with...you guessed it...React Native. Customizing React Native styling isn't the easiest thing in the world. Many apps demand custom styling, which makes component kits not too useful. In addition, it is challenging to customize each and every component, as the flexibility that you gain with traditional CSS on the web doesn't carry over easily to component libraries. With that said, here are a few options. NativeBase - Essential cross-platform UI components for React Native A huge collection of components, most of which look quite nice. That's the plus side. The down side is that some of the components are somewhat buggy. No offense to the library authors, its just the state of the library - it needs a bit of work. For example, here's an issue I opened a few days ago when I discovered the swipe deck component crashed when only a single data element was provided: DeskSwiper throws on single element lists - Iss ## Reactive Apps with Model-View-Intent - Part 4: Independent UI Components DevFeed: [Reactive Apps with Model-View-Intent - Part 4: Independent UI Components]() Original publisher: [Read original article]() Author: Hannes Dorfmann Published: 2017-02-25T09:00:00Z Content type: tutorial Language: en Sources: [Hannes Dorfmann]() Topics: [reactive](), [ui](), [App](), [Code]() Tags: [blog](), [design-patterns](), [flow](), [recyclerview](), [shopping](), [toolbar](), [ui-components](), [viewmodel]() ### AI overview This blog post discusses building independent, reusable UI components in reactive application architectures such as Model-View-Intent, Model-View-Presenter, and Model-View-ViewModel. It argues that presenters should communicate indirectly by observing shared business logic and describes this approach using a shopping-basket example. ### Source excerpt In this blog post we will discuss how to build independent UI components and clarify why Parent-Child relations are a code smell in my opinion. Furthermore, we will discuss why I think such relations are needless. One question that arises from time to time with architectural design patterns such as Model-View-Intent, Model-View-Presenter or Model-View-ViewModel is how do Presenters (or ViewModels) communicate with each other? ## Custom scroll bars DevFeed: [Custom scroll bars]() Original publisher: [Read original article]() Author: Stanko Published: 2016-03-21T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [JavaScript](), [Web Development]() Tags: [article](), [css](), [how-to](), [javascript](), [ui-components]() ### AI overview A tutorial on customizing scrollbars with WebKit-specific CSS, a JavaScript plugin that preserves native scrolling, and a CSS technique for showing scrollbars on hover across browsers. ### Source excerpt Generally when comes to replacing native UI components, I'm strongly against it. But, we've all been there, when the client insists on it. You'll see how to style it via CSS (webkit only), apply pure JavaScipt plugin with native scrolling or apply simple CSS hack. Well, let's go :) CSS solution, but only for webkit # Webkit scrollbars can be styles via CSS. This is great, but still not cross browser. CSS tricks has a great article on it. You can use pseudo selectors, these ones are used in the demo: ::-webkit-scrollbar { background: #CCF6ED; border-radius: 4px; height: 8px; width: 8px; } ::-webkit-scrollbar-thumb { background: #21BB9A; border-radius: 4px; } Check jsfiddle demo with green-ish scrollbars webkit only. Custom JavaScript plugin, using native scroll # This one I wrote years ago, and it is fully supporting IE8. It needs some love, as it should updated with I have learned since then. Using browser native scroll so it is smooth as you can get. Scrollbars are customizable via CSS. Check the demo. Grab the code on GitHub. CSS solution, all browsers # Idea - Show scrollbars only on mouse hover. Problem - content will be shrunk for the width of the scrollbar on hover, and jump. We are going to exploit the fast that all of the browsers have sub 20px wide scrollbar. This demo is using two divs, outer one which will be scrolled, and content wrapped in the inner one. Just put overflow: hidden on the outer div, and on mouse hover, switch to overflow: scroll Having inner div smaller for 20px, you will be able to create enough space for the scroll bar, and content won't jump around. We'll use media query @media (hover: hover) to detect if user's input mechanism That's why we are using overflow-y: scroll by default. Scrolling on touch devices is already nice and smooth. .scroll-y { width: 300px; height: 300px; /* By default the element should scroll, not to mess up with mobile devices */ overflow-y: auto; } .scroll-y-content { padding: 20px 0 20px 20px; width: 280px; /* ## The Future of OOCSS: A Proposal DevFeed: [The Future of OOCSS: A Proposal]() Original publisher: [Read original article]() Published: 2013-01-17T19:02:16Z Content type: article Language: en Sources: [Philip Walton]() Topics: [CSS](), [Web Development](), [Sass](), [ui]() Tags: [css](), [patterns](), [sass](), [ui](), [ui-components]() ### AI overview The article proposes adding object-oriented functionality directly to CSS to address the debate around Object Oriented CSS (OOCSS). It explains how reusable classes support complex UI components and discusses why Sass preprocessors do not fully solve the problem. ### Source excerpt In CSS we often code the same visual components over and over again -- even within the same project. It's embarrassing how many separate times in my career I've coded a two-column layout, or tabbed navigation, or a dropdown menu, or a popup (and the list goes on). ## Design Patterns: Abstract Factory DevFeed: [Design Patterns: Abstract Factory]() Original publisher: [Read original article]() Published: 2011-07-24T00:00:00Z Content type: tutorial Language: en Sources: [Radek Pazdera]() Topics: [Architecture & Design](), [abstract class](), [Software](), [class](), [classes](), [ui](), [Code](), [coding](), [Linux](), [Qt](), [GTK](), [Windows]() Tags: [abstract-class](), [code](), [components](), [design](), [design-patterns](), [desktop](), [example](), [gnome](), [interface](), [interface-design](), [kde](), [linux](), [object](), [patterns](), [platform](), [software](), [software-design](), [ui](), [ui-components](), [user-interface]() ### AI overview This tutorial explains the Abstract Factory design pattern, which encapsulates the creation of related families of objects without specifying their concrete classes. It uses a cross-platform user-interface example in which separate factories create components for KDE/Qt and GNOME/Gtk environments. ### Source excerpt Software design patterns by example