Three JS for absolute beginners

Why do we need 3D and Geometric shapes in our design?
Design in 2017 will continue the trends that materialized in 2016 while adding some new influences, but the feeling is well known and familiar and you may have seen it in the past couple of years.

3D is definitely heading our way and we are going to see its influence in all design fields. With the VR/AR revolution rapidly building momentum, this domain is evolving pretty fast.

Also Geometric Shapes, Patterns, Lines and Circles. This trend started in 2016 and will definitely continue in 2017. You can personalize a website simply by adding some modern shapes, either flat or with a soft shadow.

How to create and display animated 3D computer graphics in a web browser?

Use three.js

Three.js is easy to use, lightweight, JavaScript 3D library. The library provides CSS3D and WebGL renderers.

WEBGL doesn’t ring a bell?
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 elements.

Okay does it support all browsers?
Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL. The following method allows you to check if it is supported and use CanvasRenderer if it is not.
Add Detector.js to your javascript and run the following before attempting to render anything.
renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

How to get started?
Basic Procedure

  • Creating the scene
  • Rendering the scene
  • Animating the object

Where is the HTML part?

That’s all. All the code below goes into the empty <script> tag.

Creating the scene
To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.

Here we use PerspectiveCamera. Camera that uses perspective projection. This projection mode is designed to mimic the way the human eye sees. It is the most common projection mode used for rendering a 3D scene.

  • The first attribute is the field of view.
  • The second one is the aspect ratio.
  • The next two attributes are the near and far clipping plane.

Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don’t have WebGL support for some reason.

In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.

Geometry and Material
To create a cube, we need a BoxGeometry. This is an object that contains all the points (vertices) and fill (faces) of the cube. In addition to the geometry, we need a material to color it. All materials take an object of properties which will be applied to them.

A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.

var cube = new THREE.Mesh( geometry, material );

By default, when we call scene.add(), the thing we add will be added to the coordinates (0,0,0). This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.

scene.add( cube );
camera.position.z = 5;

Rendering the scene

Render loop will create a loop that causes the renderer to draw the scene 60 times per second. requestAnimationFrame has a number of advantages.
Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.

This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the render loop.

Congratulations! You have now completed your first three.js application. It’s simple.

For complete code and result check JS Fiddle Link


Meteor 1.4 with React for Beginners


What is Meteor Js

MeteorJS, is a free and open-source JavaScript web framework, written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (Android, iOS, Web) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library.

Latest Stable Version :Meteor 1.4

What is React Js

React is a JavaScript library built by a group of engineers at Facebook and Instagram. It describes itself as a “JavaScript library for building user interfaces”. Whereas other JavaScript libraries like Angular and Ember contain features related to data fetching, data modeling, controllers, etc – React is only concerned with the “view” of your application.

The full code lives in this repo.

Starting the basic folder structure

The folder structure is always something to worry about when you start a new project. We are always trying to improve our code, and with the way we structure it on Meteor, there is not too much deal about folder structure. We have a /client and a /server folder (there is always a /public, /private /lib folder), so in this tutorial we are going to follow the Meteor standard, with some obvious folders in the /client folder, like /components.


The Best Practices For this tutorial Requirements


Operating System :Ubuntu 16.04(Latest stable Version)

The Best Knowledge About React  :

And Also Javascript Es6

Referenced Tutorials Are :

Sample Github Repositories :


Should you use React in your next Meteor project?

If you’re just getting started with Meteor – and especially if you’re just getting started with JavaScript development – the simplicity and ease-of-use of Meteor’s Blaze is hard to beat. For smaller apps, MVPs, and hackathons, you’d be hard-pressed to find a more efficient way of building modern, reactive, client-side web apps.

But as your application – and more importantly your team – grows, you may find yourself feeling the pain of unpredictable application state, duplicated code and “jQuery Soup”. In that case I’ve found that React is a great choice for building predictable, scalable apps and feels right at home in a Meteor app.

Important Factors Xamarin is Best in Mobile Cross platform Development.


Xamarin is a C# based solution for cross platform apps development. Using the capabilities of C# and wrapping all native iOS and Android libraries allows Xamarin to make changes, over the course of the project lifetime, and making improvements to the application rather quickly. The code base is shared so the main effort needs to be focused on UI implementation for different platforms.Since all the native features are supported in the end apps are looking and perfrom in a native way.

Other Major CrossPlatforms Are  PhoneGap and Titanium.


Using PhoneGap for app development you’ll create HTML, CSS, and JavaScript files in a local directory, much like developing a static website. Approaching native-quality UI performance in the browser is not a simple task, right? On most platforms and browsers today, reaching native UI performance and responsiveness isn’t possible, even with the help of Sencha Touch. Additionally, PhoneGap has very limited capability for interaction with other apps or device capabilities, and this would not be cross-platform anyway, as there aren’t any standards in HTML5 except for a few, like geolocation, camera and local databases.



   Xamarin is the right choice over PhoneGap with following advantages.

  •  Xamarin gives near native performance and 20% of fortune 500 companies using Xamarin.
    •Code sharing between iOS, Android, various windows flavors.
    •It provides an easy and cost effective entry into iOS and Android for .Net/ C# developers.

