Samsung is working on lifelike AI-powered avatars to fill in for humans

January 7, 2020 • Samsung, Working

Samsung has been teasing its NEON project for a few days now, and we finally have some idea of what it’s about: AI-powered digital avatars that look like humans.

It’s actually an effort by STAR Labs, an experimental subsidiary of the Korean giant led by scientist and inventor Pranav Mistry. From what I can make of the vague press release and FAQ, the idea is to create software-based ‘artificial humans’ (called NEONs) that you can communicate and interact with, just as you would with a real person.

They’ll be accessible via screens and perhaps holographic displays. STAR Labs says they’ll be far more capable than today’s voice assistants. They can serve as “an individualized teacher, a personal financial advisor, a healthcare provider, or a concierge. A NEON can also be an actor, a spokesperson, or a TV anchor. A NEON can be our friend, collaborator or companion.”

STAR Labs' NEONs are essentially digital avatars powered by AI and built to help people more than voice assistants can — Credit: STAR Labs

These avatars are powered by two technologies: CORE R3, a proprietary platform (R3 stands for ‘Reality, Realtime, and Responsive’), and SPECTRA, which “complements CORE R3 with the spectrum of Intelligence, Learning, Emotions and Memory.” No, I don’t know what any of that means.

STAR Labs explains that while NEONs can be based on real people and resemble them, they won’t be exact replicas. That said, it’s worth thinking about the potential danger of creating realistic avatars that could be used to imitate real people and spread misinformation. This may not be a huge issue if the company tightly controls who has access to the tech to create avatars, but that’s not yet clear.

The company also claims that NEONs can also learn from experiences — but it doesn’t explain how that will work. It’s also not immediately clear if these avatars will operate as part of a cloud service run by Samsung or STAR LABS, or whether businesses will have the option to run them locally. Similarly, we don’t know how NEONs will be made available to people to interact with. So, yeah, still more questions than answers at this point.

Hopefully we’ll get a bit more clarity when NEONs are demonstrated live at CES over the next couple of days. STAR Labs will also talk more about this project at an event called NEONWORLD 2020 later this year. Hurray for hype.

Dark Mode – Working with Color Systems

September 15, 2019 • Color, Working

The requirements for designers to be more structured has been surging across the industry these past years. And with the introduction of Dark Modes in both mobile and desktop OS’s, another area of design now needs to be put into systems. Our colors.

As designers, we often base our color choices on what looks best for the specific element we are working on. When we do this, the only consistency will be our personal taste and we might end up with a slightly inconsistent use of colors because of it. And an inconsistent color palette will give you problems once you want to create a secondary color scheme, or a dark mode.

Applying a systematic approach to our colors will help us stay organized and give us reasoning behind how and when we use certain colors. But most importantly, it will enable us to easily apply a new color scheme to our design. Our Dark Mode will only be a few color tweaks away, once everything is put into the system.

Let’s dive into one approach of creating a color system.

As with all systems, one of the most important things are reasoning. Why we’re using this color instead of that color. That’s exactly what we need to do. We need to assign roles to all of our colors.

Luckily it’s really simple, and we can learn a lot from both Apple and Google. You can dig into their documentation to know how they work with color systems.

Looking at our own color system, we need to define our roles and give them clear and descriptive names. The name of our colors should convey the purpose of the color, and not the specific color value.

For this case, we will split them into 3 categories.

A tint is often the brand color and our secondary colors. We can add as many tints as we need. I.e. we might have a brand color and a few semi-transparent variations of that brand color.

Gradients should be added as individual colors. This will make it easier to change later on.

Tints are usually used for interactive elements, but they don’t have to. The only important thing is that they have a defined role.

So let’s do that.

Role — Used for interactive elements, illustrations and highlights.

Background colors are what it sounds like. A background color.

Since we will use more than one background color in our product, we need to define a few of these and their roles.

The role of the backgrounds are usually defined in layers. So our primary background is always at the bottom, then comes the secondary background, and then the tertiary background on top.

Alternative backgound colors can also be defined.

Role — Used for the backgrounds of elements, in 3 levels.

Now we reached the elements we place on our background colors. This will mostly be text, separators etc. Since we will need text labels with different emphasis, we will define a few levels for those.

You might also need more than one separator color, depending on what background they are placed on.

Role — Used all foreground elements placed on any background.

