UXE ⇢ User Experience Engineering

    • Designing for multiple screen densities on Android

      In this article, I am going to do a deep dive into Android screen density and provide some guidance on how to design for such a huge diversity of screen densities. Having a firm grasp of this is critical in being able to create wireframes and designs in Sketch that can be implemented on actual devices (phones, tablets, laptops, TVs, wearables).
    • Android Downloadable Fonts

      As of Android API level 27, there are too many ways to load custom fonts in Android apps. This article will show you how to use downloadable fonts (from Google Fonts) using the latest support library. 🖋
    • Flexbox: Getting started (Part 1/2)

      The goal of this series of articles is to help you to learn Flexbox in a fun interactive way and then help you to build simple real life examples using Flexbox. 📦
    • Flexbox: Building a navigation bar (Part 2/2)

      This is a second article on 2 part series. In this article you will learn how to build a simple example responsive navigation design using Flexbox and media queries. 📦
    • Why I'm learning to code

      If you are a designer who has been thinking about learning to code or even if you haven’t but this concept sounds interesting, keep reading.
    • Redux, React Navigation, and React Native

      This tutorial is a deep dive in the use of Redux in React Native projects. It will show you how to architect apps that rely on external web services, and Firebase. The code for this tutorial is on GitHub.
    • Painting with code - review of Airbnb's React Sketch.app plugin

      Design engineering is becoming a thing. Airbnb has created something amazing - react-sketchapp. This library can generate Sketch artifacts using Javascript and React as a starting point. This article will show you what it is, who this is for, and why it matters.
    • Flexbox layouts and lists with React Native

      This tutorial is a deep dive of Flexbox layout and FlatList. It will show you how to take a wireframe and compose React Native components out of it. The code for this tutorial is on GitHub.
    • Navigation and Styling with React Native

      This tutorial is a deep dive of React Navigation, which is the way to do in app navigation. It also goes into the best practices for styling your app and how to collaborate with designers for styling. The code for this tutorial is in GitHub.
    • Getting started with React Native

      This tutorial will show you how to get started quickly with React Native for mobile app development on Android and iOS. It focuses on Flexbox layouts, Navigation, and cross platform considerations. The code for this tutorials is in GitHub.
    • Android, Redux, Firebase Auth & Database, and Material Design

      Redux and React are things that are normally associated with web development. Redux is a beautiful design pattern that can help with any application, even native ones! I used Firebase in order to do cross platform data synchronization across web and mobile clients. I also used Firebase auth and Material Design to craft a real-world app. The code for this tutorial is in GitHub.
    • Building a real world app using React, Redux, Firebase, and Typescript

      The purpose of this tutorial is to serve as a starting point for a real world React, Redux, and Firebase example. The starter project is on GitHub.
    • Building a real world app using React, Firebase, and Typescript

      The purpose of this tutorial is to serve as a starting point for a real world React and Firebase example. The starter project is on GitHub.
    • Android Event Dispatch Thread or Main Thread

      Android applications run in a native Linux process, in the underlying Linux OS. This process houses activities (screens), widgets, and services (non visual long running application parts). When working with Android apps, it is important to remember to keep long running code running in threads that are not tied to the main thread or event dispatch thread, in order to get an “application not responding” error. A common mistake that is made is long running tasks are performed in this EDT/main thread, and this leads to lots of application failures.
    • SwingX Tutorial - Busy Label (JXBusyLabel)

      This tutorial will show you how to use SwingX's JXBusyLabel component to display an indeterminate progress indicator. It will also show you advanced configuration options that allow you to create different and interesting indeterminate progress indicators using the BusyPainter.
    • SwingX Tutorial - Task Pane (JXTaskPane, Container)

      This tutorial will walk you through the steps required to use JXTaskPane and JXTaskPaneContainer in SwingX. You will learn how to change the default color schemes of these components, and add components and actions to task panes.
    • SwingX Tutorial - Painters

      This tutorial will introduce you to the SwingX API and the concept of Painters. It will give you an idea of the kinds of effects you can create with them as well, with code examples.
    • SwingWorker details - canceling background tasks in flight

      This tutorial outlines some of the interesting behaviors exhibitied by SwingWorker when running background tasks are cancelled in flight.
    • How to use the AnimatedTransition API (SwingX and Timingframework)

      I needed to perform animations in the app that I'm building for ScreamingToaster desktop app framework using Java and Swing. I needed to build animations that show a transition from one screen to another. This is slightly different than creating custom, or modified components which perform a function and have a set of graphical effects. I needed animations that would transition my user interface from one "screen" to the next. The screens themselves could be panels or components (part of the whole app, or the entire app itself). While I'd been writing much of this code myself, to do these animations, it just got really tedious and frustrating to add this level of complexity to my code, when all I needed were some simple animations. I've been using the SwingX API and the TimingFramework API to perform the animations and leverage the components, however, this last piece was missing. And this last piece just got delivered by Chet Haase, as a part of the binary deliverables with his (and Romain Guy's) great book - Filthy Rich Clients.
    • How to use glass pane for animation (SwingX and Timingframework)

      I needed to perform animations in the desktop app framework that I'm building for ScreamingToaster. I needed to build animations that move various components around on the screen, and other animations that pop up components on top of existing components, etc. After creating a few of these effects, I realized that I was doing the same thing over and over again, which is why I decided to write this tutorial to encapsulate this pattern, in the hopes that I will help others doing the same thing.