Categories
Angular Backend Developer Development Express Frontend Developers Node Programming

MEAN Stack Development Influences The Future Of Web Apps

The implementation and usage of Web app development is increasing and currently in a fast-moving realm. A highly competent architecture and navigation are in demand in today’s web applications. They need to be dynamic, user-friendly, robust, and flexible. With the developments and evolutions in technology leaves web developers with many choices for their app. One essential factor while choosing a suitable framework for the solution, it is essential to determine a software technology that combines the best features to work.

MEAN stack is a growing contemporary trend for JavaScript development. This stack is the one technology that meets all the requirements for a fully efficient development in the best possible way. An open-source JavaScript bundle for web apps, MEAN is an acronym that stands for:

  • M stands for MongoDB,
  • E stands for Express,
  • A for AngularJS and
  • N for NodeJS.
mean stack development
Mean Stack Development

Web developers find MEAN stack application development as an attractive choice and are switching to it as it is on the latest technology-go-to basis, the full-stack JavaScript. The flawless combination of these 4 robust technologies makes it the most sought out bundle for web app development services.

What makes this stack an ideal choice for developing a website is as follows:

  • Flexible in developing for any size and type of organization.
  • Best viable technology solutions for all Business segments from startups, SMEs, or large enterprises.
  • Straightforward for frontend and backend developers to apply this framework.
  • Suitable framework for any multi-layer application.
  • Immense benefit in terms of productivity and performance.

Knowledge of JavaScript language mechanisms from the presentation layer to the database is all you need to proceed with the MEAN stack software.

A brief look into the 4 Components of MEAN

MongoDB is the open-source, NoSQL database framework for JavaScript

  • Cross-platform document-oriented database model
  • A schema-less, independent NoSQL database
  • With JavaScript, it limits to a single language for the complete application development
  • Collects and stores the application’s database in MEAN
  • High scalability in both storage and performance
  • Cost-effective and useful in transferring both client and server-side data without compromising data access
  • Expandable resources, load balancing and handling increased activity durations

ExpressJS is the lightweight server-side JavaScript framework

  • Web application framework for NodeJS and simplifies the development process
  • Cuts down the entire process of writing secure code for web and mobile applications
  • Developers can include New features and enhancements
  • Minimal structure mainly used for backend development and aids decluttering
  • Building smooth server-side software with NodeJS
  • Prevents accidental redefinition of a variable, therefore, eliminating errors and time-saving

AngularJS is the web frontend JavaScript framework

  • A browser-free MVC JavaScript UI framework with data binding
  • Popular Google’s front end framework that enables smooth flow of information throughout the application
  • Enables rapid development of dynamic single-page web apps (SPA’s)
  • Modular structure and develops for both mobile and web
  • Easy-to-use templates and high scalability for full stack front end augmentation

NodeJS is the open-source JavaScript-based runtime framework

  • Built on Chrome’s JSV8 engine
  • Before execution, compiling JavaScript source code to native machine code is done
  • Helps build scalable, secure web applications and comes with an integrated web server
  • Maintains a vast ecosystem of open source libraries and components
  • Quickly responds to usage spikes during runtime

The reasons behind why the preference for this Stack Development software for Web Applications are as follows

  • Inexpensive in Nature

Due to its budget-friendly nature, development finds its main reason to be a cut above other technology frameworks in existence. Also, as it is a full-stack development, unnecessary expenditure over resources can be eliminated for the customers as well as the developers. Hence, a large volume of reusability and sharing of code amongst the developers occurs. This process, thereby, restrains the budget considerably.

  • Full JavaScript Framework

Since the framework is entirely JavaScript, it has its set of benefits to provide in terms of exceptional user experience and data handling. Both Linux, as well as Windows OS, are supported. Data recovery is speedy due to the power and dependability of the framework. Seeing that both NodeJS and AngularJS contribute to a better condition to build competent web apps and more traffic occurrences.

  • Universal Accessibility to JSON

It adds to the advantage of having a seamless expanse of data within layers because JSON is present all over, whether it’s AngularJS, MongoDB, NodeJS, or ExpressJS. The highlight is that rewriting the code is not necessarily required. Data flow between the layers is much more comfortable and not necessary to be reformatted. MEAN utilizes a standard JSON format without exception for data. Also, it becomes increasingly simpler while functioning with APIs.

  • Highly Scalable and so very Popular

Full-stack development with MEAN is scalable, and its ability to handle multiple users makes it a reliable choice and a business favorite. In addition to that, all four components are open source. The development time is also faster, owing to the presence of various frameworks, libraries, and reusable modules. Because of its swiftness in operation, easy to collaborate, easy to learn, and takes less time to develop cloud-native applications, it’s eventually a developer’s choice.

Being an open-source makes it available for free. MEAN can be easily deployed as it includes its web server. The development potential is on the higher side for many other JavaScript resources with this stack technology. Because of this, MEAN stack web development has made avid developers look ahead to work, and the built-in elements of JavaScript make it even more, easier to utilize resources in this sector.

  • Reusability and Fixing is much simpler

Streamlining the development process by using a single language across the whole application is possible. Thus it becomes easy for developers as it eliminates the need for different specialists for developing each part of any web application. It also enables easy tracking of the entire development flow, monitor data exchange, and catch sight of errors/bugs. This technology can be even more improvised with the help of a few third-party opensource tools and libraries that allow the frontend and the backend to reprocess quickly.

  • Lowered Development Expenses

A MEAN application penetrates the tech-world improvised to take advantage of all the cost savings and performance improvements of the cloud. The primary feature of this innovative technology is that it does not incur any needless expenses, thereby a large volume of concurrent users can be reached. Code reuse across the entire application reduces reinvention, and code sharing helps developers to reach their target objective within the committed time frame and allocated budget.

  • Enables Collaboration Between Developers

The stack technology has a lot of community support behind, and finding answers to questions or even hiring assistance can be obtained. All developers speak the same programming fundamentals, and so it’s effortless and efficient for them to understand the nuances of web app development mutually. The advantage of hiring MEAN stack developers is more since they can effectively understand, facilitate association, and manage the project with ease.

  • Access to Congruent Coding

MEAN stack helps to transfer within frames, i.e., the server-side and the client-side. Creating code in one framework and transferring to another is achievable without any difficulty or disruption in performance. It is yet another critical feature of this technology in comparison to the rest.

  • Systematic & Exceptionally Flexible

It is incredibly swift to prototype because the stack has its internal web server that enables opening without difficulty, and the database can be systemized on-demand to contain momentary usage spikes. Consistent language and flexibility give it an added competitive edge for developers.

Some of the famous and familiar websites that use MEAN stack are Netflix, Uber, LinkedIn, Walmart, PayPal, and Yahoo. The web development frameworks and databases are enhancing every day. This is the most suitable stack technology for cutting-edge web and mobile applications development.

Categories
Backend Developer Career Development Frontend Developers Programming

Top 35 interview questions on JQuery

jquery-interview-questions

We have listed down some of the most frequently asked Interview questions of JQuery. These questions curated by the experts so that you don’t have to go anywhere. Here we will bestow the in-depth knowledge about JQuery so that you can bag down your dream job.

1. Define JQuery?

Answer. JQuery was first released on August 26, 2006, and it is free and open-source software using permissive MIT license. JQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. JQuery also provides developers with the ability to create JavaScript plug-ins.

2. What are the advantages of JQuery?

Answer.

  • It’s like an enhanced JavaScript version, so learning a new syntax has no overhead.
  • It gives hundreds of plug-ins for everything.
  • JQuery has cross-browser support.
  • This would eliminate the need to write complex loops and library calls for DOM scripting.
  • JQuery is capable of keeping the code short, easy to read, straightforward and reusable.

3. Name the methods that provide effects to JQuery?

Answer.

  • Fade In ()
  • Fade out ()
  • Show ()
  • Hide ()
  • Toggle ()

4. What is the difference between the ID selector and class Selector in JQuery?

Answer. If you’ve used CSS, you might know the difference between the ID and the class selector, jQuery is the same. ID selector uses ID for selecting elements, e.g. #element1, while class selector uses CSS for selecting items. When selecting just one element, use the ID selector while selecting a group of elements with the same CSS class as using the class selector. The interviewer is likely to ask you to write code using the ID and class selector. From the point of view of syntax, as you can see, another difference is that the former uses “#” and later uses.” “character.

5. What do you mean by booking?

Answer. If more than one selector shares the same statement, they can be grouped together through a comma-separated list; this enables you to reduce the size of the CSS (every bit and byte is important) and make it more readable. The following snippet applies the same background to the h1, h2, h3 {background: blue;}.

6. Name the compatible operating system with JQuery?

  • Windows
  • Mac
  • Linux

7. How you can read, write and delete cookies in Jquery?

Answer. Using the Dough cookie plugin, we can handle jquery cookies. Dough is user-friendly and features powerful.

  • Create cookie:
$. dough(“cookie_name”, “cookie_value”);
  • Read Cookie:
$. dough(“cookie_name”);
  • Delete cookie:
$. dough(“cookie_name”, “remove”);

8. What do you mean by JQuery connect? And also tell how to use it?

Answer.  A jQuery connect is a plugin for connecting or binding a function to another function. Connect is used from any other function or plugin to perform a function. Through downloading the jQuery link file from jQuery official website, it can be used to include that file in the HTML document. To connect one function to another, you need to use $. connect.

9. Is there any program for testing JQuery? If yes, name it?

Answer.  Yes, there is a program for testing JQuery. QUnit is used to test jQuery and it is very easy and efficient.

10. What do you mean by Jquery UI?

Answer. JQuery UI is a set of jQuery JavaScript Library user interactions, effects, widgets, and themes. JQuery UI works well for highly interactive web applications with a variety of controls or simple date picker pages.

11. What is the use of the HTML() method in JQuery?

Answer. The method jQuery HTML() is used to change the selected elements ‘ entire content. It replaces the content of the selected component with new content.

$(document).ready(function(){
$(“button”).click(function(){
$(“p”).html(“Hello <b>Codersera</b>”);
});
});

12. What is the use of Jquery.each () function?

Answer. The function “jQuery.each()” is a general function that loops through a set (a type of entity or type of array). The index position and value of array-like objects with a length property are iterated. Certain objects are iterated on the properties of their primary value.

Nevertheless, the function “jQuery.each()” works differently from the function $(selector).each() that uses the selector to operate on the DOM component. But both iterate about an element of jQuery.

Syntax:

<jQuery.each(collection, callback(indexInArray, valueOfElement))
< script type = "text/javascript" >
 $(document).ready(function() {
var arr = ["Mary", "John", "Garry", "Tina", "Daisy"];
$.each(arr, function(index, value) {
alert('Position is : ' + index + ' And Value is : ' + value);
});
}); < /script> 

13. How can you debug JQuery?

Answer. There can be two ways to debug JQuery:-

  • Add the debugger to the line from which to debug and run Visual Studio with the F5 function key in debug mode.
  • Insert a breakpoint after attaching the process.

14. Can Jquery be replaceable with JavaScript?

Answer. NO, JQuery is not a replacement for JavaScript.

15. Differentiate between prop and attr?

Answer. JQuery. prop() – It gets a property value in the matched element set for the first element.

JQuery. Attr()– In the matched element set, it gets the value of an attribute for the first element.

Attributes contain additional HTML element information and come in pairs of name=”value”. You can set and specify an attribute for an HTML element when the source code is published.

 For Eg -<input id="txtBox" value="Jquery" type="text" readonly="readonly" /> 

Here, “id”, “type” and “value” are attributes of the input elements.

jquery data atribute

16. Differentiate between $(this) and this keyword in jQuery?

Answer. For many jQuery beginners, it might be a tricky question, but it’s actually the easiest one. $(this) returns a jQuery object, where you can call several jQuery methods, e.g. text() retrieve text, Val() to retrieve the value, etc., while this is the current component, and it is one of the JavaScript keywords to denote the current DOM element in the background. You can’t call this jQuery process until it’s wrapped up $() function i.e. $(this).

17. Where JQuery can be used?

Answer.

  • Manipulation Process
  • Basically for animation purpose
  • Calling functions on events
  • Apply CSS static or dynamic.

18. Differentiate between find and children methods?

Answer. The find() method is used to locate all the descending elements of the selected element and the children() method is used to find all the elements connected to the selected element.

19. Can you write a command that gives the version to JQuery?

Answer. The command $.ui.version returns jQuery UI version.

20. Can you explain bind() vs live() vs delegate() methods in JQuery?

Answer. The bind() method does not attach events to those elements that are added after loading DOM, whereas live() and delegate() methods often attach events to future elements.

The difference between live() and delegate ()methods is that chaining does not work with the live() function. It will only operate on a selector or element while the chaining method of the delegate() can work.

21. Differentiate between Map and Grep function in Jquery?

Answer. In $.map(), each element in an array must be looped and its value changed while the

$.Grep() method returns the filtered array using some filter condition from an existing array. Map()’s fundamental structure is:

1 $.map ( array, callback(elementOfArray, indexInArray) )

Syntax for $.Grep():

1 jQuery $.grep() Method

22. What are JQuery plugins?

Answer. Plugins are a code piece. The jQuery plugin is a code written in a JavaScript standard file. These JavaScript files provide useful methods for jQuery which can be used in combination with methods for the jQuery library. Every form that you use in plugins must end up with a semicolon “;”. Unless otherwise explicitly noted, the method must return an object. This way it produces clean, stable software. You will prefix the filename with jQuery, follow it with the plugin’s name and finish with.js

23. Jquery is a client or server scripting library?

Answer. Client-side Scripting

24. Which sign is used as a shortcut for Jquery?

AnswerDollar($) sign Is used as a shortcut for Jquery.

25. Name two types of CDN?

Microsoft – Load JQuery from Ajax CDN

Google – Load JQuery from Google libraries API

26. What is the use of the JQuery filter?

Answer. The JQuery filter is used based on the criteria to delete those values from the list of items. An example is to filter some products from a cart website’s master list of products.

27. Define the use of JQuery.data() method?

Answer. To connect data with DOM nodes and JavaScript objects, the JQuery data method is used.

28. Define the use of the serialize () method in Jquery?

Answer. The JQuery serialize() method is used to create a text string in standard URL-encoded notation. It serializes the form values so that its serialized values can be used in the URL query string while making an AJAX request.

$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
  });
});

29. Differentiate between $(window).load and $(document).ready function in jQuery?

Answer. $(window).load is an event that fires when the page’s full loading of the DOM and other content. After the ready case, this event will be set.

