FLEXBOX VS BOX MODEL

FlexBox VS Box Model

Flexbox is entirely new collection of CSS properties that lets developers to generate flexible layouts with just few lines of code.

Flexbox reacts same as its name. Flexbox provides block level arrangement of parent and child elements that are flexible to adapt to display size. This is an exciting concept of developing complex block model which lack flexibility especially on large scaled application with orientation changes, resizing, stretching, shrinking. Indeed, lots of developers found Flexbox model easy to use.

The fundamental concept of flex layout is to provide ability to alter its items width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space or shrinks them to prevent overflow. Flexbox property is supported by all latest versions of modern browsers Google Chrome 29.0 +, IE 11, FF 28.0 +, Safari 6.1 & Opera 12.10.

“Flexbox child elements can be positioned in any specific direction and can have flexible dimensions to adjust to the display area. Positioning child elements is thus much easier, and complex layouts can be achieved more simply with cleaner code.“

Now designers can manipulate the direction, alignment, and spacing of page elements with display:flexbox method. Properties such as Display: flex, flex-direction, justify-content flex-grow, etc allows developers to make consistent height for flex items. There are many spacing choices for flex items within the flexbox, both horizontally and vertically.

Spotlight on Box Model:

CSS Box Model has important components that essentially wrap the content area in the so-called box. Box Model is made up of 4 distinct parts Content, Padding, Border and Margin that interact with each other to form a box and calculates space of a block-level element that it takes up. Below you can see a schematic view of the CSS Box Model.

Few important properties that you will need for the box model are display: box, box-align, box-pack, box-flex, box-ordinal-group, and box-orient. The CSS3 box-sizing property allows you to specify the box model with values content-box | border-box | inherit. You can specify a border/padding value in relation to a fluid length element with the ‘box-sizing’ property that is supported by all major browsers.

This box model is extremely effective when you have two equal columns. If you provide them 50% width each and add some padding and maybe a border, the columns won’t show up side by side. This is an ideal scenario where you can set box-sizing to border-box and happily set the width to 50% for both boxes.

Now let’s have a look at how they differ:

Flexbox

  • It is direction agnostic and is ideally suited for aligning its contents in ways that Web apps and complex Web pages often need. By using flexbox, we can control row widths, column widths and column re-ordering on the screen.
  • Most appropriate for the components of an application and small-scale layouts.
  • Flexbox is not supported in IE and Safari. They are available in newer versions of Firefox(18.0 -moz) and Opera(12.10) and Chrome (21.0 – webkit). For modern browsers you should get a long way using flexbox standard syntax with the “-webkit-” vendor prefix added in.
  • Elements in page behave predictably when accommodating different screen sizes and different display devices.
    Works well for responsive websites when combined with other technologies such as Media Queries.

Box model

    • It works well for pages by giving basic floating positions, it lacks support to application components that have to change orientation, resize, stretch, or  shrink as the user changes, flips from vertical to horizontal, and so forth.
    • It is intended for larger scale layouts.
    • All major browsers support it, except IE7. Currently, Firefox is the only browser that needs a vendor prefix, so make sure to also include the “-moz-” prefixed declaration.

As you can see, Flexbox has great potential to make our lives so much easier if we need to set up a layout for a website. The bottom line is that both flexbox and box model radically change the way we approach layout and build websites. The properties both of these have flip our CSS approach on its head and makes us consider layout from a logical perspective.

Stay on 1.3 or Move to NEW ANGULAR 2.0?

Stay on 1.3 or Move to New Angular 2.0?

AngularJS 1.3 is the best version of Angular as of yet, it introduced a lot of awesome features with substantial performance and speed improvements. But Angular was not the same as it is today. The framework changed in the meantime to keep up with the ever changing web, and developers started picking it up too and more complex applications started being created. It has undergone significant changes from version 1.3 to 2.0 to improve almost every single part of AngularJS. Angular 2.0 was officially announced at the ng-conference. This version is being rewritten from scratch to take advantage of new browser features and integrate lessons learned from Angular up to this point.

