Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 08 2018


Live Stream From Awwwards Berlin 2018: Showcasing Trends In UX Design

Designing the best experience is a challenge, and every designer and developer has their own way of tackling it. But, well, no matter how different our approaches are, one thing is for sure: We can learn a lot from each other. To give you your dose of UX inspiration, we are happy to announce that our dear friends at Adobe, are streaming live from the Awwwards Conference which will take place in Berlin on February 8th and 9th.

February 07 2018


Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? "20x faster and decode 7x faster than the GIF equivalent," says Colin Bendell.

Not all browsers support this so, to do a fallback, the <picture> element is ready. Bruce Lawson shows how easy it can be:

  <source type="video/mp4" srcset="adorable-cat.mp4">
  <!-- perhaps even an animated WebP fallback here as well -->
  <img src="adorable-cat.gif" alt="adorable cat tears throat out of owner and eats his eyeballs">

Šime Vidas notes you get wider browser support by using the <video> tag:

<video src="" muted autoplay loop playsinline></video>

But as Bendell noted, the performance benefits aren't there with video, notably the fact that video isn't helped out by the preloader. Sadly, <video> it is for now, as:

there is this nasty WebKit bug in Safari that causes the preloader to download the first <source> regardless of the mimetype declaration. The main DOM loader realizes the error and selects the correct one. However, the damage will be done. The preloader squanders its opportunity to download the image early and on top of that, downloads the wrong version wasting bytes. The good news is that I’ve patched this bug and it should land in Safari TP 45.

In short, using the <picture> and <source type> for mime-type selection is not advisable until the next version of Safari reaches the 90%+ of the user base.

Still, eventually, it'll be quite useful.

Fallbacks for Videos-as-Images is a post from CSS-Tricks

These WP Plugins Will Make Your Site Better in 2018

A Short History of WaSP and Why Web Standards Matter

In August of 2013, Aaron Gustafson posted to the WaSP blog. He had a bittersweet message for a community that he had helped lead:

Thanks to the hard work of countless WaSP members and supporters (like you), Tim Berners-Lee’s vision of the web as an open, accessible, and universal community is largely the reality. While there is still work to be done, the sting of the WaSP is no longer necessary. And so it is time for us to close down The Web Standards Project.

If there’s just the slightest hint of wistful regret in Gustafson’s message, it’s because the Web Standards Project changed everything that had become the norm on the web during its 15+ years of service. Through dedication and developer advocacy, they hoisted the web up from a nest of browser incompatibility and meaningless markup to the standardized and feature-rich application platform most of us know today.

I previously covered what it took to bring CSS to the World Wide Web. This is the other side of that story. It was only through the efforts of many volunteers working tirelessly behind the scenes that CSS ever had a chance to become what it is today. They are the reason we have web standards at all.

Introducing Web Standards

Web standards weren't even a thing in 1998. There were HTML and CSS specifications and drafts of recommendations that were managed by the W3C, but they had spotty and uneven browser support which made them little more than words on a page. At the time, web designers stood at the precipice of what would soon be known as the Browser Wars, where Netscape and Microsoft raced to implement exclusive features and add-ons in an escalating fight for market share. Rather than stick to any official specification, these browsers forced designers to support either Netscape Navigator or Internet Explorer. And designers were definitely not happy about it.

Supporting both browsers and their competing feature implementations was possible, but it was also difficult and unreliable, like building a house on sand. To help each other along, many developers began joining mailing lists to swap tips and hacks for dealing with sites that needed to look good no matter where it was rendered.

From these mailing lists, a group began to form around an entirely new idea. The problem, this new group realized, wasn’t with the code, but with the browsers that refused to adhere to the codified, open specifications passed down by the W3C. Browsers touted new presentational HTML elements like the <blink> tag, but they were proprietary and provided no layout options. What the web needed was browsers that could follow the standards of the web.

The group decided they needed to step up and push browsers in the right direction. They called themselves the Web Standards Project. And, since the process would require a bit of a sting, they went by WaSP for short.

Launching the Web Standards Project

In August of 1998, WaSP announced their mission to the public on a brand new website: to "support these core standards and encourage browser makers to do the same, thereby ensuring simple, affordable access to Web technologies for all." Within a few hours, 450 people joined WaSP. In a few months, that number would jump to thousands.

WaSP took what was basically a two-pronged approach. The first was in public, tapping into the groundswell of developer support they had gathered to lobby for better standards support in browsers. Using grassroots tactics and targeted outreach, WaSP would often send its members on "missions" such as sending emails to browsers explaining in great detail their troubles working with a lack of consistent web standards support.

They also published scathing reports that put browsers on blast, highlighting all the ways that Netscape or Internet Explorer failed to add necessary support, even go so far to encourage users to use alternative browsers. It was these reports where the project truly lived up to its acronym. One needs to look no further then a quote from WaSP’s savage takedown of Internet Explorer as an example of its ability to sting:

Quit before the job's done, and the flamethrower's the only answer. Because that's our job. We speak for thousands of Web developers, and through them, millions of Web users.

The second prong of WaSP's approach included privately reaching out to passionate developers on browser teams. The problem, for big companies like Netscape and Microsoft, wasn’t that engineers were against web standards. Quite the contrary, actually. Many browser engineers believed deeply in WaSP’s mission but were resisted by perceived business interests and red-tape bureaucracy time and time again. As a result, WaSP would often work with browser developers to find the best path forward and advocate on their behalf to the higher-ups when necessary.

Holding it All Together

To help WaSP navigate its way through its missions, reports, and outreach, a Steering Committee was formed. This committee helped set the project's goals and reached out to the community to gather support. They were the heralds of a better day soon to come, and more than a few influential members would pass through their ranks before the project was over, including: Rachel Cox, Tim Bray, Steve Champeon, Glenn Davis, Glenda Sims, Todd Fahrner, Molly Holzschalg and Aaron Gustafson, among many, many others.

At the top of it all was a project lead who set the tone for the group and gave developers a unified voice. The position was initially held by George Olsen, one of the founders of the project, but was soon picked up by another founding member: Jeffrey Zeldman.

A network of loosely connected satellite groups orbiting around the Steering Committee helped developers and browsers alike understand the importance of web standards. There was, for instance, an Accessibility group that bridged the W3C with browser makers to ensure the web was open and accessible to everyone. Then there was the CSS Samurai, who published reports about CSS support (or, more commonly, lack thereof) in different browsers. They were the ones that devised the Box Acid test and offered guidance to browsers as they worked to expand CSS support. Todd Fahrner, who helped save CSS with doctype switching, counted himself among the CSS Samurai.

Making an Impact

WaSP was huge and growing all the time. Its members were passionate and, little by little, clusters of the community came together to enact change. And that is exactly what happened.

The changes felt kind of small at first but soon they bordered on massive. When Netscape was kicking around the idea of a new rendering engine named Gecko that would include much better standards support across the board, their initial timeline would have taken months to release. But the WaSP swarmed, emailing and reaching out to Netscape to put pressure on them to release Gecko sooner. It worked and, by the next release, Gecko (and better web standards) shipped.

Tantek Çelik was another member of WaSP. The community inspired him to take a stand on web standards at his day job as lead developer of Internet Explorer for Mac. It was through the encouragement and support of WaSP that he and his team released version 5 with full CSS Level 1 support.

Internet Explorer 5 for Mac was released with full CSS Level 1 support

In August of 2001, after years of public reports and private outreach and developer advocacy, the WaSP sting provoked seismic change in Internet Explorer as version 6 released with CSS Level 1 support and the latest HTML features. The upgrades were due in no small part to the work at the Web Standards Project and their work with dedicated members of the browser team. It appeared that standards were beginning to actually win out. The WaSP’s mission may have even been over.

But instead of calling it quits, they shifted tactics a bit.

Teaching Standards to a New Generation

In the early 2000’s, WaSP would radically change its approach to education and developer outreach.

They started with the launch of the Browser Upgrade Campaign which educated users who were coming online for the very first time and knew absolutely nothing about web standards and modern browsers. Site owners were encouraged to add some JavaScript and a banner to their sites to target these users. As a result, those surfing to a site on older versions of standards-compliant browsers, like Firefox or Opera, were greeted by a banner simply directing them to upgrade. Users visiting the site on a really old browser, like pre-IE5 or Netscape 5, would redirect visitors to an entirely new page explaining why upgrading to a modern browser with standards support was in their best interest.

A page from the Browser Upgrade Campaign

WaSP was going to bring the web up to speed, even if they had to do it one person at a time. Perhaps no one articulated this sentiment better than Molly Holzschalg when she wrote "Raise Your Standards" in February 2002. In the article, she broke down what web standards are and what they meant for developers and designers. She celebrated the work that had been done by browsers and the community working to make web standards a thing in the first place.

But, she argued, the web was far from done. It was now time for developers to step up to the plate and assume the responsibility for standards themselves by coding it into all of their sites. She wrote:

The Consortium is fraught with its own internal issues, and its actions—while almost always in the best interests of professional Web authors—are occasionally politicized.

Therefore, as Web authors, we're personally responsible for making implementation decisions within the framework of a site's markup needs. It's our job to administer recommendations to the best of our abilities.

This, however, would not be easy. It would once again require the combined efforts of WaSP members to pull together and teach the web a new way to code. Some began publishing tutorials to their personal blogs or on A List Apart. Others created a standards-based online curriculum for web developers who were new to the field. A few members even formed brand-new task forces to work with popular software tools, like Adobe Dreamweaver, and ensure that standards were supported there as well.

The redesigns of ESPN and Wired, which stood as a testament and example for standards-based designs for years to come, were undertaken in part because members of those teams were inspired by the work that WaSP was doing. They would not have been able to take those crucial first steps if not for the examples and tutorials made freely available to them by gracious WaSP members.

That is why web standards is basically second nature to many web developers today. It’s also why we have such a free spirit of creative exchange in our industry. It all started when WaSP decided to share the correct way of doing things right out in the open.

Looking Past Web Standards

It was this openness that carried WaSP into the late 2010’s. When Holzschlag took over as lead, she advocated for transparency and collaboration between browser makers and the web community. The WaSP, Holzschlag realized, was no longer necessary and could be done from within. For example, she made inroads at Microsoft to help make web standards a top priority on their browser team.