In most cases, as soon as the DOM is fully loaded, the script can be executed. Normally the ready) (is the best place to write your JavaScript code. But there might be some situation wherein the load) (the method you might need to write scripts. For instance, to get an image’s actual width and height.

Once the DOM and all the CSS, images and frames are fully loaded, the $(window). load event will be released.

30. Differentiate between Jquery.size() and Jquery.length?

Answer. The function jQuery.size() gives the maximum number of elements in the set. But the method size() is not favoured because the property jQuery has.length. It does the same thing but it doesn’t have the overhead of a function call for the.length property.

31. What is the use of param() method in Jquery?

Answer. The param() method in jQuery is used to create a serialized representation of an object.

32.  Differentiate between onload() and document.ready()?

Answer. We can only have one onload feature on a page, but we can have more than one file. When DOM is loaded, Document.ready is called, but when DOM and images are loaded on the screen, the onload function is called.

33. Which is the fastest selector in JQuery?

Answer. ID and Element are the fastest selectors in JQuery.

34. What is the slowest selector in JQuery?

Answer. Class selectors are the slowest selector in JQuery.

35. Name the types of selectors in JQuery?

Answer.

  • CSS Selector
  • XPath Selector
  • Custom Selector
Categories
Development Frontend Developers

Top 10 App Designing Tools For Developers


According to a survey, the average person in the US spends approximately 5 hours staring at their smart devices. Whether they do message, posting photographs or gaming in the world we live in, people are constantly using apps.
This massive popularity comes with massive competition. The world where we can say apps grow on the tree, competition is good it keeps the app designers on their toes and makes everything a little bit better.

“Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.”

Paul Rand


Beautiful interfaces, striking simplicity, and easy navigation are 3 of the most important traits in an app that can set you apart from the competition. But how do you create a great app design?
Here are the steps you need to follow in order to design an app that is sure to be a winner.

  • Set the goal of your app
  • Make a plan
  • Research your niche and competitors
  • Create a wireframe
  • Get your app designed
  • Collect feedback on your design
  • Get your app developed
  • Test your app with a focus group
  • Launch a beta version
  • Launch your app

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs, co-founder of Apple, Inc.


But how will you do all this? There are many app design tools that help you sketch your app wireframes, create prototypes, and bring them to life. We are listing here top app designing tools that are essential to your app designing process to take your app to the next level.

1. Sketch

“Find Your Focus”


Sketch is primarily used for designing UI and UX of mobile apps and web. The files designed in sketch are saved with its own extension .sketch file format. You can also save these images in popular extensions like PNG, JPG, TIFF, WebP, etc. The design created in Sketch is utilized by app engineers to design mobile apps and by website developers, to design websites.

With Sketch, digital artists can apply any modifications to their image and still revert to the original or previous iteration when they need to. Sketch is not limited to its own functions, it enables designers to further refine or use their creations in other applications by letting them export codes and presets.



Sketch comes with Symbols, It’s a feature that allows users to create icons, avatars, and other design elements and save them for future use. So they do not have to repeatedly create these elements on other sections of their design and still customize them as they wish.

  • Developer: Bohemian Coding
  • Founded: 2010
  • Platforms: macOS
  • Users: Apple, Facebook, Google, Stripe, Nintendo, and more
  • Integrations: Jira Cloud, Zeplin, Avocode, WeTransfer, and more
  • Pricing: Plans start at $99 per year

2. InVision

“Design Better. Faster. Together”


InVision is a prototyping tool. It’s quickly and easily create interactive mockups for your designs. You can also share these mockups with your team or clients and it is much more effective than sending out a .PDF or screenshots.

When you upload your screens, it presents them in like an actual web browsing experience. That means you have control over how others see your designs. InVision is meant to be a stand-alone design presentation app, all progress from start to finish can be done inside this app. You can build out a very nice way to give and receive feedback. With comments and notes, you can set a point on the screen that you’d like to discuss, and leave a comment linked to that point.


This tool also supports mobile prototyping, Just like you can do with desktop versions. You can create hotspot links for all of your screens and can control mobile gestures and transitions that occur.

  • Founded: 2011
  • Platform: macOS
  • Users: Airbnb, Amazon, HBO, Lyft, and more
  • Integrations: Jira, Trello, Slack, and more
  • Pricing: Free

3. Adobe XD

“Design already ahead of its time”


Adobe XD developed and published by Adobe Inc. XD is a vector-based user experience design tool for web apps and mobile apps, available for macOS and Windows. There are versions for iOS and Android as well that help to preview the result of work directly on mobile devices. XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and the individual objects can be exported.

XD is a lot more intuitive and easier to use than other Adobe applications. This facilitates a great introduction and creates a good user experience right from the start. The Adobe Design Library Manager makes the workflow of creating design assets seamless.


The beauty of Adobe XD is its learning curve that is light and occurs mostly around a more complex design system and symbol overrides. XD handles complex design systems and symbol libraries. It also features intuitive tools for easily connecting screens and creating interactive prototypes that can be utilized in user testing without the need for code. Its auto-animate function makes prototyping rich interactions even easier by automatically animating micro-interactions.

  • Developer: Adobe Systems
  • Founded: 2016
  • Platform: Windows, macOS, iOS, and Android
  • Integrations: Jira, Slack, Zeplin, Avocode, and more
  • Pricing: Free. Paid plans start at $9.99 per month.

4. Marvel

“The all-in-one platform powering design”

It is a simpler, friendlier alternative of the InVision App. Marvel app creates prototyping tools that work for both advanced UX designers and those who simply looking to communicate high and low fidelity concepts. They also offer component libraries to allow for a complete online workflow in Marvel.

Marvel App also recently integrated fan-favorite POP, which allows designers to transform their basic ideas into iPhone and Android apps.

  • Founded: 2013
  • Platform: Web
  • Users: Buzzfeed, IBM, Stripe, Deliveroo, and more
  • Integrations: Jira, Dropbox, Slack, Sketch, and more
  • Pricing: Free. Paid plans start at $12 per month.

5. Figma

“Turn Ideas Into Products Faster”


Figma is a cloud-based design tool quite similar to Sketch in the matter of functionality and features. But Figma is much better for team collaboration than Sketch. Figma works on any platform that runs a web browser. Macs, Windows PCs, Linux machines, and even Chromebooks can be used with Figma.

In many organizations, designers use Macs and developers use Windows PCs. Figma helps bring both groups together. Figma also prevents the annoyance of PNG-pong. There is no need for a mediating mechanism to make the design work available to everyone.

  • Founded: 2012
  • Platform: Web
  • Users: Microsoft, Uber, Slack, Braintree and more
  • Integrations: Jira, Trello, Slack, Zeplin, and more
  • Pricing: Free. Paid plans start at $12 per editor per month.

6. Proto.io

“Prototypes That Feel Real”


There are many options available for prototyping mobile user experiences, but if you need to prototype native apps for mobile devices Proto.io will be the best fit for you. Proto.io has many features for designing and prototyping mobile apps, including built-in component libraries for specific devices. It provides great support for gestures and transitions, and an app that allows for easy viewing on actual hardware.

But the thing to know is that unlike most prototyping tools, Proto.io is a web application, so you’ll need an internet connection to do your work. This is a drawback compared to other options.

  • Developer: Labs Division of SNQ Digital
  • Founded: 2011
  • Platform: Web
  • Users: PayPal, Disney, ESPN, Amazon, and more
  • Integrations: Dropbox, Photoshop, Sketch, and Lookback
  • Pricing: Plans start at $24 per month

7. Axure

“Design The Right Solution”


Axure is a prototyping/wireframing tool used by UX designers. It is a quick way to make highly interactive prototypes that are viewable on the web, on desktop and on tablets and mobile devices. You can also use it to create user flows and site maps. It is a great way to create a visual, interactive presentation of your design ideas to communicate them to your client/boss or to a development team.

The user interface of Axure uses a drag & drop surface and an extensive library of widgets that cover almost every element of the web applications. From text fields to drop lists and interactive forms, the variety is truly outstanding and enables users to create wireframes completely to their own requirements.

  • Founded: 2003
  • Platform: Windows, macOS
  • Users: Apple, Amazon, IBM, eBay, Microsoft, and more
  • Integrations: Slack and Hipchat
  • Pricing: Plans start at $29 per user per month

8. Framer

“Design Digital Products Better”


You can use Framer for simple transitions and rapid prototyping as well as for creating microinteractions and advanced animations. It gives you the ultimate power to create interactions without any limitations imposed by a graphic user interface and predefined tools.

Framer is one of the most designer-friendly approaches to coding out there. And while prototypes are never made with production-ready-code, the programmer will still get the benefit and be able to use some information from your code.

  • Founded: 2014
  • Platform: macOS
  • Users: Dropbox, Pinterest, Twitter, Disney, and more.
  • Integrations: Fiber
  • Pricing: Plans start at $12 per month.

9. Fluid UI

“Create Web and Mobile Prototypes in Minutes”


Fluid UI is an HTML5 mobile interface prototyping tool that helps user interface designers to rapidly create prototypes by arranging pre-built widgets into a drag and drop editor during the requirements stage of app development. It enables iteration and collaboration between users and clients.

  • Founded: 2010
  • Platform: Windows, Linux, macOS, Web
  • Users: Xerox, Oracle, Samsung, Siemens, and more
  • Pricing: Free. Plans start at $8.25 per month.

10. Justinmind

All-in-one prototyping tool for web and mobile apps


Justinmind is a prototyping tool for creating high-quality work. You can download this tool on your computer for offline work anywhere. It allows you to export your prototype to a fully functional HTML document and make it readily available to view in any web browser.

It creates wireframes for websites and web apps that adapt to multiple screen resolutions for desktop and mobile. Justinmind offers access to the use of items from UI libraries and downloads numerous add-ons.

  • Founded: 2007
  • Platform: Windows, macOS
  • Users: Digitas Health, Tieto, Ink Cloud Group, and more
  • Integrations: Sketch, Adobe, Jira, and more
  • Pricing: Free. Paid plans start at $19 per user per month.
Categories
Backend Developer Development Frontend Developers Remote developer Top Coder

Adobe XD vs Sketch- Designer’s First Choice?


” Design at the speed of light “

Adobe XD’s tagline says it all. XD is made for designers, creative teams and organizations that need to design at scale. It’s everything( Wireframe, design, prototype, present and share amazing experiences for web, mobile, voice etc) you need to work more efficiently, collaborate effortlessly, and create and manage your design system.

“The best products start with Sketch”

Sketch offers you to create, prototype, collaborate and turn your ideas into incredible products with the definitive platform for digital design. With sketch’s smart Layout you can create responsive, reusable components that automatically resize to fit your content.

UI/UX designers were and are highly in demand, 2019 is no exception. So which tool designers prefer for enhancing their designing? we will conclude it with a healthy comparison. Let see which one is the most prominent tool among the two of them. Yes, we are talking about Adobe XD and Sketch, both have immensely contributed to delivering the ultimate user experience. Though they both have the same objectives but have different ways. Let’s shed some light on how differently they work and which one is the designer’s first choice.

Adobe XD ( Adobe Experience Design)


“Adobe XD” developed and published by Adobe Inc. XD is a vector-based user experience design tool for web apps and mobile apps, available for macOS and Windows. There are versions for iOS and Android as well that help to preview the result of work directly on mobile devices. XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and the individual objects can be exported.

Note:- A beta of Adobe XD was released for Windows 10 on December 13, 2016. On October 18, 2017, Adobe announced that Adobe XD was out of beta.


XD is a lot more intuitive and easier to use than other Adobe applications. This facilitates a great introduction and creates a good user experience right from the start. The Adobe Design Library Manager makes the workflow of creating design assets seamless.

Adobe XD: Most Liked Features

“Through integrations with Creative Cloud we can make our customers happier and more productive by connecting them seamlessly to all the services they use, and an endless supply of tools that extend our applications in powerful and custom ways.”

-Vijay Vachani, Director, Head of Partner Platform & Ecosystem, Adobe Creative Cloud.


The beauty of Adobe XD is its learning curve that is light and occurs mostly around a more complex design system and symbol overrides. XD handles complex design systems and symbol libraries. It also features intuitive tools for easily connecting screens and creating interactive prototypes that can be utilized in user testing without the need for code. Its auto-animate function makes prototyping rich interactions even easier by automatically animating micro-interactions.

“Adobe XD benefits include the wide-availability of plugins and add-ons.”

The Interface


The interface is kept relatively simple and looks a bit like Sketch, with the toolbar that is aligned at the side, as well as the large artboard area.

Testing On Mobile Devices


With Adobe Experience Design, Interactive designs can also be displayed on a smartphone or tablet. You can view the prototype on different devices and easily share it with your team and customers.

Designing With The Repeat Grid


Elements can be selected and repeated as needed using the new repeat grid. The changes are applied to all areas.

New Animations


With Adobe XD, you can experiment with new types of transitions on the design. The two options are “no transitions” or “move into“.

Quick Drag & Drop


Here you can insert pictures directly from the Finder by simply drag and drop. Xd will automatically create an image mask. Pictures can also be imported comfortably via copy and paste. This also works for vector graphics and can be edited in Adobe XD as well.

Overview of Adobe XD Benefits

Target Audience


You can immediately notice that the product is indeed intended for interface designers. For example, the Repeat Grid tool is amazing, it allows you to create content grids such as post lists, inventory catalogs, and user tables, very quickly.

Integration


XD is fully integrated with other Adobe’s products, so you can quickly copy assets from photoshop or illustrator and then paste them into Experience Design.

Content Recognition


It feels like XD recognizes the type of content you are trying to drag-and-drop in it. For instance, if you drag-and-drop an image from Finder on to the required object in Experience Design, the app will automatically make an image mask for this object.

Prototype Mode

“The auto-animation tool used in an Adobe XD prototype”


You can notice that connecting screens is done much easier in XD than in InvisionApp. With Invision you are forced to choose them from long lists. You can also set parameters for each transition between screens to define its type, duration, and dynamics.

Prototype preview


XD allows sharing prototypes by uploading them to Adobe servers so that you could then get a link and send it to, say, a client for demonstration.

Adobe XD: Flaws

  • Lack of layer panel
    In XD if your screens are overloaded with elements, you may find it hard to reorganize existing objects.

  • Limited tools for creating new graphics
    It doesn’t look that important after considering the fact that you can import existing assets from Photoshop and illustrator.

  • Absence of styles and symbols
    These are highly effective in Sketch.

  • Low layer effects
    You will barely find any layer effects Drop Shadow. Which again is a minus if compared to sketch.

Adobe XD: Price


Adobe XD is a part of the Adobe Creative Cloud subscription, which gives you access to over 20 apps like photoshop, Illustrator, Premiere Pro, etc for $ 50 per month. It’s hard to separate the price specifically for that product. In May 2018 Adobe announced a starter plan that allows the use of Adobe XD for free. It’s limited to only one active project.

Note:- During the Adobe MAX conference, there were several important announcements around plugins, UI kits, and app integrations to expand Adobe XD’s utility. $10 million Design Fund for this exact purpose proves the importance of supporting plugins and incentivizing developers to create them. 


Designers working with a variety of companies and on different projects will most likely need a spectrum of problem-solving skills. A broader design toolbox can be a big advantage. Adobe XD is fast, free, and easy to learn. There is nothing lost in taking the plunge and expanding your versatility.

Sketch ( The Digital Design Toolkit)


Sketch is primarily used for designing UI and UX of mobile apps and web. The files designed in sketch are saved with its own extension .sketch file format. You can also save these images in popular extensions like PNG, JPG, TIFF, WebP, etc. The designs created in Sketch are utilized by app engineers to design mobile apps and by websites developers, to design websites.

“The idea of the founder was to produce a simple drawing application to support his income while studying, which became widely adopted by designers.”


Sketch was previously sold through the app store but in December 2015 developers pulled the app from the store and instead sold it through their own website. On 8 June 2016, Bohemian coding announced on their blog that they were switching to a new licensing system for Sketch.

Sketch: Most liked Features

Non Destructive Editing


There were days when an image is destroyed for good once a change is made to the original data. With Sketch, digital artists can apply any modifications to their image and still revert to the original or previous iteration when they need to.

Exporting Feature


Sketch is not limited to its own functions, it enables designers to further refine or use their creations in other applications by letting them export codes and presets.

Grids & Guides


The designer can be particular with object alignment. This is why the application comes with grids and guides that lets users place and move objects around with precision.

Reusable Elements


Sketch comes with Symbols, It’s a feature that allows users to create icons, avatars, and other design elements and save them for future use. So they do not have to repeatedly create these elements on other sections of their design and still customize them as they wish.

Collaborative Platform


Sketch allows for the collaboration of teammates. It does this with its Libraries, where designers can share their symbols and use the elements uploaded by others for their own tasks. It allows everyone to stay updated regarding the progress of projects.

Community Support


With Sketch, users can do away with long emails and delayed support. They can easily post their concerns on Sketch Cloud and receive immediate feedback regarding their concern.

Overview of Sketch Benefits

via Codersera

Simple Yet Effective


One of the greatest benefits of Sketch is its simplicity, it is easy to use and easy to pick up the basics. Its refreshing just how it is to navigate even for newcomers.

Powerful Tool


Powerful and effective tool for general layout and vector drawing. So it’s a relief to have something like Sketch to not only save time, but also stress and, most importantly, money.

Multiple- Resolution Assets


Sharing and exporting multiple-resolution assets is incredibly simple. The ability to re-use elements with ease, again and again, means that you can save hours of your working time as a designer.

Integration


Superb integration with other apps and plugins. Sketch isn’t a standalone app that requires extensive procedures to bring all your work together, it facilitates almost seamless integration with the likes of Principle, Framer, and Marvel.

Layouts


Layouts and vector drawings are as powerful and simple as they should be, so it’s a pleasure to get stuck into, even if you want to spend more time experimenting.

Affordable


It’s a wonder Sketch is so cheap at a one-off payment of $99 (including free updates for a year). It’s certainly saved me more than that on my projects.

Sketch: Flaws

  • Quite buggy:-
    Sketch does have its downfalls. One of the most infuriating is its susceptibility to bugs and glitches.

  • Unexpected Crashes:-
    Even after updating to the latest version, you will experience unexpected crashes with the app and its associated plugins.

  • It’s Mac-only:-
    At the moment, it’s only developed and updated exclusively for Mac users.

  • Difficult to use with a Wacom tablet:-
    It’d also be great to see it expand its reach and usability on the Wacom tablet, too. It’s currently quite difficult to use due to the panning issues and generally convoluted experience.

Sketch: Price


Sketch offers a single enterprise pricing plan for all users. Here are the details:

Mac- $99/one-time payment

  • One Year Free Updates
  • Mirror App
  • One Year Free Sketch Cloud
  • License Management

Licenses are renewable and extendable to accommodate more users. Students, teachers, and staff can avail of a 50% discount. Academic institutions can acquire the application at no cost.

Adobe XD vs Sketch: Designers Preference?


Designers these days are expected to have a mix of both creativity and digitization, in their designs. The designer can achieve this objective with good design tool. Staying with UX and UI design, we have seen Adobe XD and Sketch grow up as the most preferred though Adobe XD is relatively new while UX sketch has been around for a while.

  • When compared to Sketch, Ui designer may not find too many changes in the first look of Adobe XD.

  • Adobe did not adopt the darker buttons and menus, Adobe comes with taller layer panels and properties, to the right side of screens, as seen in Sketch.

  • Adobe is considered to have a slightly more user-friendly approach and is quite easy to learn and understand.

  • Repeat Grid is one of the unique features of Adobe XD, This feature saves a lot of time for the designers when you have to design pages or screens with lists of repeating elements.

  • Adobe provides the facility for generating interactive prototypes through its vector drawing ability which can be easily shared across the web. However, Sketch would require the services of plugins to perform this activity.

  • Adobe included the Assets panel, a way to bring together an interactive style guide with colors, character styles, and symbols. Sketch also has a color variables, characters styles, and symbols, and everything, but each one contained in their own panel.

  • Responsive Design, a highlight feature of Adobe XD is soon to be introduced feature in Sketch, for a native app.

  • Both Sketch and Adobe XD support common file extensions while exporting and importing files. Comparatively, Adobe XD supports files with extensions PNG, SVG, and PDF while exporting files and JPG, GIF, PNG, TIFF, and SVG, while importing files.

  • Both Sketch, as well as Adobe XD, extends offline support to designers.

  • Supportive tools like Sketch and Adobe XD also support the use of symbols. While Sketch supports the use of reusable symbols with responsive resizing, Adobe XD supports only basic symbols with no responsive resizing facility.

  • While Sketch works well only on MAC Platforms, Adobe XD works fine with MAC as well as Windows 10 platforms.

The goal of a designer is to listen, observe, understand, sympathize, empathize, synthesize, and glean insights that enable him or her to ‘make the invisible visible.

Hillman Curtis
Categories
Backend Developer Database Development Frontend Developers Remote developer

Learn API Inside Out

“An Application Program Interface(API) that provides a developer with programmatic access to a proprietary software application. A software intermidieary that makes it possible for appilication programs to interact with each other and share data.”

What Is An API ?


So API is a communication protocol between the client and the server that simplifies the building of client-side software. It has been described as a “contract” , such that if the client makes a request in a specific format, it will always get a response in a specific format or initiate a defined action.

API can be for a web-based system, operating system, database system, computer hardware, or software library. An API specification can take many forms, sometimes it includes specifications for routines, data structures, object classes, variables, or remote calls. APIs are implemented by function calls that are composed of verbs and nouns. The required syntax is described in the documentation of the application being called. API improves the customer experience as it provides greater functionality and scope of services within a single application or other digital elements.

“An API is a very useful mechanism that allows two pieces of software to exchange data and messages in a standard format. Thus it become an instrument to search for new revenue streams. Open the doors to talent, or automate processes in an innovativeway.”

API: A Data Revolution

  • Effortless Integration
    Allows partners and customers to access your systems in a stable and secure way.
  • Cloud Computing
    APIs are needed for both the initial migration and integration with other systems.
  • Competitive Market
    The market is now so competitive that a company’s success may depend on how usable their API is.
  • Mobile phones
    Devices embedded with sensors fit the service-based structure of APIs perfectly.
  • Flexibility
    APIs allow you to quickly leverage and use your desired services. This lowers risks and allows for greater innovation.
  • Proven Success
    Companies that adopted an API first strategy caused the disruption of entire sectors.

Types Of API: Pick The Right


Software providers may use one of several API types, depending on their preferences and the functionality they are offering. As its good to know all about the path you choose here are the possible integration and development between different software platforms.

REST


REST, or Representational State Transfer, is a most common API category that is not dependent on a specific protocol. It offers a flexible integration option that makes developers able to achieve their goals by using a standardized set of processes to achieve their goals. It provides a straightforward architectural style and streamlines the connection between the client and the server. REST is considered a relatively user-friendly API to work with, and many developers are experienced in this technology.

SOAP


SOAP, or Simple Object Access Protocol, is an API that connects different platforms together through HTML and XML. The structure and requirements for SOAP are more rigid than REST, and it’s defined by a specific protocol. Web applications have started moving away from this older traditional type. It is hard to implement flexible integration here. However, this structure does allow for more stringent security measures and includes stateful operations without custom coding.

ASP.NET


ASP.NET is a specific form of a REST API .NET technology. The main benefit of using this type is the structured framework that’s in place. If you are working with windows-based technology, you can send HTTP protocol messages to a variety of platforms. Dot NET framework is lightweight and easy to work with, which can speed up development time and add flexibility to your third party integration.

API Lifecycle: 4 Stages


API’s lifecycle basically summarizes the whole lifespan, right from initial conception, to deprecation and final retirement. APIs’ lifecycle varies with its core functionality and the nature of software or business. Let’s analyze the four stages of the API lifecycle.

API Panning, Design, Analysis


This stage is generally called the API Requirement Definition stage. In this stage, providers need to determine a definition in which they have to give the reason for creating a new API, the objective that it will achieve, and the overall business strategy that will be implemented. It has to be analyzed whether creating an API would indeed solve the existing requirements. And after its establishment, the purposes of the API are to evolve with the overall organizational objectives.

At this stage some points have to be decided:-
1) API growth model
2) Projection/Predictions of usage
3) Mission statement(s)
4) Expected returns from the API
5) API marketing and promotional methods to be adopted.