Sometimes we will need to create roles that are very specific. This is not wrong, but we should always keep our system as simple as possible.

In our case, we need a role specifically for text placed on a Tint color.

Role — Used for elements placed on a Tint color.

Now that we have defined our roles, it’s time to assign colors to them.

This isn’t that different than what we’re used to, when creating a color scheme.

It’s a good idea to try out your color scheme in an interface before you save them. It’s just easier when your colors aren’t locked into the system.

This is also the right time to make sure that your color scheme lives up to the standards of WCAG 2.0 and are as accessible as possible.

So play around, and once you are happy with your color scheme, you save them and assign them a role (in reality it’s just a matter of naming you color the same as the role).

Heres an example of a color scheme with roles assigned.

Since we defined roles for every single color, it’s simple to assign new colors to all of the roles, and instantly we will have recolored our entire product.

The color system forces us to choose colors that work for their role and the backgrounds they are placed on. And as a bonus, we already did most of the work for the developers that are going to be implementing the Dark Mode. They will be able to use the color roles as their variables and can assign any set of colors to those variables.

Have a look:

Now, wouldn’t it be nice if you could switch between your light and dark color scheme in Sketch? Without having to create duplicate styles and duplicate elements?

Well, now you can!

A simple plugin to manage your color system, and switch between light and dark mode, as you design. Built to be lightweight, and feel like a part of Sketch. It integrates seamlessly with your Document Colors, so you can continue to work like you are used to.

Simply flip the switch to change the color scheme. Pretty neat right?Download the plugin to get started on your dark mode!

Working with Attributes on DOM Elements

August 31, 2019 • Attributes, Working

The DOM is just a little weird about some things, and the way you deal with attributes is no exception. There are a number of ways to deal with the attributes on elements. By attributes, I mean things like the id in

. Sometimes you need to set them. Sometimes you need to get them. Sometimes you get fancy helpers. Sometimes you don’t.

For this article, I’ll assume el is a DOM element in your JavaScript. Let’s say you’ve done something like const el = document.querySelector("#cool"); and matched

or whatever.

Some attributes are also attributes of the DOM object itself, so iff you need to set an id or title, you can do:

el.id; // "cool"
el.title = "my title";
el.title; // "my title";

Others that work like that are lang, align, and all the big events, like onclick.

Then there are attributes that work similarly to that but are nested deeper. The style attribute is like that. If you log el.style you’ll see a ton of CSS style declarations. You can get and set them easily:

el.style.color = "red";
module.style.backgroundColor = "black";

You can get computed colors this way too. If you do module.style.color hoping to get the color of an element out of the gate, you probably won’t get it. For that, you’d have to do:

let style = window.getComputedStyle(el);
style.color; // whatever in CSS won out

But not all attributes are like first-class attributes like that.

el['aria-hidden'] = true; // nope

That “works” in that it sets that as a property, but it doesn’t set it in the DOM the proper way. Instead, you’ll have to use the generic setter and getter functions that work for all attributes, like:

el.setAttribute("aria-hidden", true);
el.getAttribute("aria-hidden");

Some attributes have fancy helpers. The most fancy is classList for class attributes. On an element like:

You’d have:

el.classList.value; // "module big"
el.classList.length; // 2
el.classList.add("cool"); // adds the class "cool", so "module big cool"
el.classList.remove("big"); // removes "big", so "module cool"
el.classList.toggle("big"); // adds "big" back, because it was missing (goes back and forth)
el.classList.contains("module"); // true

There’s even more, and classList itself behaves like an array so you can forEach it and such. That’s a pretty strong reason to use classes, as the DOM API around them is so handy.

Another attribute type that has a somewhat fancy help is data-*. Say you’ve got:

test

You’ve got dataset:

el.dataset;
/*
{
  active: "true",
  "placement", "top right"
*/

el.dataset.active; // "true"
el.dataset.extraWords; // "hi", note the conversion to camelCase

el.dataset.active = "false"; // setters work like this

Working with PWAs ~ Flipped Coding

August 16, 2019 • Flipped, Working

It’s very likely that you are reading this on your phone or some other kind of mobile device. Every day more and more people are getting online on their phones. It’s convenient and it’s not going to change. Mobile isn’t the future anymore, it’s here and we have to keep learning new techniques to make our web apps more responsive. That’s one of the reasons progressive web apps (PWAs) are rising in popularity.

