What’s new in the Angular 6

A quick updates summary of the new Angular 6 release.
It has many exciting feature updates and a huge performance boost!

The key updates are Angular Elements, Angular library, Service worker improvements, and many more.
I use Angular every day, so let’s just get started with the groundbreaking changes that can make our life easier.

Angular Elements

The super awesome feature that my team was waiting for, Angular Element is primarily designed to use the Angular Component as a Web Component. Which can be used on any HTML page (not just in the Angular app), isn’t it exciting…!
Just imagine that your ColdFusion teammate can also use your handmade Angular component in his application without having Angular ecosystem in-place. I am super excited to use it and it can be done easily with just a few efforts. Have a look at this post to know more about Angular Elements.

New Angular CLI commands

ng update

It’ll automatically update your @angular dependencies in the package.json file. It updates npm dependencies, it also updates your code if there are any breaking changes or deprecation found.
If you’ve planned to upgrade from Angular 4.x or 5.x to 6.x you’ll use it and see what it does.

ng add package-name

It will add a new capability to your project. It not only downloads and installs a new package to your project but along with that it also invokes an installation script which can update your code with configuration changes, add additional dependencies if required. It helps you to keep your packages up-to-date.

CLI Workspaces

CLI v6 now supports workspaces that simply means that you can have multiple projects or libraries in the same project configuration file. It’ll now use angular.json file instead of .angular-cli.json. It’ll be automatically renamed when you upgrade!
You can read more about CLI workspaces here.

Support for Library

It is a great feature that allows you to create and build your own library. The library is your custom npm package that you can use internally or publish it to npm.
Angular generator supports the library generation using the command ng g library your-awesome-library.
You must build the library in order to use it. Have a look at this link to know more about the Angular library.

Summary

Using Angular 6,

  • You will be able to use your Angular component in any HTML web application.
  • You will notice a significant performance improvement.
  • You will be able to create your own Angular library and publish it!

That’s not all, there are many other feature and performance improvements rolled out in the Angular 6 and I’m still exploring it.
Check this out to upgrade your project to Angular 6.
Personally, I’m super excited to use it because it is making things simpler than ever before.
Happy coding, stay awesome!

Things to keep in mind while designing a user interface

Identify the user

Your user’s goals are your goals, so try to act like your users. Learn about their skills and experience, and figure out their requirements. Find out what interfaces they like and watch how they use them. Do not try to add the features that your users are not aware of or help them in the completion of their tasks. So first know your user and it will help you to create the interface that will help them achieve their goals.

Follow the common design patterns (No need to reinvent the wheel)

Most of the users are aware of the widely used interfaces like Facebook, WhatsApp, LinkedIn, Twitter, Outlook, etc. and they spend more time using these interfaces other than your system. There is no need to re-orient the user with a newly invented interface, these widely used interfaces will solve some of your interface challenges. This will help the user to make them feel like this is something they already know.

Keep it simple and stupid (KISS)

The simple interface always avoids unnecessary elements and guide the user to proceed further. Whenever you think to add a new feature or new element to your interface, ask the question “Does the user really need this?”. Try not to add things just because you like or want them.

Keep it consistent and use common UI elements

Users always expect the consistency throughout the system. Once they learn to do something, they always expect to do that in a similar manner. Page layout, language, and elements need to be consistent. The consistent interface helps the user to understand how things will work.

Be purposeful in page layout

Careful placement of the items that can help draw attention to the most important information and help the user to scan and read the items that matter most.

Strategically use color and texture

Colors and textures can be used to direct the attention of the user. Choose the meaningful colors that represent the actual context and help the user to understand the things. Try not to use too many colors and do not use colors that are too bright or too dark.

Use typography to create hierarchy and clarity

Use the font face and font size that increase the scanability and readability. Try to keep the font face consistent throughout the system and use font size precisely according to its importance.

Make it error tolerant

No matter how clear and self-explanatory your design is, people will make mistakes and they will use the interface as per their knowledge and convenience. So design the interface in such a way that it can tolerate the user’s errors and help them solve the same. It should allow users to undo their actions. If the user does cause an error, use a meaningful message to teach them what was wrong, and ensure that the user knows how to prevent the error from occurring again.

Make sure that the system communicates what’s happening

Always inform users of location, actions, changes in state, or errors. The user shouldn’t be worried about what’s going on after they interact with the things, a good interface always keeps the user updated about what’s happening and how much time it will take to complete the things. It can reduce the frustration of the user.

Think about the defaults

Try to create the defaults whenever possible so that it can reduce the user’s efforts. Like in a form-design pre-filled some inputs so that user will not have to fill them.

Image manipulation using JavaScript

I got requirements from my team lead that we need to integrate a library which can provide image editing functionalities like adjusting brightness, contrast, saturation, sharpness and also allow the user to crop and rotate the image.

I searched for the same but unable to find the proper library that meets the mentioned requirements. After searching I found a couple of libraries that can provide some of the above-mentioned functionalities. CamanJS and glfx.js looked promising to me. I suggested my lead to go with one of them. He told that CamanJS was already implemented by one of the developers and he noticed that it takes more time to apply adjustments to the large images having a resolution above 2000×1440. So I skipped that one and decided to go with glfx.js.

I started implementation using glfx.js, it’s an open-source image effects library that uses WebGL for rendering canvas. It has fulfilled some of our requirements and I showed it to my lead. He said it’s fine but we also need operations like rotation and image cropping.

Then I came across a ready-made and easy to integrate tool named PhotoEditor SDK, it’s very handy tool for photo editing using canvas. It uses WebGL as a rendering engine. It has everything I need and mentioned in the requirements. So I started integration and within few hours, we have what we expected. It has plenty of image filters, adjustments, text adding functionality, stickers, and much more. It has nice tutorials and API documentation that can allow you to customize the tool as per your needs. The commercial license of PhotoEditor SDK is paid and it is closed-source, whereas glfx.js is an open-source and free library.

I recommend PhotoEditor SDK if you have any requirements like I had.

That’s all for today.