With each subsequent release, browsers began to catch up to the latest standards from the W3C. Browsers like Opera and Firefox actually competed on supporting the latest standards. Google Chrome used web standards as a selling point when it was initially released around the same time. The decade-and-a-half of work by WaSP was paying off. Browser makers were listening to the W3C and the web community, even going so far as to experiment with new standards before they were officially published for recommendation.

In 2013, WaSP posted its farewell announcement and closed up shop for good. It was a difficult decision for those who had fought long and hard for a better, more accessible and more open web, but it was necessary. There are still a number of battlegrounds for the open web but, thanks to the efforts of WaSP, the one for web standards has been won.

Enjoy learning about web history? Jay Hoffmann has a weekly newsletter called The History of the Web you can sign up for here.

A Short History of WaSP and Why Web Standards Matter is a post from CSS-Tricks


The 3 Cs of User Interfaces: Color, Contrast, and Content

There’s an old business model that many business strategists live by—the 3 Cs. It’s a reminder to focus on the company, customers and competitors. Many small businesses and websites also use this model. But for designers, the three Cs are a little different.

When creating user interfaces, you should focus on color, contrast, and content. These three elements are the foundation of good design. But each is a little more complex than it might seem from the surface. Here’s how to think about–and incorporate–the three Cs of user interfaces into your design projects.


user interface design

user interface design

Color is one of the most obvious visual elements to most users. Designers and non-designers alike can talk about color and whether a certain hue or palette appeals to them.

Color can create distinct emotional connections completely on its own, without other effects. You can hand a color swatch or chip to almost anyone and get a reaction about whatever color is visible. It’s also a funny design element in that personal and design preferences tend to shift over time almost universally.

Color can make or break a design for a lot of reasons, but primarily it does so many things and provides so many visual cues to the user simultaneously that you can’t ignore it.

Color impacts:

  • Usability and readability
  • Brand recognition and awareness
  • Where users look and interact
  • Organization and user flow
  • Overall success of the design

Use color to create:

  • Navigation that’s clear and understandable
  • Intuitive interactions
  • A mood for the project
  • Create strong calls to action or usable elements
  • Establish a sense of what the design is about, such as reality versus fantasy

This might all seem like a tall order for something as simple as a mix of red, green and blue.

So, where do you start? Arguably the most important variables when it comes to color is creating a palette that’s engaging to users and speaks to what the design is about (such as branding and mood). For example, a website for Coca-Cola that used blue as a dominant color rather than red would be jarring to users.

A solid color palette is rooted in the principles of color theory.

A solid color palette is rooted in the principles of color theory. You don’t need more than a couple of colors to make it work. Two to three colors and a good library of lighter and darker variations are enough. Mockplus recommends the 6:3:1 rule: pick three colors for a palette, including a dominant color which is use 60 percent of the time, a secondary color that’s used 30 percent of the time and an accent color that can be in the remaining 10 percent of the design. The rule is rooted in the golden ratio, a mainstay of design theory and can be a great starting point.

Here’s one more rule for creating color palettes in user interfaces: start with black and white. If the design is usable without color, it will likely work once the color is added. The black and white outline also gives you a good idea of how to pick colors with enough contrast (the second C) to enhance usability.


user interface design

user interface design

Contrast creates a distinction between elements. It helps create visual hierarchy, scanability and contributes to how easy something is to understand quickly. Elements with strong contrast make it easy for the user to look from one thing to the next, creating a natural visual pattern and user flow.

The reason contrast is so important to user interface design is that it is part of everything you do. How you create contrast varies based on the type of element of visual effect involved.

You can establish contrast with:

  • Color
  • Size
  • Direction
  • Space
  • Shape

A key element of accessibility guidelines is contrast because it ensures that users can discern one element from another in the design. The A11Y Project, which has a goal of making web accessibility easier, has this recommendation: start with color contrast by using colors from different segments of the color wheel, or contrasting colors. Remember that complementary colors – opposites on the color wheel – provide maximum contrast.

The same concept applies to creating contrast between other elements as well. Pick typefaces from different families or use dramatically different sizes to help users read the words quickly.

In short, the idea behind contrast is that opposites attract.

Use directional signs, arrows or images with motion to help force the user to look in a certain direction, then flip the directional cue for even more contrast.

The difference between tight and open space creates a lot of contrast. If you want to ensure that your text is easy to see and read, give it a little more space to draw attention to it.

In short, the idea behind contrast is that opposites attract. Elements that are seemingly different can actually work together so that both are easy to see at a glance.

To know if contrast is working in the way you intend, think about a couple of factors when you look at the elements on the screen:

  • Readability: Are all the words and images easy to see and read?
  • Clarity: Is it easy to distinguish one element from another?
  • Accessibility: Does it work for as many people as possible?
  • Environment: Can users see and understand the design in the places where it will be used?


user interface design

user interface design

The last of the three Cs is content. The user interface design can only be as good as the information contained therein. Content includes everything from images to text to illustrations and icons to logos and brand marks. Content also includes video and every bit of copy from the full messaging or narrative to blog posts to tiny bits of micro-copy.

Just having content is not enough. You have to have stellar content.

All of these elements come together to tell the story of what makes your design and user interface special. Why should users give you their time rather than do something else?

And just having content is not enough. You have to have stellar content. High-resolution content. High-value content. Your content has to be better/bigger/more special than similar content competing for the attention of users.

That can be a tall order, but most designers can create this content by being true to themselves and their brand and messaging. Stick to what you are and what you know. Users will see this authenticity and hopefully value it by spending time with your design.


Now that you are armed with the old three Cs of business — company, customers and competitors – and three Cs of user interface design – color, contrast, and content – you have the tools and knowledge to create s design project that’s out of this world good. (Or at least highly usable.)

By working both strategies into design projects, you are forced to think about how to create something that will benefit the website owner and the user. You are creating not just so that the design is beautiful, but also so it is functional.

Note: All of the examples in this article are from the Design Shack Gallery. Make sure to take a look around; it’s full of great work and inspiration.


Persisted WordPress Admin Notices: Part 3

Welcome back to our series on persisted WordPress admin notices. We're now in a good position to be able to extend our admin notice functionality and control when they appear on the page.

After that, we'll move on to persistent admin notices and see how you can make sure they're dismissed in such a way that they don't reappear when admin pages are reloaded. 

This is particularly important as custom admin notices implemented in plugins and themes are only really useful when you can permanently dismiss them. It's not enough to simply add the is-dismissible CSS class.

Controlling When Admin Notices Appear

Up until now, all admin notices have been displayed as soon as the page loads. There may be times when this is inconvenient and you want the admin notice to be displayed after a certain event has been triggered instead.

How about if we wanted a custom admin notice to be displayed on the plugin options page we created earlier, but only after the Save Changes button was clicked?

We already know from part two how to restrict an admin notice to the plugin options page. Let's find out how we can trigger it to appear after plugin options have been saved.

Begin by commenting out the add_action function call for plugin_admin_notice. Then, add a fourth add_action call in init as follows:

Whenever plugin options are saved, a settings-updated value of true is added to the super global $_GET array variable. We can use this to determine if we need to display our admin notice.

Add a new conditional_plugin_admin_notice method to Gwyer_Admin_Notices that outputs the value of $_GET to the screen.

When the plugin options page is loaded normally we don't see a value set for settings-updated.

Normal Plugin Options Page Loading

Now enter some text in the Enter some text field and click Save Changes. This time, we see settings-updated set to true, which we can put to good use.

The settings-updated value set to true

Replace the conditional_plugin_admin_notice with:

By now, this code should be looking familiar to you. A couple of new features have been added, though. Firstly, the conditional expression has been extended to test for the presence of settings-update. Now, the admin notice will only display if we're on the plugin options page and if settings-updated is set to true.

Also, the current user display name is outputted to make the admin notice a little more personal.

A more personal admin notice message

The wp_get_current_user() function returns information about the currently logged-in user. This object is stored in $current_user and contains details such as user email, ID, first name, last name, and display name, which is the particular property we're interested in.

Finally, for a little extra polish, we've prevented the default admin notice from displaying so our custom one is the only one visible to the user. To achieve this, we just added a single line of code to conditional_plugin_admin_notice() to output CSS to hide the unwanted admin notice.

The final result when plugin options are saved is shown below.

The finished admin notice to show the plugin has been updated

While this works fine for demonstration purposes, a better (and cleaner) approach would be to add styles to a separate style sheet instead and enqueue it on the plugin options page only.

Our custom admin notice could be extended even further in a number of ways. One possibility could be to maintain a log that stored the current date/time along with user information every time the plugin options were saved.

Or how about getting the admin notice to display how many times the plugin options have been saved that day, week, month, etc.? I'm sure you can think of more examples too!

Dismissing Persisted Admin Notices Effectively

It's time to get our hands dirty now and dig into more in-depth code as we turn our attention to dismissing persistent admin notices. Up until now, the only way we've seen how to do this is to add the .is-dismissible CSS class to our admin notice div container. This dismisses the admin notice for the current page, but it isn't much use in practice as it reappears when an admin page is reloaded.

So how can we fix this? We'll look at several different methods of dismissing persistent admin notices, including:

  • One-off admin notice that disappears after one view.
  • An admin notice counter that disappears after a certain number of views.
  • Sticky admin notice that remains dismissed upon page refresh.
  • Custom action dismissal (admin notice removed after specific action has completed).

Before we start implementing each of these examples, make sure all add_action() calls in Gwyer_Admin_Notices::init() have been commented out. Then add a new dismissible-admin-notices.php file to the admin_notices plugin folder. Open up this new file and add a new class definition:

In admin_notices.php, add another require_once() call to import our new class:

The Gwyer_Dismissible_Admin_Notices class will contain all code related to dismissing persisted admin notices.

One-Off Admin Notice

The first method we'll look at is how to display an admin notice just the once so it doesn't reappear on page load. You could use this method to notify a user when a plugin or theme has just been activated.

Let's do this for our Admin Notices plugin. We'll start by registering a WordPress transient option upon plugin activation that's set to expire almost immediately.