Angular 1.3
</button></div>
<div ng-controller=”SantaTodoController”>
<input type=”text” ng-model=”newTodoTitle”>
<button ng-click=”addTodo()”>+</button>
<tab-container>
<tab-pane title=”Tobias”>
<div ng-repeat=”todo in todosOf(‘tobias’)”>
<input type=”checkbox”>
ng-model=”todo.done”>
{{todo.title}}
<button ng-click=”deleteTodo(todo)”>
X

Angular 2.0
<div>
<input type=”text” [value]=”newTodoTitle”>
<button (click)=”addTodo()”>+</button>
<tab-container>
<tab-pane title=”Good kids”>
<div [ng-repeat|todo]=”todosOf(‘good’)”>
<input type=”checkbox”
[checked]=”todo.done”>
{{todo.title}}
<button (click)=”deleteTodo(todo)”>
X
</button>
</div>
<tab-pane> </tab-container> </div>

Let’s take a closer look at the above example. You no longer see ng-model and ng-click in Angular 2.0, rather it uses square bracket notation. Just like in JavaScript, Angular 2.0 will also use parentheses to invoke methods.

New things in Angular 2.0

a) AtScript

AtScript is a language that is a superset of ES6 and it’s being used to author Angular 2.0. It uses TypeScript’s type syntax to represent optional types which can be used to generate runtime type assertions, rather than compile-time checks. It also extends the language with metadata annotations.

b) Child Injectors

Angular 2.0 has other new things to offer like CHILD INJECTORS. As name suggests child injector will inherit services from parents and moreover it will also have the ability to change them. Woaahh!! Pretty Powerful child!

c) Dynamic Loading

One main issue with angular 1.3 was developers weren’t able to easily add new feature (controller or directive) on the fly. But in Angular 2.0 everything is designed from scratch with asynch.

d) Directives

In Angular 2.0 there are three types of directives:

Component Directive – Creates a custom component composed of a View and a Controller. You can use it as a custom HTML element. Also, the router can map routes to Components.

Decorator Directive – Decorates an existing HTML element with additional behavior. A classic example is ng-show.

Template Directive – Transforms HTML into a reusable template. The directive author can control when and how the template is instantiated and inserted into the DOM.
Examples include ng-if and ng-repeat.

As an Angular developer, Igor Minar made clear in ng-europe conference that ” It’s still early days and design is still evolving and changes can be seen in actual framework and we’re trying to consider all the options. Perhaps will come up with something new and amazing! “. Many developers are excited about the modern approach the Angular team is taking with 2.0, a few seem to be predicting high, and a few more are worried about what they should do.

Moreover, Angular team already announced that they will keep supporting and updating 1.3 for next few years and there will be migration path from Angular 1.3 to 2.0. Some of the people that are using AngularJS right now might say this upgrade that the framework is getting is a good thing, while some might say it’s a bad one. But how can you really judge a product that’s still in development phase? Things can completely change at any point of time, so it’s too early to make an opinion about it. We have to wait and see how things turn out to be in the end and then decide if the transition from AngularJS 1.3 to 2.0 is worth it.

Data Visualization and User Interface

Data Visualization and User Interface

One of the things that has come to prominence in the last few years is data visualization. These days there are many great tools for making excellent infographics. In fact there are new blogs on the topic almost every week. Gone are the days when people used to make simple charts with Paint, today infographics come with 3D text, exotic colors, maps, interactive features and superb artistry. Infographics has made data visualization a lot more fun. Even the most basic excel data can now be made visually exciting.

Tools in Market:

For a beginner who does not have much info on data visualization tools, google chart API offers many static charts that are supported on manybrowsers. These infographics are okay for the beginner who does not mind Google look and does not require individualization or a personal look. For those who want bar charts and line graphs one may want to look at Flot. However, because Flot is a jQuery library, you will need to be familiar with jQuery in order to manipulate the graphics.

