10 BASIC INTERVIEW QUESTIONS -- FLUID DESIGN AND VUE JS
10 BASIC INTERVIEW QUESTIONS -- FLUID DESIGN AND VUE JS
- What is Fluid Design
Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you’re using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen).
2. Difference Between Fixed And Fluid Layouts
Although most designers and developers would consider defining fixed and fluid website layouts to be elementary, we’ll go over it just to be clear.
FIXED WEBSITE LAYOUTS
A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.
FLUID WEBSITE LAYOUTS
In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.
3. FLUID LAYOUTS
A fluid layout is a type of webpage design in which layout of the page resizes as the window size is changed. This is accomplished by defining areas of the page using percentages instead of fixed pixel widths. Most webpage layouts include one, two, or three columns
4. What is Vue.js?
Vue.js lets you extend HTML with HTML attributes called directives
Vue.js directives offers functionality to HTML applications
Vue.js provides built-in directives and user defined directives
5. Vue.js Directives
Vue.js uses double braces {{ }} as place-holders for data.
Vue.js directives are HTML attributes with the prefix v-
Vue Example
In the example below, a new Vue object is created with new Vue().
The property el: binds the new Vue object to the HTML element with id="app".
6. Virtual DOM
VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember, etc. The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures. Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.
7. VueJS v/s React
Virtual DOM
Virtual DOM is a virtual representation of the DOM tree. With virtual DOM, a JavaScript object is created which is the same as the real DOM. Any time a change needs to be made to the DOM, a new JavaScript object is created and the changes are made. Later, both the JavaScript objects are compared and the final changes are updated in the real DOM.
VueJS and React both use virtual DOM, which makes it faster.
Template v/s JSX
VueJS uses html, js and css separately. It is very easy for a beginner to understand and adopt the VueJS style. The template based approach for VueJS is very easy.
React uses jsx approach. Everything is JavaScript for ReactJS. HTML and CSS are all part of JavaScript.
8. Data Binding
The data binding feature helps manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.
9. Vue-CLI
VueJS can be installed at the command line using the vue-cli command line interface. It helps to build and compile the project easily using vue-cli.
10. Advantage of using Vue JS.
advantages of using Vue. JS | the The Progressive JavaScript Framework small. The success of JavaScript framework depends on its size. ...
Easy to Understand. One of the reasons for the popularity of this framework is that it is quite easy to understand. ...
Simple Integration
Flexibility
Two-Way Communication
Great Tooling
Best of both worlds.