In the Gwyer_Dismissible_Admin_Notices class, add a call to register_activation_hook():

The register_activation_hook() function requires you to specify the path to the main plugin file, but we're currently in dismissible-admin-notices.php. So we can't just use the PHP magic constant __FILE__ we used previously as this always points to the current PHP file.

Instead, we have to build the path to the main plugin file ourselves using plugin_dir_path( __FILE__ ) . 'admin-notices.php'.

When the Admin Notices plugin is activated, it will run code added to a set_admin_notice_transient class method, which we'll define next.

This method creates a new transient called 'admin-notice-transient' with a value of true, and is set to expire after five seconds.

Let's make use of this transient by conditionally displaying an admin notice if we're on the right admin page and our transient still exists.

Add a new add_action() call to init().

Then, add the display_admin_notice callback function as a new class method:

Similarly to previous examples, the admin notice only displays if we are on a specific page—in this case, the main admin plugins page. But we have an additional condition that the 'admin-notice-transient' must also exist, otherwise the admin notice won't display.

After the admin notice is outputted, the transient is deleted immediately, even though we initially set it to expire after only five seconds. This just ensures that it won't be shown again. This could potentially happen if a user tried to refresh the plugins page very quickly. But by deliberately deleting the transient, we can be certain this won't ever be the case.

To test the code we just added, head on over to the main plugins page and deactivate, then reactivate, the Admin Notices plugin.

The one-off admin notice

The key here is the 'admin-notice-transient' transient setting. Without this, the admin notice would appear every time the plugins page loaded (after the plugin was activated), which isn't what we want.

Admin Notice Counter

Next up is an admin notice that will display a set number of times only, after which it won't be visible anymore. Also, this time around it won't be restricted to any particular admin page.

Before we begin, in the Gwyer_Dismissible_Admin_Notices class, comment out the register_activation_hook() and add_action() function calls. Now let's set up a basic admin notice which we'll extend the functionality of shortly.

Add a new add_action() call in init():

And then flesh out the callback function display_admin_notice_counter():

This will display a standard admin notice that will appear on every WordPress admin page.

Standard admin notice ready for customisation

Let's think about what we need to do. Our admin notice should display a set number of times, and each time it appears an internal counter is increased by one. Once the counter limit has been reached, the admin notice shouldn't appear again.

We want the admin notice to be displayed on any admin page and so the counter value must persist between page loads. One good way of doing this is to use a database option to store the counter value.

Add a counter class property to store the counter limit value:

This will be used shortly to manage how many times the admin notice appears. Inside display_admin_notice_counter(), update the code as follows:

Prior to the admin notice being displayed, we're retrieving the counter option, and a default value is returned if it doesn't yet exist. After the admin notice renders, the counter option is increased by one and updated. If it doesn't exist then a new option will be created to store the current value.

We've also updated the CSS class to be an information admin notice.

Try visiting various admin pages and see the counter increase each time.

Counter admin notice in action

The ++$counter code is an example of a pre-increment operator. It adds a value to $counter before it's saved to the database. If we used a post increment operator (i.e. $counter++) then the value of $counter would be stored first and then increased, which wouldn't work.

Let's incorporate $counter_limit now to prevent the admin notice appearing too many times. Add this to display_admin_notice_counter() underneath the declaration for $counter:

Now, once the admin notice has displayed five times, it won't be visible on subsequent admin pages. It might be nice, though, to display a message the last time the admin notice appears so the user knows it won't appear again. Extend the conditional expression and output an additional message:

However, you won't see the message if you've already gone over the counter limit. You can temporarily solve this by increasing the $counter_limit variable.

Display an additional message on the final render

For testing purposes, it would be better to be able to reset the counter limit. If you know how to edit the database, you can go in and change the option directly, but this can be tedious to do multiple times. So let's implement our own reset feature.

First, change $counter_limit back to 5 and add a new class property:

Then, inside init() replace


The reset function should either show our counter admin notice or delete the admin_notice_counter database option and display a warning admin notice instead.

To use the new reset feature, simply change $counter_reset to true and load any admin page.

Reset admin notice counter

Then change it back to false again.

Admin notice counter successfully reset

Note: This method could easily be used to display an admin notice just the once, as we did in the previous example, but it's slightly more complicated to set up. It really depends on your requirements.

If all you ever need is a single use admin notice then the previous method will probably suit your needs better and is quicker to implement. But the counter method is more flexible, and once set up, it's just as easy to use in your own projects.


We've covered quite a lot of ground in part three of this tutorial series. We've seen how to control when admin notices appear rather than just always appearing as soon as an admin page has finished loading. This is useful in many ways, but our example showed how to display a custom admin notice after plugin options had been saved.

Then, we moved on to two distinct examples of dismissing persistent admin notices. This gives you a lot of flexibility in how you present admin notices to the user. And in the next and final part of this tutorial series, we'll be looking at more ways to dismiss persistent admin notices.

And, for a bit of fun, we'll create our own custom admin notice types and add icon decorations.

10 Free CSS Ghost Button Code Snippets

Creating Your First Angular App: Components, Part 1

The second tutorial of this series taught you how to store data inside the Angular app and access it using a service class. In this tutorial, we will create the HomeComponent for our Angular app.

The homepage or the HomeComponent that we are creating will list the top three countries in different categories like population and area. The data to determine the sorting order will be taken from the COUNTRIES array we created in the previous tutorial.

Creating the HomeComponent Class

To create the HomeComponent, change the directory in the console to your app folder and run the following command:

This will create a folder called home inside the src/app folder with four files inside it. For this app, we only need to be concerned with three files named home.component.ts, home.component.css, and home.component.html. The home.component.ts file will contain all the logic for the component, and the CSS and HTML files will control the appearance and structure of the component.

Let's start by editing the home.component.ts file. The HomeComponent is supposed to show the top three most populated countries, the three largest countries, and the three countries with the highest GDP stored in the COUNTRIES array. 

We will be importing both the Country class and the CountryService class that we created in the last tutorial. We will also import Component and OnInit from @angular/core. The OnInit dependency provides a lifecycle hook that is called right after data-bound properties of a directive are initialized.

After importing all the necessary dependencies, we will define our component decorator. The component decorator is used to provide the necessary metadata information related to our component. We will set a value for the selector, templateUrl, and styleUrls inside the decorator. 

The selector is used to specify the tag that will be used to identify our component. The templateUrl is used to provide the URL for the template to be rendered when Angular encounters the provided selector. The styleUrls property is used to specify different stylesheets that should be applied to the given template. Here is the code inside home.component.ts up to this point:

Now we will start defining the HomeComponent class with different properties and methods to help us show the country data to users. The HomeComponent class will have three different properties, which will accept an array of countries as their value. We can inject a dependency in the component's constructor by specifying a constructor parameter with the dependency type. That's how we will inject the CountryService class inside our HomeComponent

Here is the rest of the code for the home.component.ts file:

We have created three methods that use the CountryService class to get the countries with the largest area, the highest population, and the highest GDP. The arrays returned by different CountryService methods are then assigned to the corresponding properties of the HomeComponent class.

You should note that all these methods that set the value of populatedCountries, largestCountries, and gdpCountries are called inside the ngOnInit() method so that their values can be used as soon as the component is created.

Creating the HomeComponent Template

After writing the code for the HomeComponent class, it is time to create the HTML template for the component. Since the code inside home.component.html is mostly HTML, I will only be explaining the Angular-specific parts. Here is the code for the whole file:

As I have explained earlier, the populatedCountries, largestCountries, and gdpCountries have been assigned an array of Country objects as their value. We are using the NgFor directive to loop over all the countries in a specific array and show their names and respective properties. For example, *ngFor="let country of populatedCountries" loops over all the country objects inside the populatedCountries array and assigns that value to the local variable country. This directive also renders the corresponding a tag as well as all other tags inside it for each country object inside the populatedCountries array. The same explanation goes for all the country blocks rendered by iterating over largestCountries and gdpCountries.

We are using Angular pipes to properly format the population, area, and GDP values for different countries to make them more readable. One thing that you might find confusing is the routerLink directive that I have used with all the a tags. We will discuss it in more detail in the last tutorial of the series when we write code to traverse between different components or sections of the app. The value of the routerLink directive acts like a regular link that we come across on websites that we visit. The important difference is that instead of loading pages, we will be loading components.

Creating the CSS File for HomeComponent

Finally, you can write some CSS to make the HTML template more presentable. Here is the CSS that I have used for the HomeComponent. Keep in mind that this CSS needs to go inside the home.component.css file.

It is important that the CSS inside home.component.css is only applied to the elements inside the home.component.html file.

You might want to render HomeComponent inside the application shell by changing the contents of the app.component.html file to the following:

Unfortunately, you will get the following error when trying to do so:

We will talk more about the routerLink directive and how to get rid of this error in the fifth tutorial of this series. Right now, you can remove all mentions of routerLink from the home.component.html file to run your Angular application without any error. Just make sure that you add everything back to the file.

Final Thoughts

If you have never created an Angular app before, getting comfortable with components will take some time. For ease of understanding, you can consider components similar to different iframes loaded inside a webpage. The .ts files contain the logic for the component, just as .js files contain the logic for iframes. 

The .html files contain the elements that you want to render in an iframe or inside a component, and the .css files contain different style rules for those elements. I admit that this is not a very accurate comparison, but it should help beginners make sense of components and the relationship between different files of a component.

In the next tutorial, we will create two more components that will help you understand components more clearly. If you have any questions about the code related to HomeComponent, please let me know in the comments.


Taking A Look At The State Of Progressive Images And User Perception

“Progressive Images” is a hot topic these days. We often come across articles explaining techniques on how to avoid showing an empty space where an image will load. Medium and Facebook are examples of websites and mobile apps that apply this pattern. I recently wrote about different ways to use SVG as placeholders, and this year’s PerfPlanet’s Performance Calendar included two posts that further describe SQIP, a technique based on blurred SVGs: Progressive Image Loading using Intersection Observer and SQIP and SQIP — Vague Vectors for Performant Previews.

February 06 2018


Mobile App With Facial Recognition Feature: How To Make It Real