There are many other great data visualization tools which can help people create graphs and charts. These include Raphael, D3, and Visual.ly. If you want interactive GUI controls, go for Crossfilter, Tangle, Modest Maps, Leaflet, Polymaps, Openlayers, CartoDB and Nodebox.For those who are already competent programmers and want something even more elegant than EXCEL for data visualization, go with R, Weka and Gephi.

These are just some of the newer data visualization tools available that require a different set of skills. The biggest mistake most people make when preparing data for visualization is choosing the wrong tool. Excel isn’t graphically flexible, but it is a good way to explore data. It is limited to default set of colours, lines and styles make it difficult to create graphics. One needs to learn the right skills to create superb data visualization. More important than learning how to draw, one must become versatile with the functional tools in each program so that they can maximize its use. For those who love interactive data visualization, use CSS, HTML and JavaScript/jQuery to create the interactivity. No matter what you select to make your data impressive, good visualization requires a lot of practice.

Cyberspace is a jungle and it is easy to get lost on how to improve data visualization. There are far too many tools and little guidance as to what to use and what not to use. Fly by night graphics companies charge exorbitant sums of money and most people are left with introductory seminars and programs and no one to turn to when the companies disappear.


Data Visualization under UI Radar:

The field of data visualization is expanding rapidly and for those who are interested in using a tool to amplify their data, it is important to know that there is no tool that will make you a PRO overnight. You must have a sense of creativity and analytical skill and if you have that, you can be a success with any tool. Too many people try to make enhanced visualizations but they lack knowledge of which graph to use. Buying the most expensive program for making data visualization does not make you great- if you have no creativity, then nothing will make your data appealing.

How to go about it?

If you know how to code, then its increases your potential to make data visualization to another level. Writing codes allows you to become versatile and add more complexities. You will be on another planet if you are a programmer. But do not get me wrong; not being a programmer does not mean that you cannot enhance data visualization. There are many graphics programs that are easy to learn even if you do not know the first thing about coding.

There are so many tools, take some time and learn what some of them can do and cannot do. Know what you want and then select the best tool. Use a tool that you feel comfortable with.

Once you become familiar with the tool, you can deal with all the complexities. If you learn how to use a tool to make data appealing, then you can get better insights.

Do not go to YouTube and use a tool that everyone is using. Use a tool that fits your need and see what it can do for you. You have to love the tool you use. If you do not like a tool, there is little chance of you becoming creative and your data visualization will WORSEN.

How to choose a correct tool?

Choosing the right data visualization tools will require the exercise of a sound judgment on whether it can address your data analytics needs. More advanced tools like Tableau, Qlikview, Custom View and myriad others have allowed users to create very interactive and imaginative ways to visually represent information. They all have promising features but you should be able to look for a tool that can provide you features like animation, personalization, dynamic data management, and multi-dimensional visualization that can adapt to the changing course of data influx to your business. These essential features from a data visualization tool can help you plot your data for better clarity and efficient data analysis.

Top benefits of data visualization with rich UI are.

  • Improved decision making
  • Better data analysis
  • Improved collaboration/Information saving
  • Provide self service capabilities to end users
  • Increased ROI
  • Time savings
  • Reduced burden on IT

7 Things Every UI Developer Should Have

7 Things Every UI Developer Should Have

To be a successful UI developer in today’s world there are a few things that every aspiring developer should probably take into consideration. From problem-solving skills to a efficiency in HTML and CSS, this article will explore the seven basic skills every UI developer either has or is working towards developing.

PROBLEM-SOLVING SKILLS

UI developers should have exceptional problem-solving skills. In the world of coding, programming and web design; UI developers see lots of things in the project that go wrong. It is important that UI developers hone their abilities to solve problems quickly and efficiently in order to solve any type of issue they may face. They should have analytical and logical thought process. When problems are bit more complex or require some work to solve, they should be able to comprehend requirements, analysis, understand and fix them in a short time duration. Solving problems can be amazing learning experiences and will make developers even better at whatever they do.

CODING AND APPLICATION DESIGN PROGRAMS