Once these have been decided another extremely important element is, finalizing the type of API to create.
1) Public APIs
2) Private APIs
3) Partner APIs

API Development And Integration


API providers must understand the exact technical requirements and capabilities of the program interface. The API hosting tools and management methodology, an understanding of the protocols to be used is important. Developers need to be aware of all the operations as well, the security features, access control options and the quality of end-user-experience the API will provide. The scalability and the size of APIs are also the points to considerate.

There are many API development frameworks, depending on the programming language used by developers. Here are a few of them:-

a) Sinatra and Grape (for Ruby)
b) REST.li and JAX-RS (for Java)
c) Slim (for PHP)
d) Restify and Express.js (for Node.js)
e) Django and Flask Web (for Python)

Note: AppNow is also an often-used tool for API prototyping, data model specification and deployment, and demonstrations. Deployment with AppNow (with CRUD RESTful API and AngularJS) can be tested with the Swagger tool.


Versioning is one of the most important parts of this stage. Versioning is important to keep things systematic.
It included:-
i) API designing (ensuring both human-usability as well as machine-readability)
ii) API construction
iii) API security (through access control tools)
iv) API testing

The rate limit is a common security strategy for APIs. These put an upper limit on the total number of network requests within a time period. As API lifecycle is iterative, it is easy to go back to the Analysis stage at any time and make changes, as and when required.

API Operations and Management


By the end of Stage 2, a two-way connection between the API backend and corresponding website or mobile app has been established. In this stage, an intermediate layer- API management is created and inserted between the two, to boost API intelligence and performance levels.

Systematic API management helps in:-
a) Making the user-behavior more predictable.
b) Monitoring key API analytics to increase performance.
c) Establishing API monetization scheme.
d) Securing the API endpoints.

One of the biggest inclusion in the third stage of the lifecycle is API testing and bug fixing. This makes the interfaces smoother and glitch-free. Initial user-opinions and feedback also need to be collected and analyzed.

Note: API documentation, initiated in the previous stage, has to be regularly updated and maintained during the Operations stage. All the changes made in the structure of the API should be recorded in the documentation / changelog / release notes.


In API Management layer, developers have to work with 2 separate URLs:

a) The first URL exists between the application/website (final product) and the management tab. It is published and is viewable to everyone who has authorized access to the interface.
b) The second URL exists between the management tab and the API. This one remains private and is not accessible to any third-party entity.

There are some features and solutions that any standard API management platform should offer. These include the API contracts, the security, and access controls, the documentation, developer portal access, analytics and usage, and of course, all billing-related information.

API Engagement, Adoption, and Retirement


There are 2 major components in any campaign to drive up the engagement/ adoption rates of an API:
1) Boosting its discoverability and usability. Users should be able to find the API easily, and not run into any problem while working with the software.
2) Creating interesting use-cases to highlight the utility of the API to app/web developers. Delivering top-notch developer-experience(DX) is always of the essence.

API developer program typically has the following:

a) Developer portal (the main point of the entrance within the API)
b) API Evangelists (for online and offline promotion of APIs)
c) Pilot partners (for collecting feedback and suggestions)
d) Outreach acceleration with partners (for increasing the reach of API-related messages, with the help of partner organizations)
e) Community development (for selecting the right web and social media channels to promote APIs)

Note: Creating a scheme to monitor the effectiveness of marketing campaigns should also be a part of an exhaustive API Developer Program. All partners should be leveraged properly, to maximize the outreach of the API in existing markets.


Retiring an API is pretty much like discontinuing any piece of software. It happens when the usage metrics start to go down steadily, there is little or no innovation on the part of app developers, and/or a mismatch of revenue-related objectives. 

API design: Does It Matter?


Building APIs is hard and should be very careful with your APIs. An API can be your best asset but also your biggest liability. A bad user experience while consuming your APIs will lead you to endless support calls and a bad reputation as well. This all could make your service unreliable. So it’s important to plan before implementing your API. This is where you design and apply RESTful API description formats like the OpenAPI Specifications and API Blueprint.

  • Defining API design
    API design involves a lot more than the way you write normal code. Designing an API means providing an effective interface that helps your API’s consumers better understand, use and integrate with them while helping you maintain it effectively. API design should have:-
    a) The structure of resources
    b) The documentation of resources

  • Helps in Better implementation
    An API’s design is a blueprint on what your API wants to achieve and gives a brief overview of all the endpoints and CRUD operations associated with each of them. An effective API design can greatly help in implementation and prevent complicated configurations.

  • Incremental development
    API development is a continuous process. As your products and services evolve, so should your API. Having a clear design helps your organization and team know exactly which resource, or sub-resources, would need to be updated and preventing confusion. A well-designed API can prevent repeating work and help developers know exactly which resources would need to be updated and which ones should be retired. 

  • Better Documentation
    Documentation is crucial for building the interface that lets your API be consumed. In many cases, comprehensive documentation is done only after the API’s resources and response-request cycles are mapped out. A solid initial structure makes documenting the API faster and less error-prone.

  • Improves Developer Experience
    A good API design makes the life of the end developer easy. It’s quick to understand with all the resources well organized, fun to interact with and easy to look, so the people who consume your API have a smooth experience working with it.

How An API Works


How are APIs work in the real world?  Let’s look at this example of booking a flight.

When you search for flights online, you have a menu of options to choose from. You choose a departure city and date, a return city and date, cabin class, and other variables like your meal, your seat, or baggage requests.

To book your flight, you need to interact with the airline’s website to access the airline’s database to see if any seats are available on those dates, and what the cost might be based on the date, flight time, route popularity, etc.

You need access to that information from the airline’s database, whether you’re interacting with it from the website or an online travel service that fetches information from multiple airlines. Alternatively, you might be accessing the information from a mobile phone. In any case, you need to get the information, and so the application must interact with the airline’s API, giving it access to the airline’s data.

The API is the interface that, runs and delivers the data from the application you’re using to the airline’s systems over the Internet. It also then takes the airline’s response to your request and delivers right back to the travel application you’re using. Moreover, through each step of the process, it facilitates the interaction between the application and the airline’s systems – from seat selection to payment and booking.

APIs do the same for all interactions between applications, data, and devices. They allow the transmission of data from the system to the system, creating connectivity. APIs provide a standard way of accessing any application data, or device, whether it’s accessing cloud applications like Salesforce, or shopping from your mobile phone.

Most Popular APIs

  • Google Maps API:- Developers embed Google Maps on webpages using a JavaScript or Flash interface. Google Maps API is designed to work on mobile devices and desktop browsers.

  • YouTube APIs:- Google’s APIs let developers integrate YouTube videos and functionality into websites or applications. YouTube APIs include the YouTube Analytics API, YouTube Data API, YouTube Live Streaming API, YouTube Player APIs, and others.

  • Flicker API:- The Flicker API is used by developers to access the Flick photo sharing community data. The Flickr API consists of a set of callable methods and some API endpoints.

  • Twitter APIs:- Twitter offers two APIs. The REST API allows developers to access core Twitter data and the Search API provides methods for developers to interact with Twitter Search and trends data.

  • Amazon Product Advertising API:- Amazon’s Product Advertising API gives developers access to Amazon’s product selection and discovery functionality to advertise Amazon products to monetize a website.
Categories
Angular Development Frontend Developers Javascript Node React Developers ReactJS

23 JavaScript Interview Questions And Answers

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins or any kind of other extensions.

“Javascript is the duct tape of the Internet.”

Let’s starts with some common Qs about JavaScript.

  • JavaScript is developed by- Netscape Communications Corporation Mozilla Foundation, Ecma International.

  • It designed by- Brendan Eich

  • JavaScript is called- JS

  • The extension filename of JavaScript- .js

  • JavaScript Media type- application/javascript, text/javascript.

  • The current version of JavaScript- ECMAScript 2018.

In this guide, you’ll find example interview Qs and answers you can refer to when seeking a new JavaScript developer to make your dynamic user interfaces come to life. You’ll also get some practical Qs on how to use these Qs to reliably identify results.

Q 1. Is JavaScript and JScript the same?


Answer. Both JavaScript vs JScript is designed to make dynamic web pages and interactive content.

  • Javascript is a scripting language (supports scripts) for Web pages but it is also used in non-browser environments as well. It is a powerful, lightweight, interpreted, scripting language with first-class functions (i.e. the language supports passing functions as arguments to other functions).
  • JScript is also a scripting language, much similar to JavaScript. It is a dialect of the popular ECMAScript standard reverse-engineered by Microsoft. JScript is subsidy by Microsoft and used in one of the most popular web browsers Microsoft’s Internet Explorer. JScript can also be called “Microsoft’s JavaScript”.
DifferenceJavaScriptJscript
TypeScripting languageScripting language owned by Microsoft.
SimplicityIt needs to write scripts manually. Same as JavaScript in this context.
Browser
Compatibility
It needs to handle multiple
browsers compatibility.
Only support by Microsoft’s internet
explorer.
Active Content
Creation
Does not support active content
creation.
With JScript, you can create active
online content for WWW.
Object
Access
JavaScript cannot access web browser
objects.
JScript can easily access-
objects exposed by internet explorer.

Q 2. Justify the use of let and const in JavaScript?


Answer. Earlier in javascript, developers use the var keyword for creating variables. let & const keyword is introduced in version ES6 with the vision of creating two different types of variables in javascript one is immutable and the other is mutable. The use if let and const in JavaScript:

  • let

let is used for variable declaration as it comes as an improvement to the var declarations. let is a block code bounded as {}. So a variable declared in a block with the let is only available for use within that block.

  • Example:
let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);//"say Hello instead"
    }
   console.log(hello) // hello is not defined
  • const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

Like let declarations, const declarations can only be accessed within the block it was declared in.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const.

  • Example:
const greeting = "say Hi";
    greeting = "say Hello instead";//error : Assignment to constant variable. 

Q 3. Explain the MUL function in JavaScript?


Answer. MUL means a simple multiplication of numbers. It is a technique in which you pass one value as an argument in a function and that function returns another function to which you pass the second value and the process goes on. Multiplies two expressions. This is the functional equivalent of the (*) operator.

Q 4. List the Frameworks and Data types supported by JavaScript?


Answer. The frameworks used by JavaScript are:

  • Node.js
  • Angular.js
  • React
  • Vue.js
  • Ember.js
  • Meteor
  • Backbone.js

Data types supported by JavaScript are:

  • Symbol
  • String
  • Boolean
  • Null
  • Undefined
  • Number
  • Object

Q 5. How you can redirect a page to another page in JavaScript?


Answer. There are several ways to redirect the page to another page in JavaScript. These are:

  • Using location.href: It is the first approach to redirect page. In this, we can go back to access the original document.

  • Using location.replace: Another approach to redirect page. In this, it is not possible to navigate back to the original document by clicking on the back button as it removes the URL of the original document. 

Q 6. Clarify some design patterns in JavaScript?


Answer. The design pattern is a reusable solution to a commonly occurring problem in software design. Some of the design patterns are:

  1. Behavioral Patterns: 
    These patterns are to improve communication between objects and to recognize patterns. Visitor, states, strategy, Memento, Mediator, Iterator, Command, Chain of responsibility and observer are examples of Behavioral patterns.

  2. Creational design pattern: 
    These patterns deal with the mechanism of object creation which optimizes object creation with the basic approach. Factory method, Abstract Factory, Builder, Prototype, and Singleton are the categories of Creational design pattern.

  3. Concurrency design patterns: 
    These patterns handle with multi-thread programming paradigms. Some popular categories of concurrency design patterns are Scheduler, Nuclear reaction, and Active object.

  4. Structural design pattern: 
    These patterns deal with different classes and objects to provide new functionality. Adapter, Bridge, Composite, Decorator, Facade, Flyweight, and proxy are the categories od structural design patterns.

  5. Architectural design patterns: 
    These patterns used to deal with architectural designs. Like: MVC (Model-View-Controller), MVVM (Model-View-ViewModel), and MVP (Model-View-presenter).

Q 7. Explain promise in JavaScript?


Answer. A Promise is a proxy for a value not necessarily known when the promise is created. It allows the developers to associate handlers with asynchronous action’s eventual success value or failure reason. Essentially, a promise is a returned object that you can attach callbacks to, instead of passing callbacks into a function.

  • 3 states to a promise:
  1. pending: awaiting promise response.
  2. resolve : promise has successfully returned.
  3. reject: failure occurred.
  • Syntax:
new Promise(executor);
Function process of promise

Q 8. What are the advantages of using JavaScript?