Imagine an application that can, in real time, analyze a user’s emotional response while they’re interacting with an app or website. Or imagine a home device that recognizes you and tunes in to your favorite TV channel. Yes, today’s article is all about facial recognition technology. We’re going to share our first experience of dealing with this technology and the findings we’ve made. Why Is Facial Recognition On The Rise?

Counting With CSS Counters and CSS Grid

You’ve heard of CSS Grid, I’m sure of that. It would be hard to miss it considering that the whole front-end developer universe has been raving about it for the past year.

Whether you’re new to Grid or have already spent some time with it, we should start this post with a short definition directly from the words of W3C:

Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.

In my own words, CSS Grid is a mesh of invisible horizontal and vertical lines. We arrange elements in the spaces between those lines to create a desired layout. An easier, stable, and standardized way to structure contents in a web page.

Besides the graph paper foundation, CSS Grid also provides the advantage of a layout model that’s source order independent: irrespective of where a grid item is placed in the source code, it can be positioned anywhere in the grid across both the axes on screen. This is very important, not only for when you’d find it troublesome to update HTML while rearranging elements on page but also at times when you’d find certain source placements being restrictive to layouts.

Although we can always move an element to a desired coordinate on screen using other techniques like translate, position, or margin, they’re both harder to code and to update for situations like building a responsive design, compared to true layout mechanisms like CSS Grid.

In this post, we’re going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that’s the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters.

Counting With Checkboxes

If you’ve never used CSS Counters, don’t worry, the concept is pretty simple! We set a counter to count a set of elements at the same DOM level. That counter is incremented in the CSS rules of those individual elements, essentially counting them.

Here’s the code to count checked and unchecked checkboxes:

<input type="checkbox">Checkbox #1<br>
<input type="checkbox">Checkbox #2
<!-- more checkboxes, if we want them -->

<div class="total">
  <span class="totalChecked"> Total Checked: </span><br>
  <span class="totalUnChecked"> Total Unchecked: </span>