Every UI developer should have proficient or advanced knowledge in the following tools and technologies – HTML, Graphic design knowledge, CSS, javascript, Jquery, Adobe Photoshop, and CMS (like wordpress /Adobe CQ5). Again these are not all the programs a typical UI developer may know, but they would set you off to a great start. Aspiring UI developers who are not proficient in these programs should master these skills before thinking about moving forward. Typical UI duties on the job would require knowledge of these, as they are important for the overall look, feel, and behaviour of a product or a design.

COMMUNICATION

Communication skills may be just as important as problem-solving skills. It is very useful to avoid requirement mismatch or communication gap errors. If a UI developer is able to communicate through a wide range of mediums, orally, written, through animation, or through coding, whatever that medium may be its vital that aspiring UI developers know how to communicate effectively using it. As always communicating effectively is not just about being able to confidently express your ideas or issues about a certain product. It’s also about being completely receptive to criticism and feedback and using it as a tool of motivation to improve upon your skills and overall yourself.

RESEARCHING SKILLS

UI developers typically should have a solid set of researching skills in their back pockets. Researching and understanding users is something UI developers frequently do while working on a product or design. Creating an accessible application is not just the responsibility of developers. Rather, they need to keep an eye on new techniques, frame works, and tools to improve the application. They should be able to quickly experiment a new framework by creating a POC (Proof of concept) to see if such new framework/library fits their application. This helps UI developers focus on the key development issues to get the details of application improvement & scalability.

COLLABORATION

Collaboration skills are the next set that are crucially important for all those aspiring to be a great UI developer. At times UI designing can be incredibly challenging and is difficult, if they have no support. Collaborating with others, whether it be co-workers or other established UI designers at other companies, can be a significant help to UI developers to do the job better or faster than a lone worker. Collaborating with backend team or any other cross functional teams is turning out to be a key part of UI developer job duties. Improves project team morale, spirit and enthusiasm. Happy workers are more productive As developers collaborate, they get to know each other better, and they gain a better understanding of individual working style which saves time and energy. It also allows them to solve problems together, thus speeding the process of finishing a task.

HUMAN FACTOR & EYE FOR DESIGN.

This is a basic skill that every aspiring UI developer should have. There are many human factors that should be considered for the design of a successful user interface websites in terms of development factors, visibility factors and acceptance factors. Here is the list of things that must be taken into consideration: human abilities, clear conceptual model, navigation, page layout, typography, headings, links, text appearance, color and texture, images, animation, audio and video effects etc. By taking care of these characteristics, UI developers can effectively improve the performance of the website. Ease of information presentation by reducing number of clicks will effectively help increase the site productivity, while maintaining a consistent, appealing brand image.

PORTFOLIO

As a UI developer or designer, portfolio is an essential piece to show up actual samples of their work. It’s an opportunity to demonstrate a curated selection of their best pieces of work. If done right, UI-developers portfolio will give a huge advantage among rest of applicants. This allows employers and client’s know more about UI developers work ing standard and quality of their work. Overall, the portfolio should reflect UI developers professionalism and creativity to capture viewers attention.

These are the few findings that a UI developer should at least be aware of when programming user interfaces. Thus, creating a good User Interface is a preplanned, well-determined, usercentric and purposeful process which needs keen attention to place everything right. Many developers have seen tremendous benefit particularly in development time savings and reduced UI defects. This will help UI-developers to effectively set them off on the right path.

What’s the correct way to communicate between controllers in AngularJS?

What’s the correct way to communicate between controllers in AngularJS?

The two best ways to communicate between controllers in Angular JS are:
a) $broadcast
b) $emit

$emit, $broadcast and $on all these methods come under the common “publish/subscribe” design pattern.If an event is fired up the $scope, it is because of $scope.$emit. If an event is fired down the $scope, it is because of $scope.$broadcast. If we want to listen for these events, then we use $scope.$on.

We need not fire events on $rootScope, unless and until we need each and every single scope in the application to be notified about the event, So accordingly, $broadcast method is fired on our own scope only if it required for the children scopes. And if it is required for parent scopes, then $emit is fired on your own scope.