The best part is that they aren’t difficult to create and you don’t have to make huge changes to your code. On top of that, there are a number of tools you can use to gauge how progressive your web apps really are. You get some really cool functionality for your web apps when you make them PWAs. This is quick walk-through on what PWAs are, why we bother making them, and how to actually make one in Angular.

What a PWA is

A progressive web app is a lot more simple than it sounds. Here’s a list of the things that make a web app progress:

Your site follows HTTPS protocol
The pages are responsive across mobile devices, including tablets
Your site works cross-browser
Transitions shouldn’t feel slow
All of the URLs load when the app is offline
There’s metadata for Add to Home screen
The first load is really fast
Every page has a URL

This list is everything you need to make a simple PWA. None of these steps seem difficult, right? That’s because the first half of these things are best practices you should be following in any web app. In case you’re wondering, making transitions feel faster means you are giving the user some kind of feedback, like a loading wheel, while they wait for a page to load.

The other four things on the list are what really bring home what PWAs are good for. You need metadata so the user can save your site to their home screen just like an app would appear. We’ll do that with a manifest.json file. You can make the app load offline with some cool caching you’ll do with service workers. Making the first load of your application really fast is just testing and optimizing code. Lastly, giving each page its own URL might be tricky if you’re working on a single-page application (SPA), but it shouldn’t be extraordinarily difficult.

So now you know what a PWA is made of. It’s a web application that follows best practices, loads offline, and works fast. The progressive part comes from the fact that you can slowly upgrade your existing apps to make them PWAs. Most likely you already have the first four things done which means you’re already half way there.

Why bother with making one

Progressive web apps have become such a buzz term that it’s hard to remember why we care about them in the first place. They make mobile browsing more native-like across all devices without an additional code base. Depending on your application, you might be able to get away with just a PWA instead of building mobile apps. Some apps don’t need super performance or permissions to make changes on a device so a PWA would be a great choice.

When you’re building your app, you can make it a PWA to begin with and potentially avoid the need for making native mobile apps. That’s the main reason you would bother making a PWA. Once you have made it responsive, there aren’t many more steps you need to take and the benefits are worth that extra effort.

How to make a PWA

Now it’s what you’ve been waiting for. We’re going to make a really simple PWA using Angular 7. If you don’t have the Angular CLI installed and you want to follow along, make sure you run this command in the directory for the project you want to make.

npm install -g @angular/cli

Then you can quickly create your Angular 7 app by running this command.

ng new client

I usually call my front-end stuff “client”, but you can name your new app anything you want to. Angular makes it really easy to make PWAs, like most of the popular frameworks do. You can run this command to make your new Angular app or your existing ones progressive. Make sure you are in the root directory before you run this.

ng add @angular/pwa

This adds a couple of things for you. You get a pre-generated manifest file that you could edit, a ngsw-config.json file that sets the configs for your service worker, and the ServiceWorkerModule gets imported into the app but will only be used when you make a production build. This gives you the next two things on your PWA checklist!

The last two items are up to how you want to run your project. There are plenty of ways to speed up your app, like minifying files or lazy loading and handling the URLS is super dependent on how you handle routing. That’ll probably generate most of your app’s URL.

If you noticed, we didn’t have to write any extra code to make this new Angular app into a PWA. All you had to do was run an ng command and boom. You have a functioning PWA. Now you can build your app and run it in production mode to see it in action. One quick way to see if your PWA is working is to check if the service worker is available.

You can do this in the Chrome Dev Tools by going to the Application tab and then checking the Service Workers panel. If you see a service worker available, your PWA is working! Now all you have to do is build your app like you normally would, keep that responsive design in mind, and make the rest of your Angular components flow.

It’s always easy to say how simple it is to make a PWA when you’re starting from a brand new app. Where it gets complicated is when you are trying to upgrade an existing app that may or may not be responsive, it might not be cross-browser, or it could have issues loading quickly. That’s when you have to refactor code and update packages and it can get messy.

Not to mention how weird the service workers can be. Have you needed to upgrade an app, Angular or something else, to be a progressive web app? Do you have any funny stories or advice for people going through that crazy process? I would say that you should definitely make sure that app is responsive first. It’s probably going to take the most time and it will make a huge difference for user experience.

You can stay in the loop with what’s happening in the web development world when you sign up for my emails. You can click here to do that. There’s hundreds of people who already get the updates, so why not you too?