::root {
  counter-reset: checked-sum, unchecked-sum;

input[type="checkbox"] {
  counter-increment: unchecked-sum;

input[type="checkbox"]:checked {
  counter-increment: checked-sum;

.totalUnChecked::after {
  content: counter(unchecked-sum);

.totalChecked::after {
  content: counter(checked-sum);

In the above code, two counters are set at the root element using the counter-reset property and are incremented at their respective rules, one for checked and the other for unchecked checkboxes, using counter-increment. The values of the counters are then shown as contents of two empty <span>s' pseudo elements using counter().

Here's a stripped-down version of what we get with this code:

See the Pen Checkbox + Label Grid by Preethi (@rpsthecoder) on CodePen.

This is pretty cool. We can use it in to-do lists, email inbox interfaces, survey forms, or anywhere where users toggle boxes and will appreciate being shown how many items are checked and how many are unselected. All this with just CSS! Useful, isn’t it?

But the effectiveness of counter() wanes when we realize that an element displaying the total count can only appear after all the elements to be counted in the source code. This is because the browser first needs the chance to count all the elements, before showing the total. Hence, we can’t simply change the markup to place the counters above the checkboxes like this:

<!-- This will not work! -->
<div class="total">
  <span class="totalChecked"> Total Checked: </span><br>
  <span class="totalUnChecked"> Total Unchecked: </span>
<input type="checkbox">Checkbox #1<br>
<input type="checkbox">Checkbox #2

Then, how else can we get the counters above the checkboxes in our layout? This is where CSS Grid and its layout-rendering powers come into play.

Adding Grid

We're basically wrapping the previous HTML in a new <div> element that’ll serve as the grid container:

<div class="grid">

  <input type="checkbox">Checkbox #1 
  <input type="checkbox">Checkbox #2 
  <input type="checkbox">Checkbox #3 
  <input type="checkbox">Checkbox #4 
  <input type="checkbox">Checkbox #5 
  <input type="checkbox">Checkbox #6

  <div class=total>
    <span class="totalChecked"> Total Checked: </span>
    <span class="totalUnChecked"> Total Unchecked: </span>


And, here is the CSS for our grid:

.grid { 
  display: grid; /* creates the grid */
  grid-template-columns: repeat(2, max-content); /* creates two columns on the grid that are sized based on the content they contain */

.total { 
  grid-row: 1; /* places the counters on the first row */
  grid-column: 1 / 3;  /* ensures the counters span the full grid width, forcing other content below */

This is what we get as a result (with some additional styling):

See the Pen CSS Counter Grid by Preethi (@rpsthecoder) on CodePen.

See that? The counters are now located above the checkboxes!

We defined two columns on the grid element in the CSS, each accommodating its own content to their maximum size.

When we grid-ify an element, its contents (text including) block-ify, meaning they acquire a grid-level box (similar to block-level box) and are automatically placed in the available grid cells.

In the demo above, the counters take up both the grid cells in the first row as specified, and following that, every checkbox resides in the first column and the text after each checkbox stays in the last column.

The checkboxes are forced below the counters without changing the actual source order!

Since we didn’t change the source order, the counter works and we can see the running total count of checked and unchecked checkboxes at the top the same way we did when they were at the bottom. The functionality is left unaffected!

To be honest, there’s a staggering number of ways to code and implement a CSS Grid. You can use grid line numbers, named grid areas, among many other methods. The more you know about them, the easier it gets and the more useful they become. What we covered here is just the tip of the iceberg and you may find other approaches to create a grid that work equally well (or better).

Counting With CSS Counters and CSS Grid is a post from CSS-Tricks


Persisted WordPress Admin Notices: Part 2

In part one of this series, we learned how to implement a basic admin notice that appears at the top of every WordPress admin page. In this tutorial, we'll start to build out a plugin to contain all our custom admin notice code.

We'll begin by implementing standard admin notices and use them as a base for more flexible and advanced examples.

Setting Up Our Plugin

First, though, let's set up a new plugin from scratch that we'll be using for all our admin notices so we're ready to start entering code.

I'll assume here that you already have a local WP development site set up. If not then refer back to the links in part one of this tutorial series.

Create a new plugin folder called admin_notices inside /wp-content/plugins/, and then create an admin_notices.php file which will be the main plugin file.

Open up admin_notices.php in your favorite editor and add the basic plugin structure:

We added a basic plugin header so WordPress recognises our plugin. This is followed by a class that will contain methods to display our admin notices.

I named the class Gwyer_Admin_Notices to try and make it as unique as possible. This way, it's much less likely to conflict with an existing class name.

Let's start by displaying a basic admin notice, and then add to it to make it more useful. To create an admin notice, add the admin_notices hook to the init() function:

The hook includes a test_notice callback function which will be used to output the admin notice markup.

Add the following class method to Gwyer_Admin_Notices to display the actual admin notice. For the messages, we'll be using classic movie quotes from the last 100 years of movies.

Activate the plugin to show the test notice.

Adding a basic admin notice to our plugin

Let's also add examples of the other types of admin notice we can display including the dismissible type by adding the is-dismissible CSS class. Add these to the test_notice() method underneath the existing admin notice div:

Full set of admin notice types

This is the full array of admin notice types we can display via the WordPress core CSS classes. Remember, though, that the dismissible admin notice will reappear on each page load!

'Dismissible' admin notice in this context means only for the current page. Having persistent admin notices isn't very flexible, so later on we'll be specifically looking at different ways you can dismiss your admin notices effectively.

Admin Notice Hooks

So far, we've only used the admin_notice hook to implement an admin notice. There are in fact four separate admin notice hooks that you can use to display notifications, but admin_notice is the one most commonly used.

The four hooks available are:

*No official documentation currently available for these hooks.

So where would you typically use all_admin_notices, user_admin_notices, and network_admin_notices? And how do they differ from admin_notices?

I said previously that the admin_notices hook displays notifications on all admin pages, but this isn't strictly true. If you take a look at admin-header.php in WordPress core, you'll see that admin_notices, network_admin_notices, and user_admin_notices are mutually exclusive. That is, only one of these hooks fires on a WordPress admin page.

A series of conditional expressions evaluates the current admin page and fires just one of them depending on the type of admin page you're currently on.

Firstly, is_network_admin() checks to see if you're on a network admin screen (e.g. any admin page based on a /wp-admin/network/ URL). If so, the network_admin_notices hook fires.

Otherwise, is_user_admin() checks to see if you're on a user admin screen (e.g. any admin page based on a /wp-admin/user/ URL). If so, the user_admin_notices hook fires. 

And, as you might have guessed, if both is_network_admin() and is_user_admin() return false then the admin_notices hook fires.

That just leaves the all_admin_notices hook. This hook isn't part of the conditional expression discussed above, so this hook is guaranteed to display on all admin pages no matter what, including multisite network admin pages.

To clarify, for any WordPress admin page, only the all_admin_notices hook is guaranteed to always fire. Out of the other three hooks, only one will fire depending on the admin page you're currently on.

I'd encourage you to take a look at admin-header.php (towards the end of the file) to see for yourself how WordPress evaluates when to use each admin notices hook.

We'll only be using admin_notices throughout this tutorial series, but you may find you have a need for some of the other hooks in your own project, so it's well worth checking them out.

Displaying Admin Notices on Specific Pages

Let's turn our attention now to displaying admin notices on specific pages. First, comment out the call to add_action so our test notices aren't displayed anymore.

Inside init(), add a new add_action() call that we'll use to display an admin notice on one specific admin page.

Then define the specific_admin_page() method as follows:

Save your changes and view any page in the WordPress admin. I'll try the main dashboard page.

Dashboard admin notice

As you can see, for any admin page you visit, the (base) name of the page is being displayed in the admin notice.

The get_current_screen() function returns a WP_Screen object with details about the current admin screen. The particular object property we're interested in is WP_Screen->base, which evaluates to the base type of the current screen. Try loading different WordPress admin pages to see what values are returned for WP_Screen->base.

We can use the base value to conditionally load our admin notice only on the dashboard page. The value we need to check for is dashboard. Let's also show an alternative admin notice if we aren't on the admin dashboard page. Replace your definition of specific_admin_page() with:

Output base name of current admin page in the admin notice

Everything's fine when we're on the dashboard page, but try navigating to any other admin page and see what happens.

Error type admin notice shown when were not on the expected admin page

Using this simple approach gives us quite a bit of flexibility when displaying admin notices on specific admin pages. We can easily extend this to whitelist any number of admin pages we want to show admin notices on.

Once again, replace the specific_admin_pages() function, this time with the following code:

Instead of checking for a single admin page, we now check to see if the base name for the current admin page is in the $whitelist_admin_pages array. When we navigate to the dashboard, media library, or comments admin pages, we see our success admin notice.

Our success message shows on the admin comments page

And when we visit any other admin page (not included in our whitelist array), we see an alternate admin notice.

Only allowed admin pages show the success message

What about displaying an admin notice on a plugin options page? How would we go about that? Before we get into this, we first need to set up a dummy options page for our plugin.

Create a new file called plugin-options.php inside the admin-notices plugin folder we added earlier, and add the following code:

At the top of admin-notices.php (directly above the class declaration), include the plugin options class into the main plugin file with:

I'm not going into too much detail on how the code in plugin-options.php works as that could be a whole tutorial on its own! If you want a refresher then I'd recommend taking a look at the WordPress Codex page on adding plugin options pages.

Basically, all we're doing is adding a new Admin Notices subpage to the Settings menu. The plugin options page itself contains a single text field which you can enter a string into. When the Save Changes button is clicked, the contents of the text field are saved to the WordPress database.

This is only a bare-bones example of a plugin settings page just for demonstration. It doesn't include the necessary sanitization or translation functions recommended for a production plugin intended for general release.

Go to Settings > Admin Notices to view the plugin options page.

Plugin options page

As expected, the admin notice we added previously displays on our plugin options page. The error message is displayed because our plugin options page isn't in the $whitelist_admin_pages array of allowed admin pages. Let's fix that now.

In order to add our options page to the array, we need to know the base name. Inside specific_admin_page(), change the error admin notice div to the following:

We still get the same error admin notice as before, but this time it includes the base name we need, which turns out to be settings_page_admin-notices/plugin-options. That's not a name we could have easily guessed, so it was worth taking the time to output it!

Add the base name to the $whitelist_admin_pages array, which should now look like this:

Refresh the plugin options page to see the updated admin notice.

Updated admin notice

Now that we know the plugin options page base name, we can easily create an admin notice that only displays on that admin page. Remove settings_page_admin-notices/plugin-options from the $whitelist_admin_pages array and comment out the second add_action function call in init(). Then add a third action we'll use for our plugin options page only admin notice. Your init() function should now look like this:

Let's flesh out the plugin_admin_notice() callback function now. Add this new method to the Gwyer_Admin_Notices class:

This is very similar to specific_admin_page() except we've removed the conditional expression. We also added a dismissible button by adding the is-dismissible CSS class, so the admin notice can now be closed too.

Plugin options page only admin notice

Try loading other admin pages to confirm that the admin notice only displays on the plugin options page.


In this tutorial, we learned more about admin notices and the various hooks available for displaying them. We also covered how to display admin notices only on specific pages of the WordPress admin. We developed a dedicated plugin to contain all the custom admin notice code.

In part three, we'll further extend the plugin by showing how to trigger admin notices when certain events occur. Remember, the open-source nature of WordPress makes it easy to learn and extend. To that end, we have much to review and study in Envato Market if you're curious.

We'll then turn our attention to finding out how we can solve the persistent admin notice issue so that they don't reappear when the page is refreshed. We'll implement several different methods in our custom plugin to allow us to do this.


30+ Best Retro Text Effects & Styles

Are you looking for a way to design stunning retro text effects without having to spend hours in Photoshop? Then you’ll love our collection of retro text effect templates and styles that you can use to cut your design work in half.

Whether you’re working on a retro-style title for a website header, designing a badge for a T-shirt, logo for a brand, or crafting unique quote pictures for a social media campaign, this handpicked collection has a text effect for all kinds of design work.

No need to choose. You can actually download all these text effects for a single price. Simply subscribe to Envato Elements and start downloading everything on the platform. See if you can find some inspiration for your next design from this great collection of retro text effects!

80s Text Effects Vol. 1

The groovy text effects in this bundle feature the same old retro look from the 80s movies. This pack includes 8 different text effects with retro background textures. The effects arrive in fully-layered PSD files, allowing you to easily edit them to change the text and customize.

Retro Text Effects V2

This bundle also includes 10 unique retro style text effects you can use to design website headers, logos, badges, signage, and more. The effects come to you in PSD files and they are available in 7 different colors as well.

14 Vintage Retro Text Effects

Another big bundle of text effects that includes 14 different text effects and styles for crafting various text and title designs. These text effects also feature an old-school 3D effect created with smart objects, which can also be customized to your preference.

12 Retro Photoshop Text Effects

Quickly convert your text to a vintage design using this pack of text effects. This bundle includes 12 unique text styles created with smart objects for easier customization. The effects are clearly organized in PSD files to let you edit and customize them as you wish.

80s Text Effects Vol. 2

This pack of text effects features a set of 8 retro designs for crafting titles, text, and badges for different types of projects, including logos, posters, T-Shirt designs, CD covers, and more. All the text effects and styles in this bundle are easily customizable as well.

Retro Style Text Effects Vol.1

It doesn’t get any more retro than this. This is a pack of 10 unique text effects, all featuring old-school text designs from the 80s. According to the designer, you can edit, customize, change, and save these text effects within 30 seconds.

Rocking Retro PS Text Effects

Give your text designs that old 80s look using this pack of retro text effects. This pack includes 3 different designs that feature retro electro look from the 1980s. It’s perfect for designing a music album cover or a movie poster.

10x Retro Text Effects

The text effects in this bundle feature several different retro designs, including one that’s similar to the big illuminated signs you see in Las Vegas. It includes 10 different text effects, all of which are fully editable. The 3D text effect is also customizable.

Retro Text Effects vol.1

This Text effects bundle includes 10 stylish and beautiful effects you can instantly apply to your own texts. The PSD files in this pack are fully-layered with smart objects for easily customizing and editing the files. It’s ideal for a T-Shirt design or a logo design.

Vintage Letterpress Text Effects Vol. 1

The effects in this pack will give your text that same old worn out look from the letterpress designs in the 1940s. The pack includes 10 fully editable PSD files. These effects will also work on objects and shapes as well.

Retro Vintage Text Effect

Perfect choice for crafting signage and badges, the text effects in this bundle features a retro design style with a mix of 3D effects. It includes 10 PSD files with different effects along with a set of retro backgrounds as well.

Vintage Halftone – Instant Text Effects

The halftone color effect is a popular design that’s often used in vintage and retro designs. These text effects feature that same effect you can easily apply to your own text. The pack includes 12 different text effects with 12 color variations and 12 backgrounds.

Hometown Effects Pack

This bundle includes 12 unique text effects that all feature that same old design from the old text designs you see in newspaper ads and titles from the 1980s. The text effects come to you in easily editable PSD files. As a bonus, the pack also includes 12 photo effects you can apply to your photos and graphics.

Comic Book Text Styles

We can’t forget about comic book text effects when talking about retro designs. This pack of text effects includes 11 colorful effects features that same old design style you see in comic books. These effects are perfect for designing any kids-related design project and crafting fun greeting cards as well.

Retro Text Effects vol.3

The retro text effects in this bundle also feature a certain elegant design that makes them ideal for designing titles and headers for luxury websites. It’s also great for crafting signage and badges for T-Shirts as well. The pack includes 10 effects in layered PSD files.

Vintage Letterpress Text Effects Vol. 2

Yet another bundle of vintage text effects featuring the popular letterpress design. The effects included in this bundle will give your text a textured and washed out look that instantly turns your text into something from the 1970s. The pack features 10 unique text effects in 2000 x 1500 resolution PSD files.

Back to the Seventies

Bring your text and title designs back to the 70s using these groovy text effects. This effect has been designed inspired by the 70s pop culture. The pack includes 50 different text styles. You’ll need Adobe Illustrator CS6 or better to edit and customize these effects.

Retro Vintage Text Styles

Another pack of retro text effects featuring the stylish look from the 80s. This bundle includes 10 different text styles along with the backgrounds. All come to you in editable PSD files. You can use these for crafting posters, covers, website headers, logos, and more.

80’s Style Text Mockups V1

This stunning 80s retro text style features a cool design that truly represents the electronic tech craze from the 1980s. The bundle includes 18 text effects. You can easily edit and customize these effects to replace the font and change the text as well.

80’s Style Text Mockups V2

Another retro text effect similar to the one above. This text style also features that same 1980’s tech design, but with a cool chrome design. It includes 10 different designs in PSD files. It’s perfect for designing flyers for DJ events, crafting posters, logos, badges, T-Shirts, and more.

3D Retro Text Creator

This is not an ordinary text effect template, this is actually a set of Photoshop Actions that allows you to instantly apply a retro effect to your normal text layers. It comes with 37 actions for achieving different styles of retro effects. You can also customize the effects to your preference.

Retrohat Graphic Styles

Retrohat is a collection of 26 different retro text effects that you can apply to your own text to add that same retro style to your designs. The effects come in both Illustrator AI files and EPS files for easier customization.

Sloppy Press Inc

Sloppy Press is a set of layer styles for adding retro effects to both your text and objects. It also comes with textures, actions, and brushes for easily creating your own custom retro effects.

Retro Vintage Text Styles Vol.02

This collection of text styles features both retro and vintage style designs. It includes 10 unique designs in Adobe Illustrator vector files, which allows you to customize the effects however you want.

Steampunk Text Styles, Brushes and Backgrounds

Steampunk designs are also a stylish trend these days. This text styles pack includes 5 different text styles and it also comes with steampunk style brushes and backgrounds as well.

Circus Text Styles

Turn your text and titles into a signage from a circus using this text styles pack. This bundle includes multiple retro text styles you can apply to your own text using Illustrator.

Grunge Text Layer Styles

This is yet another Adobe Illustrator layer styles pack that includes 50 unique grunge retro style layer effects. You can use these layer styles on both text and objects to give a retro look to your designs.

Strangest Things PS Text Actions

Inspired by the title effect from the Stranger Things, this Photoshop Actions pack allows you to give that same retro effect to your text layers. It includes 3 different actions, all of which are fully editable.

Old Movie Title – Text Effect 1

This effect gives your text layers an old vintage look by turning your text into old movie titles from the 1960s. This effect gives your text a nice 3D-like effect as well.

Old Movie Title – Text Effect 2

This is the second version of the old movie title text effect. It features the same effect but with a different design. You can replace the text by editing the smart objects of the PSD.

Old Movie Title – Text Effect 5

Another movie title effect for giving your text designs a vintage look. This effect is fully editable and comes in a layered PSD file for easier editing.

Old Movie Title – Text Effect 6

This retro movie title effect is perfect for creating horror-themed designs, such as Halloween greeting cards and movie posters. You can easily customize the PSD files to replace the text.

Create your own text effects using our poster fonts collection and watercolor background textures collection.


Create Your First Angular App: Storing and Accessing Data

In the first tutorial of the series, we learned how to get started in order to create an Angular app. After successfully completing that tutorial, you should now have your first functioning Angular app with the heading 'Fun Facts About Countries'. Before creating any components that can be rendered on the screen, we will create some classes and define some functions that make those components useful.

In this tutorial, our focus will be on creating a Country class which will contain different properties whose value we want to display to the user. We will then create another file named country-data.ts. This file will contain information about all the countries in our app. Our third file will be named country.service.ts. The name may sound fancy, but the file will just contain a CountryService class with all the necessary functionality to retrieve and sort the information provided by the file country-data.ts.

Creating a Country Class

Inside the src/app folder of your Angular app, create a file named country.ts. Add the following code inside it.

The above TypeScript code defines the Country class with six different properties to store information about different countries. The name of the country, its capital, and its currency are stored as a string. However, its area, population, and GDP are stored as a number. We will be importing the Country class in a lot of places, so I have added the export keyword before the class definition.

Creating an Array of Countries

The next step includes creating a country-data.ts file to store the information about all the countries as an array of Country objects. We will be importing the Country class in this file and then exporting a const named COUNTRIES which stores an array of country objects. 

Here is the code for country-data.ts. Just like country.ts, you have to create this file inside the src/app folder.

The first line in this file imports the Country class from the country.ts file located in the same directory. If you remove this line from the file, TypeScript will give you the following error:

Without the import statement, TypeScript will have no idea what an array of type Country means. So make sure that you have imported the right class and specified the location of country.ts correctly.

After importing the Country class, we go ahead and create an array of Country objects. We will be importing this array of countries for use within other files, so we add an export keyword to this array as well. Currently, there are five different Country objects in the array. Each of these five objects provides key-value pairs that list the name of a property and its value for a particular object or country.

If you try to add an additional property to the array which has not been declared inside the Country class definition, you will get the following error:

In this case, I was trying to store the name of the president as a string inside a property named president. Since no such property was declared, we got an error. Sometimes, you might want to specify a property only for particular objects and not for others. In such cases, you can mark the property optional inside the class definition. I have discussed it in more detail in a tutorial which covers TypeScript Interfaces.

For now, just make sure that the names of all the properties match the names inside the class definition. Also make sure that the value of each property has the same type as declared in the class definition.

Creating a CountryService Class

After creating our Country class and COUNTRIES array, we can now finally write some functions to process the country data. We will need to import both the Country class and the COUNTRIES array inside our service file. The file will need to import the COUNTRIES array in order to have access to the data. Similarly, the file will have to import the Country class in order to make sense of the data inside the COUNTRIES array.

We will also be importing other dependencies like Injectable from Angular core to make our CountryService class available for the Injector to inject in other components.

Once your app grows in size, different modules will need to communicate with each other. Let's say that ModuleA requires ModuleB in order to work properly. In such cases, we would call ModuleB a dependency of ModuleA

Simply importing the module we need into another file works most of the time. However, sometimes we need to decide if we should create a single instance of classes from ModuleB that will be used by the whole app or if we should create a new instance every time the module is used. In our case, we will be injecting a single instance of our CountryService class throughout the app.

Here is the code for country.service.ts:

An @injectable decorator is used to identify a service class that might require injected dependencies. However, adding the @injectable to service classes is a required coding style, so we do it anyway.

After that, we write different methods for the class which take the COUNTRIES array and either return it directly or sort it using certain criteria and then return a part of the array. 

The getCountries() method is expected to return all the Country objects, and so it returns the whole COUNTRIES array without making any modifications to it.

The getPopulatedCountries() takes the COUNTRIES array and sorts it in descending order based on the population of different countries. We then use the Array.slice() method in order to return the first three countries (with indices 0, 1, and 2) from the array. The getLargestCountries() and getGDPCountries() methods work in a similar fashion.

The getCountry() method takes a name as its argument and returns the country object whose name property has the same value as the supplied name argument.

Including CountryService in app.module.ts

A service that you create is just a class in Angular until you have registered it with an Angular dependency injector. An Angular injector will be the one responsible for creating service instance(s) and injecting them into different classes which need that service. We need to register a service with a provider before the injector can create that service.

There are two common ways to register any service: using a @Component provider or using the @NgModule provider. Using the @Component provider makes sense when you want to restrict the access of a service to a particular component and all its nested components. Using the @NgModule provider makes sense when you want multiple components to have access to the service.

In our case, we will be using CountryService with multiple components of our app. This means that we should register it with the @NgModule provider once, instead of registering it separately with the @Component provider of each component. 

Currently, your app.module.ts file should look like this:

Add an import statement to the app.module.ts file and add the service to the @NgModule providers array. After making these changes, your app.module.ts file should look like this:

The CountryService class will now be available to all the components that we create for our app.

Final Thoughts

Successfully creating three files named country.ts, country-data.ts, and country.service.ts concludes the second tutorial of this series.

The country.ts file is used to create a Country class with different properties like name, currency, population, area, etc. The country-data.ts file is used to store an array of country objects which have information about different countries. The country.service.ts file contains a service class with different methods to access the country data from the COUNTRIES array. Writing all these methods separately inside a service class allows us to access them inside different app components from a central location.

In the last section, we registered our service with the @NgModule provider to make it available for use inside different components.

The next tutorial will show you how to create three different components in your app to display country details and a list of countries.


Exploring New Worlds: A Smashing Creativity Challenge

Time flies! Did you know that it has been more than nine years already since we first embarked on our wallpapers adventure? Nine years is a long time, and sometimes we all should break out of our comfort zones and try something new, right? We'd love to invite you to a little creativity challenge: Get out your pens, paint brushes, camera, or fire up your favorite illustration tool, and design a desktop wallpaper for March 2018.

Tying in Augmented Reality and Virtual Reality to Your Brand’s Digital Presence

Just as you had mastered SEO, social media, and original content, along come platforms that threaten to disrupt all previous branding experiences.

According to a survey by Greenlight Insights, 53% of respondents said they would be more inclined to purchase from a brand that used virtual reality compared to one that did not.

Although we are now relatively more familiar with augmented reality (AR) and virtual reality (VR), it is still quite a challenge to understand how to design effective brand experiences with them.

You don’t want to invest in technology for it only to be a gimmick that does not significantly bolster your branding activities. And yet, there is the pressure to not get left behind while everyone else seems to be using cutting edge technology.

Most major brands today—The New York Times and Mercedes, as two examples—have used augmented reality and virtual reality experiences to engage customers.

How can your brand leverage AR/VR for best results?

But first, some background

Briefly, AR lets you add a layer of digital content to real, physical environments; VR entails an entirely digital immersive space.

The image shows a tablet being held up in front of a photograph of a man's torso. The augmented reality experience on the tablet adds a text overlay to the torso, so the viewer can read the text as if it were printed on the torso. When I was a student in a design and technology program at Parsons a few years back, I worked on a project that used augmented reality to deliver a new kind of reading experience for fiction writing. Image shows a drawing of two people looking at a screen, showing their selfies as cartoon images of themselves. With Facebook Spaces, users can now take virtual selfies that do not feature your “real self” but instead use avatars created from your likeness.

As a UX designer and creator of storyworlds, I’ve worked extensively with designing immersive experiences. Through my research, I’ve developed experimental frameworks for new modes of storytelling that blur the distinction between reality and fiction. The intriguing promise of AR and VR technologies to do just that has provided fertile creative ground to artists, designers, activists, and now, increasingly, brands around the world. As a practitioner, I’m interested in the potential of AR/VR for creating fictional universes, but it is just as exciting to see the far more ubiquitous work being done with AR and VR in areas like
marketing campaigns and documentary journalism.

Until the last couple of years, it was still quite novel to interface the real with the digital. Then came Pokemon Go, and nearly everyone with a smartphone could now see and catch tiny animated creatures in their physical environment.

Here are six tips for your brand to leverage augmented and virtual reality as user familiarity with the technologies reaches a fever pitch.

Start with your audience

As with all branding and marketing activities, understanding your industry and the audience you are targeting is going to be important when it comes to AR/VR.

Depending on your product offering, such as in the retail industry, your brand might benefit exponentially from creating engaging AR/VR experiences for both in-store and online customers. However, if you are selling domains, web hosting or insurance, there might not be any incremental benefits from a flashy AR/VR campaign.

Does creating AR/VR experiences for your target customer enable you to hit key performance indicators in your business? Or will it just be reduced to a throwaway promotional tactic?

You may want to dive right into both AR and VR, but it’s potentially beneficial to choose one kind of experience and do it well. Use both only if they fit two separate use cases. For instance, in a hospital emergency room, AR might be appropriate for staff training on where supplies are in the emergency department whereas VR might be more appropriate for showing people how to bandage a wound.

Showcase your brand

What is the story you want to tell? And why do you want to tell it?

Do you want to highlight product attributes, convey your mission, generate excitement, provide information, or feature yourself within your customer’s lifestyle?

All of these objectives are possible with an augmented or virtual reality experience, but these questions need to be answered from the get-go to create a focused experience.

It is, of course, not necessary to feature your product. You could create these branded experiences merely to delight your customers and make them think of your brand positively.

Image shows an adult male wearing virtual reality goggles. HBO featured a Game of Thrones installation at the SXSW festival that made participants feel like they were inside the show’s fantasy world.

After you’ve chosen an objective, you can start brainstorming the immersive content that will best support your brand and the ways you can interface physical reality with digital assets.

Retail experiences, for example, benefit greatly from AR and VR because the technology recreates the physical store experience in the virtual space. It is possible for customers to view, move around and explore, and purchase in a partially or entirely digital environment.

You can integrate your product virtually into your customer’s real life.

Image shows a person's hands holding a mobile phone. The person is in a living space, and the image on the phone is of that living space with an Ikea wing chair added to the scene. Ikea’s new AR app, Place, lets customers virtually visualize how new furniture might look in their homes.

Understand the limitations

Although AR technology has improved a great deal (especially with Apple’s new foray into the medium, the ARKit), issues with scale, positioning, and anchoring still impact interacting and viewing digital content in physical space.

Image shows a capture from a Pokemon Go experience, showing two characters with trees and sky in the background. You might remember how some Pokemon seemed to float around in mid-space rather than stand or sit on a surface.

If your objectives include having your customers read within the experience, remember that it is hard to read text within a VR experience (mostly because of resolution constraints). If you want to deliver a lot of information to your customers within the experience, think about ways you can do it visually or aurally.

Also, VR experiences have been known to induce motion sickness in some viewers.

You can, of course, invest in paper sick bags and trash cans that can be useful if things go sour, but it’s better to try and prevent it from happening altogether. You can do this by alerting your customers to this potential hazard in advance (effectively weeding out those with a weaker stomach), but you can also solve the issue creatively. For example, if you couple the VR glasses with motion chairs that mirror movement within the digital experience, you can reduce the risk of motion sickness. This also heightens the immersiveness of the experience, because the user goes through a parallel and well-matched visual and physical experience.

The VR experience you design may be virtual, but a positive brand experience might still necessitate a trained human brand representative who communicates safety information to your users before they put on the glasses, answers any questions they may have, and takes care of any distraught ones during and afterwards (and ensures that the sale is completed!).

Find venues to deliver these experiences

Do you have a physical outlet that can host a VR experience? Will your customers need to download an app?

You should answer these questions after thinking through your overall brand strategy. There will probably be many considerations to take into account before deploying an AR or VR experience that best serves your brand.

For example, if you decide to do an in-store VR pop-up, will you need to dedicate personnel to facilitate the experience? How can you best prepare for lines and waiting times?

Is the ultimate goal to make the in-store experience more engaging? Or do you want to drive downloads for your app?

An in-store experience positions AR/VR as an integral part of your brand, whereas digital content that does not interface with other brand touchpoints may be seen as a gimmick. Regardless of which avenue you decide on, think about how it represents your brand and what goals it achieves.

Image shows an outdoor, open plaza with one-storey buildings in the background. People are on the plaza clustered in groups of people kneeling facing people sitting in chairs. TOMS is a shoe company which donates a pair of shoes to children in need for every pair that customers buy. They use a virtual reality chair in their flagship store to transport customers into the South American schools to see the children the shoes are being donated to.

You will also need to think about content. Is this a one-off experience that remains unchanged from one viewing to another? That may work for a game-like experience where the user will probably go through different scenarios of exploring and winning and losing.

However, if you’re showing the same film in VR every time your customers visit, your message may get stale quickly. You could consider either only running the experience for a limited time period or changing or adding to the content to keep it fresh.

Design the experience

How do you ensure that the user experience—from the awareness to the delivery of the experience and all the way to feedback—is designed in a streamlined, user-friendly fashion?

Creating simple yet comprehensive tutorials and instructions are crucial to persuade a still hesitant target audience to try out AR and VR experiences. The more well-designed your entire experience is, the less need there will be for such hand-holding.

However, especially in the case where you don’t have a human brand representative to facilitate the experience, you will need branding, signage, and prominent positioning in place to communicate that the experience is available.

For AR experiences, you may want to highlight the barcode or scannable object that will trigger the digital layer and—ideally—include visual demos showing how to interact with objects in the physical and digital worlds (think Pokemon Go tutorials showing exactly how to aim your ball).

For VR experiences, you will also need clear and visible instructions that let users know they are expected to wear the headset and/or the headphones together, what they can expect to experience and, within the experience, how to navigate the content and make selections (if any).

For the actual design of the AR/VR experience, you can choose from a variety of producers and tools.

For very simple AR experiences, especially for print, you can use tools like Layar.

Image shows a child, seated at a table, holding a tablet. The image on the tablet appears to be a robotic car, viewed with AR as sitting on the table the child is at. Apple’s ARKit brings augmented reality development to iOS devices.

Thanks to growing interest in VR, developer talent for the technology is in high demand. You can choose an agency to handle the production for you or look for freelance developers.

Gauge audience reaction and feedback

To see what effect your AR/VR experiences are having on your customers and directly or indirectly on your bottom line, it is important to have a mechanism in place to gauge its effectiveness.

Perhaps you could measure built-in product purchases. Alternatively, if you think the customers may delay their order but the experience may still have played a part in their purchasing decision, a feedback form on both your mobile and web stores could be used to ask what prompted their purchase.

You could set up a pop-up VR experience at any location of your choice, freeing you up from the constraints of your main premises. Check out how Samsung (itself a leader in VR, alongside Google) created an engaging VR pop-up.

After an interested customer has completed the experience, you could easily let them purchase your product and check out using portable point of sale systems like Shopify POS.

AR and VR experiences also make for great viral content. Think up a creative hashtag that, perhaps, features your brand name and the words VR or AR that your customers could share on their social media.

Discovery VR was able to produce award winning results with their #StartWith1Thing campaign that combined the power of VR and storytelling with social.


What are your thoughts on the uses of AR/VR for branding purposes? Have you had any successes or failures incorporating the technologies in your brand experiences? What potential do you see for brands using AR/VR in the future?

Share your opinions and experiences below.

The Struggle for Freelance Growth

February 05 2018


Web-Powered Augmented Reality: a Hands-On Tutorial

Uri Shaked has written about his journey in AR on the web from the very early days of Google’s Project Tango to the recent A-Frame experiments from Mozilla. Front-end devs might be interested in A-Frame because of how you work with it - it's a declarative language like HTML! I particularly like this section where Uri describes how it felt to first play around with AR:

The ability to place virtual objects in the real space, and have them stick in place even when you move around, seemed to me like we were diving down the uncanny valley, where the boundaries between the physical world and the game were beginning to blur. This was the first time I experienced AR without the need for markers or special props — it just worked out of the box, everywhere.

Direct Link to ArticlePermalink

Web-Powered Augmented Reality: a Hands-On Tutorial is a post from CSS-Tricks


The Best UX is No User Interface at All

I have been obsessed with User Interfaces (UI) for as long as I can remember. I remember marveling at the beauty that was Compaq TabWorks while I played "The Incredible Machine" and listened to "Tears For Fears—Greatest Hits" on the family computer.

Don’t judge me—I was listening to "Mad World" way before Donny Darko and that creepy rabbit. If none of those references landed with you, it’s probably because I’m super old. In the words of George Castanza, "It’s not you, it’s me."

That’s another super old reference you might not get. You know what—forget all that, let’s move on.

I really got into UI when I bought my own computer. I had joined the Coast Guard and saved a bunch of money during boot camp (when you can’t go shopping—you know—because of push-ups and stuff). I wanted to buy a Chevy Cavalier (sadly, that’s not a joke), but my father encouraged me to invest in a computer instead, so I bought a Compaq from Office Depot that came with Windows 98. Also you can’t buy a Cavalier with 800 bucks.

Windows 98

I spent countless hours changing the themes in Windows 98. I was mesmerized by the way windows overlapped and how the icons and fonts would change; the shapes of buttons and the different colors. The slight drop shadow each window had to layer it in space. Each theme was better than the previous theme!

Oh, The depth of the blues! The glory of fish! BREATHTAKING.

If only I had known how much better things were going to get. If only I had known, about Windows XP.

Windows XP

Does love at first sight exist? No—don’t be ridiculous. Love is an extremely complex part of the human condition that can only manifest itself over time through long periods of struggling and the dark night of the soul.

"What is love? Baby don’t hurt me. Don’t hurt me. No more."

—Haddaway, "What Is Love"

But love’s fickle and cruel cousin, Infatuation, does exist and it is almost exclusively available at first sight. I was absolutely infatuated with Windows XP.

The curves on the start menu. The menu animations. I could just look at it for hours. And I did. Shocking fact—I wasn’t exactly in high social demand so I had a great deal of free time to do weird things like stare at an operating system.

For those who remember, Windows XP was extremely customizable. Virtually every part of the operating system could be skinned or themed. This spawned a lot of UI hacking communities and third party tools like Window Blinds from the fine folks at Stardock. I see you Stardock; the north remembers.

I Love UI

I could go on and on about my long, boring and slightly disturbing obsession with UI. Oddly enough, I am not a designer or an artist. I can build a decent UI, but you would not hire me to design your site. Or you would but your name would be "Burke’s Mom."

Awww. Thanks, Mom. I can do 3 images.

I can however assemble great UI if I have the building blocks. I’ve been lucky enough to work on some great UI projects in my career, including being part of the Kendo UI project when it first launched. I love buttons, dropdown lists, and dialogue windows with over the top animation. And I can assemble those parts into an application like Thomas Kinkade. I am the UI assembler of light.

But as a user, one thought has been recurring for me during the past few years: the best user experience is really no user interface at all.

UI is a Necessary Evil

The only reason that a UI even exists is so that users can interact with our systems. It’s a middle-man. It’s an abstracted layer of communication and the conversation is pre-canned. The user and the UI can communicate, but only within the specifically defined boundaries of the interface. And this is how we end up with GLORIOUS UX fails like the one that falsely notified Hawaiian residents this past weekend of an incoming ballistic missile.

We have to anticipate how the user is going to think or react and everyone is different. Well designed systems can get us close to intuitive. I am still a fan of skeumorphic design and "sorry not sorry." If a 4 year old can pick up and use and iPad with no instruction, that’s kind of a feat of UX genius.

That said, even a perfect UI would be less than ideal. The ideal is to have no middleman at all. No translation layer. Historically speaking, this hasn’t been possible because we can’t "speak" to computers.

Until now.

Natural-Language Processing

Natural-language processing (NLP) is the field of computing that deals with language interaction between humans and machines. The most recognizable example of this would be the Amazon Echo, Siri, Cortana or Google. Or "OK Google." Or whatever the heck you call that thing.

I firmly believe that being able to communicate with an AI via spoken language is a better user interaction than a button—every time. To make this case, I would like to give you three examples of how NLP can completely replace a UI and the result is a far better user experience.

Exhibit A: Hey Siri, Remind Me To...

Siri is not a shining example of "a better user experience," but one thing that it does fairly well and the thing I use it for almost every day, is creating reminders.

It is a far better user experience to say "Hey Siri, remind me to email my mom tomorrow morning 9 AM" than it is to do this...

  1. Open the app
  2. Tap a new line
  3. Type out the reminder
  4. Tap the "i"
  5. Select the date
  6. Tap “Done”

No matter how beautiful the Reminders app is, it will never match the UX of just telling Siri to do it.

Now this comes with the disclaimer of, "when it works." Siri frequently just goes to lunch or cuts me off halfway through which results in a nonsensical reminder with no due date. When NLP goes wrong, it tends to go WAY wrong. It’s also incredibly annoying as anyone who as EVER used Siri can attest.

This is a simple example, and one that you might already be aware of or not that impressed with. Fair enough; here’s another: Home Automation.

Exhibit B: Home Automation

I have a bunch of the GE Z-Wave switches installed in my house. I tie them all together with a Vera Controller. If you aren’t big into home automation, just know that the switches connect to the controller and the controller exposes the interface with which to control them, allowing me to turn the lights on and off with my phone.

The Vera app for controlling lights is quite nice. It’s not perfect, but the UX is decent. For instance, if I wanted to turn on the office lights, this is how I would do it using the app.

I said it was "quite nice." Not perfect. I’m just saying I’ve seen worse.

To be honest though, when I want to turn a light on or off, I don’t want to go hunting and pecking through an app on my phone to do it. That is not awesome. I want the light on and I want it on now. Turning lights on and off via your phone is a step backward in usability when compared to, I don’t know, A LIGHT SWITCH?

What is awesome, is telling my Echo to do it.

I can, for any switch in my house, say...

“Alexa, turn on/off the office lights”

Or the bedroom, or the dining room or what have you. Vera has an Alexa skill that allows Alexa to communicate directly with the controller and because Alexa uses NLP, I don’t have to say the phrase exactly right to get it to work. It just works.

Now, there is a slight delay between the time that I finish issuing the command and the time that Alexa responds. I assume this is the latency to go out to the server, execute the skill, call back into my controller, turn off the light, go back out to the skill in the cloud and then back down into my house.

I’m going to be honest and say that I sometimes get irritated that it takes a second or two to turn the lights on. Sure—blah blah blah technical reasons, but I don’t care. I want the lights on and I want them on NOW. Like Veruca Salt.

I also have Nest thermostats which I can control with the Echo and I gotta tell you, being able to adjust your thermostat without even getting out of bed is kind of, well, it's kind of pathetic now that I’ve said it out loud. Never mind. I never ever do that.

NLP doesn’t have to be limited to the spoken word. It turns out that interfacing with computers via text is STILL better than buttons and sliders.

For that, I give you Exhibit C.

Exhibit C: Digit

Digit is a remarkable little service that I discovered via a Twitter ad. You’ve aways wondered who clicks on Twitter ads and now you know.

I wish more people knew about Digit. The basic premise behind the service is that they save money for you automatically each month by running machine learning on your spending habits to figure out where they can save money without sending you into the red.

The most remarkable thing about Digit is that you don’t interface with it via an app. Everything is done via text; and I love it.

Digit texts me every day to give me an update on my bank account balance. This is a nice daily heads up look at my current balance.

Yes, I blurred out my balance. It’s so you don’t get depressed on my behalf.

If I want to know how much Digit has saved for me, I just ask how much is in my savings. But again, because Digit is using NLP, I can ask it however I like. I can even just use the word "savings" and it still works. It’s almost like I’m interfacing with a real person.

Now if I want to transfer some of that back into savings because I want to buy more Lego and my wife says that Lego are a "want" not a "need" and that we should be saving for our kids "college," I can just ask Digit to transfer some money. Again, I don’t have to know exactly what to say. I can interface with Digit until I get the right result. Even If I screw up mid-transaction, Digit can handle it. This is basically me filling out a form via text without the hell that is "filling out a form."

After using Digit via text for so long, I now want to interface with everything via text. Sometimes it’s even better than having to talk out loud, especially if you are in a situation where you can’t just yell something out to a robot, or you can’t be bothered to speak. I have days like that too.

Is UX as We Know it Dead?

No. Emphatically no. NLP is not a substitution for all user interfaces. For instance, I wouldn’t want to text my camera to tell it to take a picture. Or scroll through photos with my voice. It is, however, a new way to think about how we design our user interfaces now that we have this powerful new form of input available.

So, before you design that next form or shopping cart, ask yourself: Do I really even need this UI? There’s a good chance that thanks to NLP and AI/ML, you don’t.

How to Get Started With NLP

NLP is far easier to create and develop than you might think. We’ve come a long way in terms of developer tooling. You can check out the LUIS project from Azure which provides a GUI tool for building and training NLP models.

It’s free and seriously easy.

Here’s a video of me building an AI that can understand when I ask it to turn lights on or off by picking the light state and room location out of an interaction.

The Best UX is No User Interface at All is a post from CSS-Tricks


5 Ways to Network as a Remote Freelancer

One of the toughest areas of working as a freelancer is that there’s a sense of professional loneliness. Most of your work days are spent alone in a home office. While local networking opportunities exist, they may not be geared toward the creative industry. You need to get out!

You need to meet more creative workers. You need to develop a method to network as a remote freelancer, to create relationships that will help you grow in your career—and keep from feeling like you work on an island!

1. Contribute in the Online Space

remote freelancer

Playgrounds such as Dribbble, GitHub, and even portfolio sites such as Behance can lead to lasting freelancer relationships while helping you develop your skills and show off work.

The first step is the hardest. You might wonder if you have time to chat and play with designs that aren’t work based, but you do. And you might find that places like Dribbble and GitHub will help you collect feedback on working projects as well, so you can make them even better.

So, here’s how you get started. Don’t jump into every online forum at the same time. Pick the one that’s most closely related to what you do.

  • User interface and experience designers might want to start with Dribbble.
  • Coders and backend developers will probably find more like minds on GitHub or CodePen.
  • Print and typography designers often share projects on Behance, in a more portfolio or project style format.

But you are going to have to do more than just upload your ideas to make the most of online communities. You need to engage with other users. Like projects, offer feedback to users who ask for it.

Remember, many other users in these networks are looking for the same feedback as you. While some designers might mentor you, you can mentor other designers.

2. Join Social Media Groups

remote freelancer

Social media groups are a great way to interact with other people that have similar interests. While it can take a little time to find a group that best-suited for the type of chatter and interaction you crave, it’s a great way to meet other creatives.

The starting points are Facebook or LinkedIn. Both social networks have group features. Look for a group that focuses on your area of expertise, ask to join and then jump into conversations. (Don’t just lurk in groups; you are losing out on valuable networking time if you do.)

3. Take an Online Class

remote freelancer

There’s a wealth of knowledge in classroom environments, and classes can be a great place to network with other students as well.

Look for an online class that follows a more traditional format so that students are taking the class simultaneously. This online class format will likely include plenty of changes to meet and connect with other students – even if most of the conversations are virtual.

Take it one step further if you can and plan a meetup outside the classroom

One of the great things about tools such as Skype and Google Hangouts is that you can connect with people all over the world that share similar interests in a way that’s more genuine and real. When working with classmates in this space, opt to engage in video chat sessions so that you can actually see the people you are working with. Pay attention to facial expressions and body language.

Take it one step further if you can and plan a meetup outside the classroom if physical locations and schedules allow.

4. Get Involved with a Creative Organization

remote freelancer

Membership in a national creative organization – and involvement in that group – can open the doors to creative networking, although it can take a little time and effort.

Start by finding a national organization – bonus points if there is a chapter nearby – to join. Look for a group that’s pretty active with plenty of room for engagement, such as online forums for members, web chats or meetups, and conferences or other activities.

Insert yourself into the organization.

  • Interact and engage online. Ask questions; answer questions from others.
  • Enter contests and promotions offered by the organization. Even for national groups, this type of engagement (especially if you win or rate highly) can help get your name and work out there.
  • Make plans to attend a conference or event. While there’s a definite expense that comes with attending national conferences, there can be a huge networking upside, particularly if you are friendly and want to actively meet other people. It can be a bonus to go alone and take every opportunity to get out of your room and chat with others.
  • Web designers and developers, consider finding a WordCamp event to attend. These short conferences (often just a weekend) connect WordPress users for training and development. They happen all over the place and are relatively inexpensive to attend. Find one near you.

5. Join Design Conversations

remote freelancer

The best method of networking remotely might be to jump into design conversations everywhere.

Start with online forums or chats. (Twitter chats can be beneficial). Use hashtags to jumpstart creative conversations or jump into public conversations about design topics.

If you don’t find a niche that works for you, create your own. Start a Twitter chat and invite other creatives. Make sure to have a defined agenda and timeline so that these don’t drag on or get dry. (The easy formula for a Twitter chat is a defined topic with a hashtag, and use a moderator that poses questions to the group for answering.)

Finally, consider sharing your creative expertise by blogging. Engaging with other creatives by writing a tutorial, sharing information or observations about the field signals others that you are open to conversation. Invite readers to join a conversation in the comments to keep that engagement going.


Developing a professional network as a remote freelancer is something you have to build over time. You have to work at making meaningful connections and don’t feel bad about dropping out of groups if they don’t work for you.

But remember, online networking is a two-way street: to get real value out of it, you’ll have to give something back in return.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!