What is “use strict”;? what are the advantages and disadvantages to using it?

What is “use strict”;? what are the advantages and disadvantages to using it?

This statement indicates that the code should be executed in “strict mode”. It is only declared at the beginning of a function/script.Strict mode will help save developers from errors they didn’t even know that existed in their code.

Advantages:
i) It will catch common coding errors, which will throw exceptions.
ii) When vulnerable actions are performed, it throws errors.
iii) It will show,let us know and disable the features that are poorly coded.

Disadvantages:
i) It will not allow us to use the “with” statement. This statement will causes security and performance problems.

ii) It will not allow us to use the “arguments.caller” property, due to security concernsWe do not have an alternate to this property, but we can hard code an additional parameter.

How do you organize your code? (module pattern, classical inheritance?)

How do you organize your code? (module pattern, classical inheritance?)

Modular pattern imitates the classes in conventional software engineering and it mainly focuses on the public and private access to methods & variables. The module pattern goals are to reduce the use of globally scoped variables, so as to decreasing the chances of conflicting with other code throughout an application.

This is also regarded as the most commonly used design pattern and it is also widely accepted in a number of large projects such as jQuery, Dojo, ExtJS and YUI.

Advantages
• Organized and clean approach for developers
• We can encapsulate data.
• More clean code in the global namespace(avoiding conflicts).

Disadvantages
• We cannot access private methods
• We can extend Private methods and functions.

Classical Inheritance
The classical inheritance in a way is similar to the inheritancein Java or C. Those who have backgrounds in those programming languages must be familiar. So by using classical inheritance, we are recreating the basic programming language’s behavior i.e. using classes and objects, which are instances of those classes.

So a classical pattern is used together with the“prototype”keyword added to the constructor and the newoperator.
1. Call a constructor function.
2. Have a child’s prototype point to the parent’s prototype.

How is responsive design different from adaptive design?

How is responsive design different from adaptive design?

Responsive and Adaptive design are two different designs which are aimed at the optimization of the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, and so on.

The principle of flexibility is the sole basis for Responsive Design. The technique is to have a single fluid design based upon media queries, flexible grids. Responsive images also can be used to create a user experience that flexes and changes based on multiple factors. The main benefit is that each user will experience a consistent design. The onlydisadvantage is that, it has a slower load time.

Adaptive Design can also be termed as progressive enhancement. Instead of one flexible design, adaptive design will detect the device and other features, and then it will provide the appropriate layout based on a predefined set of viewport sizes and other characteristics. The disadvantage is thatit can result in a lack of consistency across platforms and devices, but the load time is faster.

How do you serve a page with content in multiple languages?

How do you serve a page with content in multiple languages?

To serve a page with content in multiple languages, there are four steps:

1.You must have translated/localized pages on the server for each language you intend to support.
2.Your server must recognize the browser’s language request.
3.You must carefully name the files for the localized pages, so the server has a systematic way of locating them.
4.You need a method for serving a generic page when you don’t have the requested language.

The browser writes a value for the Accept-Language request header field that it sends to the web server. You can set this value in Preferences (Mozilla) or Internet Options (Internet Explorer). If you choose multiple languages, they are sent to the server as a comma-delimited list in your preferred order.

Deciding which page to serve is called content negotiation. Tim Berners-Lee’s discussion of generic web pages and their language variants describes two different naming conventions, index.fr.html and index.html.fr. The Apache Web Server 2.0 compiles in content negotiation (the mod_negotiation module) by default. It postpends the two-letter language code to the URL and looks for files to serve. For example, if you set your browser preferred language to French and browse to http://www.openinternetlexicon.com, an Apache server would look for the file www.openinternetlexicon.com/index.html.fr.

Web servers do not normally handle multi-lingual requests automatically. The web server must have multiple language versions of a web page in order to serve them. It needs to know how the language-variant web pages are named. Besides naming them with a URI (index.fr.html), it may be possible to transmit the language variance as metadata in the HTTP header. This is the direction of the WebDAV protocol being developed by the IETF.