Xamarin Advanatages

  • Xamarin has TestCloud which allows you to test your apps automatically.
  • Support for LINQ (ease to access DB entity).
  • Provides 100% code reuse with Xamarin.Forms UI development using shared code base and logic. This saves a lot of time and resources .
  • Supports patterns like MVC and MVVM.
  • Xamarin.Android supports Google Glass devices, Android Wear, and Firephone .
  • Learning curve is relative. If your team knows C#, it is comparatively easy to get started with Xamarin.

The Major Reasons Are

Major IDE enhancements
Improved code sharing:
Xamarin 3 introduces two great new code sharing techniques for cross-platform apps:
Shared Projects
Shared Projects provide a simple, clean approach to code sharing for cross-platform application developers. Xamarin developers can now use Shared Projects to share code across iOS, Android, and Windows in either Xamarin Studio or Visual Studio.
Portable Class Libraries
Portable Class Libraries are libraries that are consumable across a diverse range of .NET platforms. Xamarin 3 can both produce and consume PCLs from both Xamarin Studio and Visual Studio.

API integration:
Xamarin binds the same APIs and UI controls that are used to build iOS, Android and Mac apps in their respective platform specific languages. For Windows development, Xamarin with Microsoft Visual Studio offers Windows Phone and Windows 8 applications. Code can be shared between iOS, Android and Windows using Portable Class Libraries (PCL) and appropriate application architecture.

Native applications:

Native User Interfaces

Xamarin apps are built with standard, native user interface controls. Apps not only look the way the end user expects, they behave that way too.

Native API Access

Xamarin apps have access to the full spectrum of functionality exposed by the underlying platform and device, including platform-specific capabilities like iBeacons and Android Fragments.

Native Performance

Xamarin apps leverage platform-specific hardware acceleration, and are compiled for native performance. This can’t be achieved with solutions that interpret code at runtime.

Xamarin Component Store

Xamarin Components provide a variety of different components to use inXamarin.iOS and Xamarin.Androidapplications. Components range from user interface controls to code libraries, as well as user interface themes. They allow applications built on Xamarin to create rich user experiences and integrate with many different third party services with very little work.

In this article, we’ll look at how to include a component in a project and demonstrate the tool chain that makes the process seamless.

Advantages of C#

More Types, Less Typing

C# uses type inference to give developers more safety in fewer keystrokes, without boilerplate or verbose type annotations.

Language-level Async

Asynchronous programming (async) keeps apps responsive. In Objective-C, Swift and Java, async requires callbacks and manual bookkeeping. C#’s language-level support makes async a breeze

Stronger Types, Smarter Tools

Generics guarantee that collections and other compound types are used safely, without the need for casts or comments. Xamarin tools understand intent better thanks to richer types, with benefits like ubiquitous code completion.

First-class Functions

In Java for Android, lambdas are unavailable. In Objective-C, lambdas are extremely cumbersome. In C#, lambdas couldn’t be simpler, making functional programmers feel right at home.

Shared app logic


Xamarin is the new king of cross-platform development. The rich features and the resulting benefits of Xamarin all point towards flawless cross-platform native applications. In addition to the above-mentioned five reasons, Xamarin boasts an ever-growing community of 700,000 plus developers who are continuously collaborating and enhancing the software.




Xamarin Dev Days in INDIA


In India 5 cities Are Announced Xamarin DevDays.Come join Xamarin mobile developer community , full day of hands-on learning and training on how to build, test, and monitor native iOS, Android, and Windows apps with Xamarin.


Each Xamarin Dev Days is unique, but you’ll always walk away with a better understanding of how you can build, test, and monitor native iOS, Android, and Windows apps with Xamarin.

For Registration,

CrossPlatform Mobile Application Development in Xamarin


Hi ,

Visual studio,c# Developers greater news,Xamarin provides a rich mobile development offering that enables developers to build mobile apps using C# and deliver fully native mobile app experiences to all major devices – including iOS, Android, and Windows. Xamarin’s approach enables developers to take advantage of the productivity and power of .NET to build mobile apps, and to use C# to write to the full set of native APIs and mobile capabilities provided by each device platform.This enables developers to easily share common app code across their iOS, Android and Windows apps while still delivering fully native experiences for each of the platforms.

Your Existing Skill C#,Anything you can do in Obejective-C,swift or Java ,You can do in c#.


Hello World Application Using Xamarin Forms.

After Successfully installing Xamarin (Visual Studio)

It’s time for the first Hello World Application.

Hello World Application: Xamarin.Forms

What is Xamarin Forms :

Xamarin.Forms is a new library that enables you to build native UIs for iOS, Android and Windows Phone from a single, shared C# codebase. It provides more than 40 cross-platform controls and layouts which are mapped to native controls at runtime, which means that your user interfaces are fully native

Step 1:

Create a new Project.

Visual C# -> Cross-Platform -> Blank Application(Xamarin.Forms Portable)

Name the app (Hello World) and select the location to create the project and click OK


running application to click simulator running button. see image below


Meteor Js Web Applications



To create the app, open your terminal and type:

Windows Operating System  To Use   Command Prompt to “meteor” chek meteor installed.

meteor create aboossample   
 'aboossample' is  the project name.

This will create a new folder called aboossample with all of the files that a Meteor app needs:

aboossample.html     // # an HTML file that defines view templates

aboosample.js            // # a JavaScript file loaded on both client and server

aboossample.css        // # a CSS file to define your app’s styles

.meteor        // # internal Meteor files    

To run the newly created app:

cd aboossample


Open your web browser and go to http://localhost:3000 to see the app running.
Continue reading “Meteor Js Web Applications”