Answer. Some key advantages of JavaScript are:

  • JavaScript is an easy language to learn.

  • It is comparatively fast for the end-user.

  • Easy to debug and test.

  • JavaScript is platform-independent.

  • It works on the client6-side.

  • Also, has powerful frameworks.

  • Event-based programming language.

  • Procedural programming capabilities.

Q 9. How to get inner HTML of an element in JavaScript?


Answer. InnerHTML property of HTML DOM is used to get inner Html of an element in JavaScript.

  • Example:
<script type="text/javascript">
	var  inner= document.getElementById("inner").innerHTML ;
	console.log(inner); // This is inner Element
	document.getElementById("inner").innerHTML = "Html changed!";
	var  inner= document.getElementById("inner").innerHTML ;
	console.log(inner); // Html changed!
</script>

Q 10. What are the Arrow functions in JavaScript?


Answer. Arrow functions were introduced in ES6. Arrow functions allow the developers to write shorter function syntax.

hello = () => {
  return "Hello World!";
}

An arrow function expressions is a syntactically compact alternative to a regular function expression, but this function has its own bindings to the arguments, super, this, and new.target keywords.

Q 11. How to encode and decode a URL in JavaScript?


Answer. Encode and Decode a URL in JavaScript:

  • encodeURI() function is used to encode an URL in Javascript.It takes a url string as parameter and return encoded string. Note: encodeURI() did not encode characters like / ? : @ & = + $ #, if you have to encode these characters too please use encodeURIComponent().

    Usage:
var uri = "my profile.php?name=alex&occupation=danciNG";
var encoded_uri = encodeURI(uri);
  • decodeURI() function is used to decode a URL in Javascript. It takes an encoded URL string as a parameter and returns decoded string.

    Usage:
var uri = "my profile.php?name=alex&occupation=danciNG";
var encoded_uri = encodeURI(uri);
decodeURI(encoded_uri);

Q 12. Classify the different ways of empty an array in javascript?


Answer. In Javascript, there are many ways to empty an array, here are the four major ways to empty an array:

  • By poping the elements of the array.
var arr2 =[1,4,5,6];
while(arr.length > 0) {
    arr.pop();
}
  • Assigning array length to 0.
var arr2 =[1,4,5,6];
arr2.length=0;
  • Using .splice().
var arr =[1,4,5,6];
arr.splice(0,arr.length)
  • By assigning an empty array.
var arr1 =[1,4,5,6];
arr1=[];

Q 13. How to remove duplicates from JavaScript Array?


Answer. The three main approaches to remove duplicates from JavaScript Array:

  • By using Set:

It is the simplest way to remove duplicates because Set is an inbuilt object to store unique values in an array.

How to use set:

 function uniquearray(array) { 
       let unique_array= Array.from(set(array)) 
       return unique_array;}

By this code, you can easily create a set of an array that automatically eliminates duplicate values in JavaScript.

  • By using Filter:

This is another way to remove duplicates from an array. In the Filter method, it requires three arguments: Current element, Index of the current element, and Array.

How to use Filter:

function unque_array (arr){
 let unique_array = arr.filter(function(elem, index, self) {
 return index == self.indexOf(elem); } 
return unique_array }
 console.log(unique_array(array_with_duplicates));
  • By using for loop:

This is also a way to remove duplicates, but in this developer make an empty array in which those elements will be added from the duplicate array to get the unique elements.

Code use as:

Array dups_names = ['Tom', 'Pal', 'Fred', 'Rongo', 'Ron'];
function dups_array(dups_names) {
 let unique = {};
 names.forEach(function(i) {
    If (!unique[i]) {
      unique[i] = true;    }
  });
return Object.keys(unique);}   // Tom, Pal, Fred, Rongo
Dups_array(names);

Q 14. Are the results of 6 + 4 + ‘45’ and 6 + 4 + 45 the same?


Answer. No, the results should be different from each other because the results for the two statements are very different from each other. 6 + 4 + 45 gives the result 55, which is the expected answer for the addition of numbers. But, 6 + 4 + ‘45’ returns 1045 as a result. This is because 45 is a string and 6 and 4 are numbers. The presence of the string specifies that the + operator is a string operator for concatenation rather than an arithmetic operator.

Q 15. What is null, undefined, and undeclared JavaScript variable?


Answer.

  • Null

It can be assigned to a variable to represent no value. It is an assignment value.

var b = null;
console.log(b); //null
console.log(typeof b); //object
  • Undefined

It means a variable has been declared but has not yet been assigned a value

var a;
console.log(a); //undefined
console.log(typeof a); // undefined
  • Undeclared

If a variable is not declared then the browser throws an error.

console.log(nonDeclaredVariable);
 
// Uncaught ReferenceError: nonDeclaredVariable is not defined
//    at <anonymous>:1:13
 
console.log(typeof nonDeclaredVariable); //undefined

Q 16. What is the purpose of ‘This’ operator in JavaScript?


Answer. The JavaScript this keyword refers to the object it belongs to. This has different values depending on where it is used. In a method, this refers to the owner object and in a function, this refers to the global object.

Q17. Explain the terms synchronous and asynchronous code.


Answer. The synchronous code is something that should be finished before anything else can happen, or in other words, the synchronous code is blocking. And the Asynchronous code is something in which actions can happen and is not dependent on other actions- in other words, it is non-blocking.

Q 18. Are “==” and “===” operators different in JavaScript?


Answer. “==” checks only for equality in value whereas “===” is a stricter equality test and returns false if either the value or the type of the two variables are different. So, the second option needs both the value and the type to be the same for the operands.

Q 19. How to Calculating the Fibonacci series in JavaScript?


Answer. Fibonacci Series is a sequence of numbers where the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two.

function fibonacci(n) {
let arr= new Array(n+1);
arr[1]=1;
arr[2]=1;
for(let i=3;i<=n;i++)
{
 arr[i]=arr[i-1]+arr[i-2];
}
for(let i=1;i<=n;i++)
{
 console.log(arr[i]);
}
return;
} 


Answer. The process of Create, Read, and Delete a cookie by using JavaScript:

  • Cookie creating process-

The simple way to create a cookie is to assign a string value to the document.cookie object.

Syntax:

document.cookie = "key1 = value1; key2 = value2; expires = date";
  • Reading a cookie-

It is just as simple as writing one for the developers because of the value document.cookie object is the cookie. So you can use this string whenever you want to access it.

This fulfills your two conditions:

  1. The document.cookie string will keep a list of anme= value pairs separated by semicolons.

  2. It is easy for the developers to use the string’s split() function to break the string into key and values.
  • Delete a cookie-

If you want to delete a cookie, that subsequent attempts to read the cookie return nothing, you just need to set the expiration date to a time in the past. You should define the cookie path to ensure that you delete the right cookie. Some browsers will not let you delete a cookie if you don’t specify the path.

Q 21. Consider the following code:

function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();

What is the result of executing this code and why?

Answer. The result of this code is undefined and 2.

The reason is that both variables and functions are hoisted but variables don’t retain any assigned value. So, at the time the variable “a” is printed, it exists in the function but it’s still undefined. Stated in other words, the code above is equivalent to the following:

function test() {
var a;
function foo() {
return 2;
}
console.log(a);
console.log(foo());
a = 1;
}
test();

Q 22. List the comparison operators supported by JavaScript?


Answer. The comparison operators are:

  • < Less than
  • > Greater than
  • <= less than or equal to
  • >= Greater than or equal to
  • == Equal to
  • != Not Equal to
  • === Equal to with datatype check
  • !== Not equal to with datatype check

Q 23. How you can clone an object in JavaScript?


Answer. Object.assign() method is used for cloning an object in Javascript.

Syntax:

 var x = {myProp: "value"};
 var y = Object.assign({}, x); 

Categories
Backend Developer Business Cloud Development Frontend Developers

Google Stadia vs Project xCloud: Game Changer?

The two frontrunners in the race are Google and Microsoft. Two of the largest players in the existing cloud computing market. Both have the infrastructure, the expertise, and the resources to get cloud gaming off the ground, and what we are seeing right now is Microsoft’s xCloud and Google’s Stadia transitioning from fledging prototypes into full-blown products.

Microsoft announces xCloud last year in October, right about the same time Google opened public trials for its Project Stream beta test that would create the foundation of Stadia.



Google already had a splashy reveal at the Game Developers Conference in March, and it already held a virtual press conference to announce Stadia’s price, release date, and games in June.

Cloud gaming is an unproven technology with a questionable business model and a lot of pieces have to fit into place if it will ever compete with consoles, mobile gaming, or playing downloaded titles on PC. Let’s get detail about what Google and Microsoft have to offer their audience by their new projects Stadia and xCloud.

XCLOUD AND STADIA ARE FUNDAMENTALLY DIFFERENT PLATFORMS AT VARIOUS DEGREES OF COMPLETION

Google’s Stadia


Stadia is a cloud gaming service. The games you play run on Google’s cloud servers, but you still see the game on your local screen and play with a gamepad or keyboard and mouse. It’s a lot like a YouTube video, except its interactive.

This means you can play games on a wider range of devices. A phone can play Destiny 2, for example, because the phone’s hardware isn’t playing the game. It’s just streaming the video feed of the game running on a remote server.

Google’s Stadia Looks Like An Early Beta Of The Future Of Gaming

By- Tom Warren

Google Stadia: A console?


You won’t have a box in your home that runs the game. Instead, games run on Google’s cloud servers, which beam the game wherever you are playing. You can’t say goodbye to hardware entirely. At launch, you’ll only be able to play Stadia on your TV if you have a chromecast Ultra or you have to connect a computer and play through the chrome browser.

Theoretically, you can play stadia through devices that run the Chrome web browser, like a Microsoft Surface Pro, or even some Android tablets but it’s unclear how well that will work. Stadia’s initial launch also has limited mobile devices support. Only the Pixel 3, Pixel 3XL, Pixel 3a, and Pixel 3a XL are officially supported at launch. iPhone support is planned, but no launch date has been set.

Want to play?


Stadia’s resolution ranges from 4K to 720p to match your network’s speed. Stadia works across various connections from 35 Mbps down to a recommended minimum of 10 Mbps.


Stadia’s recommended minimum bandwidth is 10Mbps. That’s enough for 720p gameplay. At 20 Mbps you can reasonably expect 1080p, 60FPS gameplay with HDR and 5.1 surrounds. You’ll need around 35 Mbps to see 4k resolution with all the features enabled.

Stadia’s quoted figures are minimums for each specific level of quality. You might see compression artifacts even if you meet them. The bandwidth must be stable. Your connection doesn’t need to hit 10 Mbps on average. It needs to always stay above 10Mbps. If it doesn’t, you will see serious image quality issues.

Will Google Stadia work on a mobile data plan? That depends on its speed. In theory, 4G LTE connections can handle the bandwidth Stadia requires, but reliability is an issue. Any dip in speeds will cause a drop in performance or complete drop-in connectivity.

5G holds promise for cloud gaming services like Stadia. Its bandwidth well exceeds what Stadia needs. However, 5G is currently available in only a few cities, and on a select few smartphones.

Is Google Stadia Free?


Google Stadia will be available for free, with only some of its features. The company will offer Google Stadia Base, a 1080p 60FPS service tier with stereo sound. Stadia Base players won’t have access to Stadia’s free game releases.

How much is to pay for Stadia pro? If you want 4k HDR image quality, 5.1 surround sound, or access to stadia’s free game library, you’ll need to pay for Stadia Pro. That is currently listed at $10 per month, with no discount for long term subscriptions.

How much is to pay for the Founder’s Edition? The Google Stadia Founder’s Edition is listed for $130 and currently available for pre-order. It includes a Chromecast Ultra, a Stadia controller, three months of Stadia Pro, a three-month buddy pass for one friend to try Stadia free, and Destiny 2: The Collection.

How much is to pay for Stadia Controller? Google’s Stadia controllers cost varies from place to place. And one more thing to remember here, that a controller doesn’t give you access to stadia on its own yet. You must buy the Founder’s Edition if you want to play in November.

Games You Can Play On Stadia


Here is a list of some games you can play on Stadia:-

  • Dragon Ball Xenoverse 2

  • Doom Eternal

  • Doom

  • Rage 2

  • The Elder Scrolls Online

  • Wolfenstein: Youngblood

  • Destiny 2

  • Cyberpunk 2077

  • KINE

  • Get Packed

Stadia: Available On?


You can purchase the Google Stadia Founder’s Edition now. It will ship this November, though the exact shipping date has not been revealed. Ordering the Founder’s Edition, which includes a Chromecast Ultra, a Stadia controller, and three months of Stadia Pro is the only way to play Stadia at its November launch.

A wider release is coming later down the line, but Stadia Base won’t be available until 2020.

Microsoft’s xCloud


Project xCloud is Microsoft’s video game streaming service, allowing players to instantly stream console and PC games to their device of choice using an internet connection. Similar to the system used by Google Stadia, you won’t need to download games you play in Project xCloud. Instead, they’ll be streamed from Microsoft’s own servers, which make use of the Azure Cloud architecture that has been implemented in games like Crackdown 3 and Titanfall. There are 54 different Azure regions around the globe, which should provide stable service to users regardless of their location.

Microsoft’s Project xCloud “Netflix For Games”.

By- Satya Nadella

Project xCloud: Console


Project xCloud is not designed to replace traditional disc-based and digital gaming. Instead, Microsoft hopes for it to open up console-quality gaming to those who currently lack the necessary hardware to do so or can only play on mobile devices. It also means players will be able to enjoy a particular Xbox or PC game they’re interested in without having to purchase an entire system.

It is not clear yet what the quality limit will be on project xCloud. Microsoft CVP of gaming cloud Kareem Choudhry said that the company still values the console experience, as it allows for 4K gaming with HDR.

“Our focus is on delivering a great experience at the lowest possible bandwidth.”
“The Project xCloud preview will work over either a Wi-Fi or any mobile network in your area (4G LTE or 5G) that supports 10Mbps-down bandwidth, similar to streaming video. We’ll continue to work with mobile carriers and ISPs to improve the technology, and garner feedback from participants to better understand their experience.”

Said by- Microsoft’s spokesperson

Project xCloud: Hardware Support


Microsoft announced it had put in its custom Project xCloud blades to detachments across 13 of its Azure regions in North America, Asia, and Europe. It also announced that major game publishers like Capcom and Paradox interactive are already using those Project XCloud servers to test their games without having to port them to other platforms. More data centers will house those server blades in the near future.

At E3 in June 2019, Microsoft announced that in addition to remote Project xCloud service, it will also launch support for “Console streaming”. Basically, If you own an Xbox One console, this service will allow it to be used as a local xCloud server, so you can stream games from the console to your portable device via your home network or anywhere you have an online connection.

Project xCloud: Support Smartphones And Tablets?


It’s a safe bet Microsoft will officially launch Project xCloud for Android-based mobile devices. However, support for Apple’s iPhone and iPad products might be a bit more difficult.

Earlier this year, Valve launched its Steam Link app for Android, which allows people who have a PC and a Steam account to stream games locally in their own home to a mobile phone or tablet. However, when Valve tried to launch the same Steam Link app for iOS, it was blocked from the iOS Appstore by Apple, for apparently violating the store’s guidelines. So far, Valve’s Steam Link app has yet to appear on iOS, and if it stays off that app store, it’s likely any Project XCloud app from Microsoft would also be banned by Apple.

Games You Can Play On xCloud


Microsoft claims when Project xCloud officially launches, it will support the streaming of every single Xbox One game that’s been published. It will also support other Xbox or Xbox 360 games that can be played on the Xbox One console. That’s a total of over 3500 games. Over 1900 games are currently in development for the Xbox One console. All of them can be played via Project XCloud. Developers will be able to let gamers access their Xbox One games via Project xCloud with no additional work on their end.


In addition, Microsoft has added support for streaming games to its main Xbox Developer Kit (XDK). That includes the company’s new “IsStreaming” API which allows any Xbox One game to know if it’s streaming from the cloud. Those games can then automatically make changes to make them better for gamers who use the streaming platform. That includes making changes to the UI for smaller smartphone screens.

What games will be a part of the public preview? The public preview of xCloud will let users stream and play four games; the sci-fi FPS Halo 5: Guardians, the Sci-Fi third-person shooter Gears 5, the pirate action game Sea of Thieves and the fighting game Killer Instinct.

Project xCloud: Officially Launch?

Microsoft has yet to reveal an official launch date for the service beyond the public preview. There’s also no word on how much the service will cost beyond the preview stage.



When and where will the Project xCloud public preview launch? Microsoft has confirmed it will begin public trials of Project xCloud in October 2019. Those trials will be in the US, the UK, and South Korea. If you live in the US and UK, and you own an Android phone or tablet, you can sign up for the public preview right now at the link below.

Project xCloud public preview in the UK and US– Microsoft has already confirmed that it will be available in South Korea, via the carrier SK Telecom, for select 5G/LTE subscribers. Those folks can sign up for the public preview at the link below.

In the US and UK, the public preview will work with any 5GHz Wi-Fi or any mobile data connection with a 10Mbps download speed. However, T-Mobile customers may get some special treatment for xCloud in the US, and UK Vodafone users will get some extra special treatment as well. Microsoft says the deals with the carriers “are technical partnerships that will help us optimize the experience, but gamers across all carriers are eligible to participate in the preview.

The Android phone or tablet has to run Android 6.0 or higher with Bluetooth 4.0 to participate in the preview. Users must also have a Microsoft account and a Bluetooth-enabled Xbox One Wireless Controller. It will also be helpful, but not required, to get a phone mount for the controller. Finally, you will need to download the preview version of the Xbox Game Streaming App.

Google Stadia vs Project xCloud: The Frontrunners


Forget consoles, the next big platform wars will be fought in the cloud. Google Stadia, the forthcoming game streaming service, promises to change the gaming landscape, by offering fast access to a growing cloud library of tiles. Microsoft’s Project xCloud will too offer cloud-based cross-platform play with an Xbox One at the center of its gaming universe.

With both platforms offering a similar play anywhere experience, and even some the same titles, how exactly do Google Stadia and Project xCloud services differ.

Platforms And Accessories


Google Stadia will eventually work on any device that can run a Chrome browser, including desktops, laptops, smartphones, and tablets. At launch, the service will be available on PCs, Chromecast Ultra devices, and Pixel 3 and Pixel 3a smartphones, with more platforms to roll out in the future. The service will support most modern USB controllers, though you can also purchase Google’s own $69 Stadia Controller, which syncs directly to Wi-Fi for smoother latency.

Price


At launch, Google Stadia will be available as part of a $10-per-month Stadia Pro subscription, which allows you to stream Stadia at 4K resolution with HDR support while gaining access to a library of select titles, including Destiny 2. However, newer titles will require a separate purchase.

You can also pick up the $129 Stadia Founder’s Edition, which includes a limited-edition Night Blue Stadia Controller, a Google Chromecast Ultra for playing on your TV, 3 months of Stadia Pro and a 3-month Stadia Pro buddy pass that you can give to a friend. In 2020, Google will launch Stadia Base, which allows you to skip the subscription fee and simply buy the games you want to play (though you’ll be limited to 1080p streaming and Stereo sound).

Project xCloud, on the other hand, seems like it will be free — as long as you own an Xbox One. Xbox owners can use their console as an xCloud server, streaming any Xbox One game they own to their smartphone or tablet (much like they already can using Xbox One’s in-home Windows 10 streaming feature).

Microsoft also noted that there will be an option to stream xCloud games from Microsoft’s data centers without the need for a console. The company hasn’t divulged its pricing plans for this option, but it’s easy to imagine that it’ll come with a subscription fee.

Games


Google Stadia will launch with more than 30 games, including popular AAA titles like Assassin’s Creed OdysseyDestiny 2Doom: Eternal and Final Fantasy XV as well as indies such as Gylt and Get Packed.

Theoretically, xCloud will support any game in your Xbox One or Xbox Game Pass library. Microsoft hasn’t detailed which games might come to the non-console version of the service, though we did try out titles such as Halo 5Gears of War 4 and Hellblade: Senua’s Sacrifice running from one of the company’s data centers.

Specs

Stadia’s data centers are powered by a custom AMD processor, which allows for gameplay at up to 4K resolution at 60 frames per second with goodies like HDR and 5.1 surround-sound support.

We’re not sure what will power xCloud’s data centers, but the console streaming version of the service will be powered by your existing Xbox One, Xbox One S or Xbox One X.

Outlook


Google Stadia could be a great introduction to AAA gaming for those looking to dip their toes in, providing access to a solid library of big titles that you don’t need any fancy hardware to play. The fact that you have to pay a monthly $10 subscription on top of purchasing individual titles doesn’t seem great, but it’s still cheaper than shelling out for a $300 console or $1,000 PC upfront.

Project xCloud, on the other hand, seems like a handy option for Xbox One owners to play the games they already own while they’re on the go, especially since that version of the service won’t cost a thing. However, we’re curious to see what Microsoft will charge for a version of xCloud that doesn’t require an Xbox to use.

Ultimately, Stadia and xCloud seem to be targeting different kinds of gamers, with Stadia hoping to capture the gaming-curious and xCloud giving you another way to play the Xbox One games you already own. Despite their different approaches, one thing is clear: cloud gaming doesn’t look like it’s going away anytime soon.

Categories
Backend Developer Database Development Frontend Developers Remote developer

MySQL 5.5: World’s Most Popular Opensource Database


MySQL is a fast, easy to use relational database. It is currently the most popular open-source database. It is commonly used in conjunction with PHP scripts to create powerful and dynamic server-side applications.

MySQL is used for many small and big businesses. It is developed, marketed and supported by MySQL AB, a Swedish company. It is written in C and C++.

This language is sporting a barrier of entry low enough to attract novice developers yet strong enough to power some of the world’s most popular websites, among them Yahoo!, BBC News, the US Census Bureau, and Craigslist.

This reference is created to help you quickly navigate some of MySQL’s most popular features. Covering topics such as configuration, administration software, backup procedures, SQL features, and user management, this reference will serve as a handy desk for countless projects to come.

Reasons For Popularity


MySQL became so popular because of these following reasons:

  • MySQL is an open-source database so you don’t have to pay a single penny to use it.
  • MySQL is a very powerful program so it can handle a large set of functionalities of the most expensive and powerful database packages.
  • MySQL is customizable because it is an open-source database and the open-source GPL license facilities, programmers, to modify the SQL software according to their own specific environment.
  • MySQL is quicker than other databases so it can work well even with the large data set.
  • MySQL supports many operating systems with many languages like PHP, PERL, C, C++, JAVA, etc.
  • MySQL uses a standard form of the well-known SQL data language.
  • MySQL is very friendly with PHP, the most popular language for web development.

Configuration


MySQL supports over 260 configuration parameters, capable of controlling behavior regarding memory, logging error reporting and much more. While it’s possible to tweak these parameters by passing them as flags when starting the MySQL server, typically you’ll want to ensure they’re always set at server startup, done by adding them to my.cnf file.

my.cnf File

my.cnf file’s range of impact on the MySQL server is location-dependent:


my.cnf File Synatax


my.cnf file is a text file broken into several sections. Each section defines the context of the parameters defined within, the context being specific to a particular MySQL client. For example:

# All clients
[client]
port = 3306
# The mysql client
[mysql]
safe-updates
# The mysqldump client
[mysqldump]
quick

Viewing Configuration Parameters


You can view MySQL’s configuration parameters and their current values using one of the following commands:

From the mysqladmin client:


%>mysqladmin -u root -p variables

From inside the MySQL client:

mysql>SHOW VARIABLES;

You can find a specific parameter using the LIKE operator :

mysql>SHOW VARIABLES LIKE "key%";

Storage Engines

How to install MySQL

Download MySQL


Follow these steps:-

Step 1– Go to MySQL official website
https://www.mysql.com/downloads/

Step 2- Choose the version number for MySQL community server which you want.

Installing MySQL on Windows


Your downloaded MySQL is neatly packaged with an installer. Download the installer package, unzip it anywhere and run setup.exe.

By default, this process will install everything under C:\mysql.

Verify MySQL installation

Once MySQL has been successfully installed, the base tables have been initialized, and the server has been started, you can verify its working via some simple tests.

Open your MySQL Command Line Client, it should appear with a mysql> prompt. If you have set any password, write your password here. Now, you are connected to the MySQL server and you can execute all the SQL command at mysql> prompt as follows:

Data Types

MySQL supports a rich set of data types capable of representing nearly every conceivable data formate, ranging across dates and times, currency, strings, integers, and floats. This section defines each type and its respective range.

Date and Time Types

Note:- MySQL is fairly flexible in terms of how it accepts date and time type values. For instance, DATE, DATETIME, and TIMESTAMP will all accept ‘2008-09-02’, ‘2008/09/02’, and ‘2008*09*02’ as valid date values.


Numeric Types


String Types


Popular Administration Services


Web frameworks help the programmer to embrace best practices, simultaneously decreasing errors and eliminating redundant code. If you haven’t yet settled upon a framework, consider checking out one or several of the following popular solutions:-


MySQL’s Clients


MySQL is bundled with quite a few clients capable of doing everything from performing backups, managing the MySQL server, converting table formats, and stress-testing the database. In this section, I’ll briefly introduce the most commonly used clients.

Key Administration Task


Logging into MySQL server
To login into the MySQL server using the MySQL client, you’ll typically provide your MySQL username and password:-


%>mysql -u username -p
Enter password: *****
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.1.22-rc-community MySQL Community
Server (GPL)

Type 'help;' or '\h' for help. Type '\c' to clear
the buffer.
mysql>

Once you’re logged in, you can select a database or begin carrying out other administrative tasks. To save some time you can pass the desired database along on the command line when logging in:

%>mysql -u username -p database_name

If you are connecting to a remote database, pass the hostname or IP address along using the -h option:-

%>mysql -h hostname -u username -p database_name

To log out of the MySQL server, use quit or the \q flag:-

mysql>quit
Bye
%>

Modify the MySQL Prompt

MySQL’s default prompt is enough to remind you are currently logged into MySQL rather than into an operating system shell. However, like most shells, you can modify MySQL’s prompt to your liking. For instance, when logged into the MySQL client execute the following command to change your prompt to MySQL (user@host)

mysql>prompt mysql (\U)>
mysql (root@localhost)>


Databases


Tables


Managing Users

MySQL is packaged with a powerful security model, capable of controlling practically every conceivable user action, ranging from which commands can execute to how many queries can execute in an hour. This model works in a two-step sequence:

Although covering the nuances surrounding MySQL’s privilege tables is beyond the scope of this document, the remainder of this section should give you ample reminders regarding commonplace tasks. You are, however, encouraged to carefully review the privilege table documentation found in the MySQL manual (http://dev.mysql.com/doc/), as it’s easy to make a mistake when using this powerful feature.

To grant a user all privileges on all databases, use *.* in place of the database name.

Note:- Be sure to include the IDENTIFIED BY clause when creating new users! Neglecting to include this information results in a user being created without a required password.

Key SQL Tasks


While executing standard SQL statements is likely old hat for most users, it may be more difficult to recall the syntax pertinent to some of MySQL’s relatively new SQL features, namely Stored Routines, Views, and Triggers.

Stored Routines


MySQL collectively refers to stored procedures and stored functions as stored routines. Stored procedures are executed using the CALL statement, and can return values as MySQL variables, whereas stored functions can be called directly from within a MySQL like any other standard MySQL function.

In this section, a brief refresher is provided regarding managing what is arguably the more useful of the two, namely stored functions.

Creating a Stored Function
A stored function is created using the CREATE FUNCTION command. A simple example follows:

mysql>DELIMITER $
mysql>CREATE FUNCTION calculate_bonus
        ->(employee_id INTEGER) RETURNS DECIMAL(5,2)
        ->BEGIN
        ->DECLARE article_count INTEGER;
        ->DECLARE bonus DECIMAL(10,2);
        ->SELECT count(id) AS article_count FROM articles
        ->WHERE author_id = employee_id;
        ->SET bonus = article_count * 10;
        ->RETURN bonus;
        ->END;
        ->$
mysql>DELIMITER ;


Once created you can call calculate_bonus() from within a query: mysql>SELECT name, phone, calculate_bonus(id) FROM authors;

Note:- Stored procedures and functions support complex logical syntax features, including conditionals and looping statements.

Altering a Stored Function

To modify an existing function, use the ALTER FUNCTION command:

mysql>DELIMITER $
mysql>ALTER FUNCTION calculate_bonus
        ->MODIFIED FUNCTION BODY...
        ->$
mysql>DELIMITER $

Deleting a Stored Function
To delete a stored function, use the DROP FUNCTION command:

mysql>DROP FUNCTION calculate_bonus;

Views


Views can greatly simplify the execution and management of an otherwise complex query by assigning an alias to it, allowing the developers to execute the query by its alias rather than repeatedly entering the query in its entirety.

Triggers


Triggers are automatically activated in accordance with a specific table-related event. They are useful for automating table updates which should occur when another table is modified in some way.

Performing Backups


Performing regular backups is an essential part of even the smallest database project. Fortunately, MySQL makes this very easy by offering several backup solutions.

Copying Files


If your tables use the MyISAM storage engine, you can backup the database simply by copying the files used to store the tables and data. To do so, you’ll need to first execute the LOCK TABLES command (only a read lock is required), followed by FLUSH TABLES. Once executed, copy the files, and when the copy is complete, execute UNLOCK TABLES.

Creating Delimited Backups

To backup the table data in delimited format, use the SELECT INTO OUTFILE command. For instance, to backup the author’s table used in previous examples, execute:

mysql>SELECT * INTO OUTFILE 'authors090308.sql' FROM authors;

Using mysqldump


The mysqldump client is convenient because it supports creating backups of all databases using any MySQL storage engine, not to mention that it automatically takes care of important details such as locking the tables during the backup.

The mysqldump client supports an enormous number of options, and it’s recommended you take some time to review them in the MySQL manual, however, this section will give you enough to at least remind you of what’s required to perform a variety of different backups.

Backing Up a Specific Database


To backup a single database, just pass the database name to the mysqldump client, piping the output to a text file:

%>mysqldump [options] database_name > backup0903.sql

Of course, you’ll require proper permissions to execute mysqldump in conjunction with a specific database ( namely the SELECT and LOCK privileges), therefore you’ll typically also need to pass along your username and password. In this case, this command typically looks similar to:

%>mysqldump -u root -p database_name > backup0903.sql

Backing Up Specific Tables


To backup specific tables, you will need to identify the database, followed by each specific table name you’d like to backup:

%>mysqldump [options] database_name table_name [table_
name2...] > backupfile.sql


Backing Up All Databases

To backup all databases, pass the –all-databases option:


%>mysqldump [options] --all-databases > backupfile.sql


Using mysqlhotcopy


If all of your backup tables use the MyISAM storage engine, and you are able to log into the server where the tables are stored, the mysqlhotcopy might be the ideal solution due to its speed advantage.

To backup the codersera database to a directory located at/home/jason/backups using mysqlhotcopy, execute:

%>mysqlhotcopy -u root -p codersera /home/jason/backups

To copy multiple databases, just string each database name together:


%>mysqlhotcopy -u root -p codersera wjgilmore /home/jason/backups

Note:- MySQL’s replication features make it possible to maintain a consistently synchronized version of the live database. Replication is out of the scope of this reference card, but be sure to visit the MySQL documentation (http://dev.mysql.com/doc/) if replication is more suitable to your needs.


MySQL’s Date and Time Features


In addition to temporal data types, MySQL supports over 50 functions intended to facilitate the retrieval and manipulation of date-related data. Rather than exhaustively itemize these functions, it seems useful to instead offer a number of common examples that may help jumpstart your search for the appropriate approach to carry out date and time-related queries.

SQL, Lisp and Haskell are the only programming languages that i’ve seen where one spends more time thinking than typing.

– Philip Greenspun
Categories
Development Frontend Developers React Developers React Native Developers React Native Web ReactJS Top Coder

How To Make React VR Apps

VR web apps can be built with the React VR apps. WebVR is an experimental API enabling the creation and viewing of VR experiences in your browser. This new technology enables you to grant access to virtual reality regardless of the devices at hand.

The only thing you need to make a React VR app is a headset and a compatible browser. If you are just viewing a web VR application then you don’t need even for a headset. React VR is a great framework to build VR websites or apps on JavaScript. It utilizes the same design as React Native and lets you make virtual reality tours and under interfaces with the provided components.

Complete Example

is a headset and a compatible browser. If you are just viewing a web VR application then you don’t need even for a headset. React VR is a great framework to build VR websites or apps on JavaScript. It utilizes the same design as React Native and lets you make virtual reality tours and under interfaces with the provided components.

Technical Requirements


Before getting started with React VR, You required a proper setup for the dependencies that will be used to build and manage a React VR app. These are Node.js and the React VR CLI.

You need to install Node.js, ensure that the latest version is used. If not, do the following:

  • MacOS: Install Node.js using Homebrew
  • Windows: Install it from the nodejs.org
  • Linux: Use sudo apt-get install nodejs command

Then you have to install the React VR CLI using npm:

npm install -g react-vr-cli.

Getting Started


Navigate to the directory where you wish to create a new project and run the react-vr init MyFirstReactVR command.

Change the directory name to something like MyFirstReactVR and run npm start .

Click and try to drag your cursor around. Also, in browsers that support WebVR, you’ll be able to explore this VR environment with a headset in full virtual reality mode.

VR Tour Sample Using React VR


Now let’s make a VR tour with a few scenes and navigations in them. First of all, you need to prepare the architecture. In this example, we will make buttons within each scene for navigations and declare this in the constructor of a React component named index.js.vr:

constructor(props) {
    super(props);
    scenes: [{
        scene_image: 'initial.jpg',
        step: 1,
        navigations: [{
            step: 2,
            translate: [0.73, -0.15, 0.66],
            rotation: [0, 36, 0]
        }]
    }, {
        scene_image: 'step1.jpg',
        step: 2,
        navigations: [{
            step: 3,
            translate: [-0.43, -0.01, 0.9],
            rotation: [0, 140, 0]
        }]
    }, {
        scene_image: 'step2.jpg',
        step: 3,
        navigations: [{
            step: 4,
            translate: [-0.4, 0.05, -0.9],
            rotation: [0, 0, 0]
        }]
    }, {
        scene_image: 'step3.jpg',
        step: 4,
        navigations: [{
            step: 5,
            translate: [-0.55, -0.03, -0.8],
            rotation: [0, 32, 0]
        }]
    }, {
        scene_image: 'step4.jpg',
        step: 5,
        navigations: [{
            step: 1,
            translate: [0.2, -0.03, -1],
            rotation: [0, 20, 0]
        }]
    }]
}

Also, declare current_scene in the state in the constructor:

constructor(props) {
        this.state = {
            ...
            current_scene: {}
                ...
        }

For rendering, change the render() method, as seen below:

render() {
    return ( < View >
        < Pano source = {
            asset(this.state.current_scene['scene_image'])
        }
        style = {
            {
                transform: [{
                    translate: [0, 0, 0]
                }]
            }
        }
        /> {
            this.state.current_scene['navigations'].map(function(item, i) {
                return <Mesh key = {
                    i
                }
                style = {
                        {
                            layoutOrigin: [0.5, 0.5],
                            transform: [{
                                translate: item['translate']
                            }, {
                                rotateX: item['rotation'][0]
                            }, {
                                rotateY: item['rotation'][1]
                            }, {
                                rotateZ: item['rotation'][2]
                            }]
                        }
                    } >
                    < VrButton
                style = {
                        {
                            width: 0.15,
                            height: 0.15,
                            borderRadius: 50,
                            backgroundColor: 'blue'
                        }
                    } >
                    < /VrButton> < /Mesh>
            })
        } < /View>
    )
}

The last step to make this work is to set the current_scene state to the first element of the scenes array componentWillMount function:

componentWillMount() {
    this.setState({
        current_scene: this.state.scenes[0]
    });
}

The result should be like this on screen:

Now add a simple animation for the button and implement the logic to navigate between scenes. First of all, for navigation, you need to subscribe to the onInput event for our Mesh element, bind this function to this in constructor, and implement it:

...
constructor(props) {
    ...
    this.onNavigationClick = this.onNavigationClick.bind(this);
    ...
}
...
onNavigationClick(item, e) {
        if (e.nativeEvent.inputEvent.eventType === "mousedown" && e.nativeEvent.inputEvent.button === 0) {
            var new_scene = this.state.scenes.find(i => i['step'] === item.step);
            this.setState({
                current_scene: new_scene
            });
        }
    }
    ...
render() {
    var that = this;
    ... < Mesh key = {
            i
        }
        ...
    onInput = {
            e => that.onNavigationClick(item, e)
        }
        .... >
        ...
}

Then added a simple animation try it out. For this, you have added one more button inside the existing one in the render method and changed the size of it. Use native JS requestAnimationFrame function:

const DEFAULT_ANIMATION_BUTTON_RADIUS = 50;
const DEFAULT_ANIMATION_BUTTON_SIZE = 0.05;
constructor(props) {
        ...
        this.state = {
                ...
                animationWidth: DEFAULT_ANIMATION_BUTTON_SIZE,
                    animationRadius: DEFAULT_ANIMATION_BUTTON_RADIUS
                    ...
            }
            ...
        this.animatePointer = this.animatePointer.bind(this);
    }
    ...
componentWillUnmount() {
    if (this.frameHandle) {
        cancelAnimationFrame(this.frameHandle);
        this.frameHandle = null;
    }
}
componentDidMount() {
    this.animatePointer();
}
animatePointer() {
        var delta = this.state.animationWidth + 0.002;
        var radius = this.state.animationRadius + 10;
        if (delta >= 0.13) {
            delta = DEFAULT_ANIMATION_BUTTON_SIZE;
            radius = DEFAULT_ANIMATION_BUTTON_RADIUS;
        }
        this.setState({
            animationWidth: delta,
            animationRadius: radius
        })
        this.frameHandle = requestAnimationFrame(this.animatePointer);
    }
    ...
render() {
    ... < VrButton
    style = {
            {
                width: 0.15,
                height: 0.15,
                borderRadius: 50,
                justifyContent: 'center',
                alignItems: 'center',
                borderStyle: 'solid',
                borderColor: '#FFFFFF80',
                borderWidth: 0.01
            }
        } >
        < VrButton
    style = {
            {
                width: that.state.animationWidth,
                height: that.state.animationWidth,
                borderRadius: that.state.animationRadius,
                backgroundColor: '#FFFFFFD9'
            }
        } >
        < /VrButton> < /VrButton>
        ...
}

Now let’s implement manipulations with the animated button and its rotation. It will rotate the button on an X-Y-Z axis. To do so, you need to subscribe to the onInput event for the Pano component and change the rotation via arrow-up, arrow-right, and arrow-down buttons.

The last thing is to implement messaging of the VR thread and Main thread to exchange data. Below is the subscription code on receiving messages and posting a message when a scene changes or an image starts/ends loading.

componentWillMount() {
      window.addEventListener('message', this.onMainWindowMessage);
      ...
  }
  onMainWindowMessage(e) {
      switch (e.data.type) {
          case 'newCoordinates':
              var scene_navigation = this.state.current_scene.navigations[0];
              this.state.current_scene.navigations[0]['translate'] = [e.data.coordinates.x, e.data.coordinates.y, e.data.coordinates.z]
              this.forceUpdate();
              break;
          default:
              return;
      }
  }
  onNavigationClick(item, e) {
      ...
      postMessage({
          type: "sceneChanged"
      })
      this.state.animationWidth = DEFAULT_ANIMATION_BUTTON_SIZE;
      this.state.animationRadius = DEFAULT_ANIMATION_BUTTON_RADIUS;
      this.animatePointer();
      ...
  }
  sceneOnLoad() {
      postMessage({
          type: "sceneLoadStart"
      })
  }
  sceneOnLoadEnd() {
      postMessage({
          type: "sceneLoadEnd"
      })
  }
  render() {
      ... < Pano...
      onLoad = {
          this.sceneOnLoad
      }
      onLoadEnd = {
              this.sceneOnLoadEnd
          }
          ... / >
  }

In client.js, implement a zoom with the mouse wheel and a position change with a double-click. you need to store the VR instance and VRcamera instance to implement the logic above.

function init(bundle, parent, options) {
    const vr = new VRInstance(bundle, 'TMExample', parent, {
        // Add custom options here
        ...options,
    });
    vr.render = function() {
        // Any custom behavior you want to perform on each frame goes here
    };
    // Begin the animation loop
    vr.start();
    window.playerCamera = vr.player._camera;
    window.vr = vr;
    return vr;

Then subscribe to ondblclick and onmousewheel and implement the zoom and change position logic.

function onRendererDoubleClick() {
      var x = 2 * (event.x / window.innerWidth) - 1;
      var y = 1 - 2 * (event.y / window.innerHeight);
      var coordinates = get3DPoint(window.playerCamera, x, y);
      vr.rootView.context.worker.postMessage({
          type: "newCoordinates",
          coordinates: coordinates
      });
  }
  function onRendererMouseWheel() {
      if (event.deltaY > 0) {
          if (window.playerCamera.zoom > 1) {
              window.playerCamera.zoom -= 0.1;
              window.playerCamera.updateProjectionMatrix();
          }
      } else {
          if (window.playerCamera.zoom < 3) {
              window.playerCamera.zoom += 0.1;
              window.playerCamera.updateProjectionMatrix();
          }
      }
  }

get3DPoint is your custom function to transform screen coordinates to world coordinates using Three.js, implemented in cameraHelper.js.

import * as THREE from 'three';
export function get3DPoint(camera, x, y) {
    var mousePosition = new THREE.Vector3(x, y, 0.5);
    mousePosition.unproject(camera);
    var dir = mousePosition.sub(camera.position).normalize();
    return dir;
}

Sometimes, loading scene images takes time. thus, you have implemented the loader to show this process. In index.html, add a loader and CSS based on this w3cschool example.

<style>
    body { margin: 0; }
    #loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
    }
    @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 }
    to { bottom:0px; opacity:1 }
    }
    @keyframes animatebottom {
    from{ bottom:-100px; opacity:0 }
    to{ bottom:0; opacity:1 }
    }
    #myDiv {
    display: none;
    text-align: center;
    }
</style>
<body>
    <div id='content' style="width:100%; height:100%">
        <div id="loader"></div>
    </div>
    <script src="./client.bundle?platform=vr"></script>
    <script>
        ReactVR.init('../index.vr.bundle?platform=vr&dev=true', document.getElementById('content'));
    </script>
</body>

And don’t forget message in client.js from the VR thread to enable/disable animation:

function init(bundle, parent, options) {
    ...
    vr.rootView.context.worker.addEventListener('message', onVRMessage);
    ...
  }
  function onVRMessage(e) {
    switch (e.data.type) {
      case 'sceneChanged':
      if (window.playerCamera.zoom != 1) {
        window.playerCamera.zoom = 1;
        window.playerCamera.updateProjectionMatrix();
      }
      break;
      case 'sceneLoadStart':
        document.getElementById('loader').style.display = 'block';
      break;
      case 'sceneLoadEnd':
        document.getElementById('loader').style.display = 'none';
      break;
      default:
      return;
    }
  }

Check your index.html or client.js.

Get The Complete Github Code Here

Categories
Business Development Frontend Developers Startup Top Coder

What Are 7 Principles Of Design?

Designing is an innovative art form that is used to give a creative look to anything. Design changes the presentation of normal things to exclusive.

It is most interesting and challenging to design and creates something productive. How would you feel? If you see a simple website with no pictures or any effective. Quite boring right? Designing is important to give an elegant look to a basic design or websites which attracts the audiences.

Let’s discuss some amazing principles of design as well as some interesting types of design which help you in design an impressive website. The designer expresses things in detail and more impactful way.

Introduction of Design


A design should be easy to understand complex things. A designer should be open, logical thing, good in reasoning to design her/his art so that the concept should be clear to everyone. And there should be a quality of design that catches the attention of viewers.

Using the proper size, the pattern of contents and images, and the color balance is a difficult task for every designer and especially graphic designers. Yes, it takes lots of time to design a graphic from scratch.

Principles of Design

  • Proportion
  • Contrast
  • Hierarchy
  • Emphasis
  • Pattern
  • Balance
  • White space

These are the seven main principles of design let’s study them in brief:

1. Proportion


The important principle that needs in the design is Proportion. It is the visual size and weight of the objects or elements composition which helps the designers to approach the design. It is used to select the section rather than selecting the whole page. Proportion is the combination of all the parts (size, amount, or number) which always related to each other to make the proper design.

2. Contrast


Contrast is the difference between the two design or elements separates from each other. Increasing contrast will improve the experience of the user’s ability to visualize the difference and the different elements.

There are three elements of contrast:

  • Color: Example white text color on a cream-colored background vs white text on a dark background, which is more visible to you. The second one, as it is important to work and maintain the balance (Contrast) between the text and background colors. It is not only for text but also implements in images that used in webpages and blogs.
  • Depth: For visible or sharpness, it is important to contain each depth of the images or text color to make elements more interactive.
  • Size: The text and image sizes should be according to the page. Extreme large images and improper font of text often do not look good in the webpage. Image and text should be responsive.

3. Hierarchy


This is another principle of design, it is basically used for websites, where all the things should be in order and in a symmetric way. It is the most important element in the design. Hierarchy is used for titles and headings and formatting the layout.

Design elements can consist of anything including Typography, Graphics, Colors, Contrast, Weight, Position, Size, and Space. This series will provide insight into various principles explaining their importance and why they are required in order to produce quality, well-crafted design. Visual hierarchy refers to the design or presentation of elements in a way that implies importance.

4. Emphasis


It is one more principle that catches the viewer’s attention. Usually, the designer will make one area stand out by contrasting it with other areas. Emphasis can also be used to reduce the impact of certain information. The areas that can be different in size, color, texture, shape, etc.

Emphasis in design is defined as an area or object within the art-work that draws attention and becomes a focal point. Subjection is defined as reducing or toning down other compositional parts in order to bring notice to the focal object. Therefore, the red circle (above) is the focal point of the design.

5. Pattern


In design, the pattern is important as it is the repeating of an object or symbol all over the work of art. In user interface design, the pattern is a simple means to maintain consistency through repetition, either visually or conceptually.

A geometric design is a kind of pattern which is formed by geometric shapes and typically repeated like a wallpaper design. In computer science, a software design pattern is a known clarification to a class of problems in programming. Repetition centers on the same object being repeated, patterns are made up of different elements which are then repeated in the same way during the design

6. Balance


Balance consist of the distribution of visual weight, space, colors, or texture. There some elements that have heavy and other elements are lighter which is an imbalance or sometimes there are some pages carry such a kind of things. But there should be a balance in the design which looks attractive to the audience.

There are two types of balance:

  • Symmetrical: The designs that are well-formed and the layout of the elements had equal texture and color from all the sides of the page.
  • Asymmetrical: These designs are that uses elements of different shape or weight and create attractive webpages.

7. White space


All other elements are dealing with what you add in your design whereas white space like negative space which can’t be added. it is exactly that the empty page around the elements of the composition. It also creates the Hierarchy and helps to organize the objects in the design.

White paper communicates a completely different image or idea from your main design that will reward your audience for engaging with it. The logo of “codersera” above uses active negative space to communicate multiple ideas in one fun, creative design.


It is must to use these principles wisely in your design to get the perfect outcome. Example: Above web page of Codersera, the design of the web page shows all the seven principles of design.

  • Site contains the “Balance” the texture and space.

  • Maintain the “Contrast” of image and content plus site logo.

  • Right “Proportion” of selecting the sections for text and pictures.

  • Follow the whole “Hierarchy” of the page.

  • This site “Emphasis” the proper attent with its simplicity.

  • The “Pattern” is simple and clear to the viewers.

  • Well use of “White space” and put a suitable picture in this site.

Let’s have a short brief on web design so that you relate the topic more properly.

What is Web Design?


Web design is the process of designing websites. It contains several different aspects, including webpage layout, content production, and graphic design. While the terms web design and web developing are often used interchangeably, web design is technically a subset of the wider classification of web development.

Websites are created using a markup programming language called HTML (Hypertext Markup Language). Web designers create webpages using HTML tags that define the content and metadata of each page. The layout and appearance of the elements within a webpage are typically defined using CSS (Cascading style sheets). Therefore, most websites include a combination of HTML and CSS that defines how each page will develop in a browser.

Top 5 Types of Web Design


Basically I’m talking about web designing, so let quicky discuss the top five web designs that are in trends. The purpose of different type of web design is to create or innovate eye-catching websites.

Flat Web Design

FLAT web design


This type of web design is a minimalistic design approach that emphasizes usability. The first who apply flat web design to styling its interface was Microsoft. To converting a real-life object or element, such as a calendar, into a tiny realistic illustration, using flat design identify apps with simple, like icon images.

The features of Flat web design are:

  • Open space
  • Crisp
  • Edges
  • Bright color
  • Two-dimensional/flat illustrations
  • Clean

Single Page Web Design

single page web design


This web design is more practical and effective to use for designers. Like all trends, single page sites have their advantages and shortcomings, but in a world where thousands of new websites are created daily, a single page web design may be the best way to cater the human attention.

Having a refined purpose for your design, your content to fit a single page, and creating an interesting layout are some of the most important focal points to make your single page design meet its full potential. 

Minimalist Web Design

minimalist web design


The purpose of minimalism is to expose the essence of a design by reducing all non-essential patterns, features, and concepts. In web design, minimalism prevents potential distractions and strips away parts into their most basic forms.

It’s a style that extends to be trendy, being a reaction to the chaos and overflow of information that’s essential to the Internet. And if your portfolio’s sole purpose is to showcase the best work you’ve ever created, the biggest gift you can do for yourself is to simply get out of the way for your website.

Illustrative Web Design

illustration web design


The illustration is an amazingly versatile tool that can find many different uses in design. And when it comes to web design we can find an extremely wide variety of implementations.

Illustrations and cartoon drawings can really bring web design to life. Drawing is a creative activity by definition, and incorporating it into a website’s design is one of the most creative methods of presenting information on the web. Illustration has become an important part of a web presentation by its enticing and fun little ingredients like icons. As well as, your site will be more personal for users and connect users better.

Typography Web Design

typography web design


“First impressions are lasting impressions.”

Whether you realize it or not, your typography helps to create an experience for users before they’ve even read a word or clicked a button. Typography has the potential to go beyond merely telling a story it shows the user who is behind the website and what they’re about. Also, it is a type to creates an atmosphere and elicits.

As one of the core design principles, typography can really make or break a website design. Despite recent advances in web type technology, designers are still fairly limited when it comes to creative typography layouts, meaning image replacement techniques are still common, but these days we have a massive choice when it comes to selecting fonts for our designs.

Different Types of Layouts:

  1. Single pages design layout
  2. Fixed design layout
  3. Responsive layout
  4. Dynamic website layout
  5. Static page layout
  6. Fluid design layout

Quality of Design!


Design is the root of all quality like products, services, experiences, system, and processes. Quality of the design is the value of design to customers.

Quality of design contains:

  • Performance
  • Usability
  • Predictability
  • The design should be Stable
  • Reliable to the context
  • Better experience to the users or audiences.