What is a CTP version of a product?


I’ve been through many articles and news alerts from all around the web saying CTP version of this product is out. Initially I really wasn’t that much interested in this kind of news neither I was on the level of expertise that I can talk on these terms. As the time passed and I grew up a little (technically), I was forced to know what is a CTP? 

So like folks do always, I did Google the term and here’s the summary: 
(I know there’s a plenty of articles/posts out there but just to keep myself informed I’m posting it here also):

CTP is an acronym for Community Technical Preview. Generally, it’s an incomplete preview of a new technology in progress. It’s a very early release which comes before Beta version of a product and which is intended for the more technologically advanced customers to seek for feedback and bug submissions. Usually there are a lot of changes between a CTP and the final release.


A new guard page for stack cannot be created- ASP.NET MVC4 Error

An hour back I was working with ASP.NET and encountered with this pretty error. I kept wandering for about ten minutes what really has happened. My iisexpress.exe was automatically shut down and it didn’t work when I kept hitting CTRL+F5.


How I solved it:

Later i the process I came to know that I had the name for an Action was “View” that you can see in the picture below. 


I renamed it to View1 and it worked again. Hope this helps somebody. Thanks!

What is MongoDB?

MongoDB is a NoSQL DataBase whose main features include document-oriented storage, full index support, replication and high availability, auto-sharding, querying, fast in-place updates, Map/Reduce, and GridFS.

MongoDB addresses volume, variety, and velocity of data that organizations increasingly have to deal with in the following ways:

  • Massive Data Volumes: MongoDB is designed to scale horizontally on commodity hardware, making it easy to add nodes to a cluster as data volumes and velocities increase. 

  • Real-time demands: As well as supporting the fundamental querying that you’d expect from an operational database, MongoDB’s native Map/Reduce and aggregation framework support real-time analytics and insights.
  • Rapid evolution: An organization’s needs should change as it responds to the information gained from all the data it has access to. MongoDB’s dynamic document schema enables applications to evolve as the needs of the business evolve.
  • Document-Oriented Storage: MongoDB is a document database, meaning that it stores data in semi-structured, JSON-style documents in collections, rather than storing data in tables that consist of rows and columns, as is done with relational databases such as MySQL. MongoDB collections are similar to tables in relational databases, although collections are a lot less rigid.

What is Web 2.0?


Image Courtesy: wikipedia.org

The term “Web 2.0” defines a set of principles and practices for web applications,
which, when followed, entitle a web application to wear the Web 2.0 crown. A web
site can claim to be a Web 2.0 site if it:
Allows users to control data presented on the web site
  • Presents a platform that enables the mixing (or mash-up) of technologies and data
  • Enables services to be consumed that are beyond the boundary of the application
  • Harnesses collective intelligence by enabling the following:
    • Aggregation of relevant content from heterogeneous sources
    • User contributed content
    • User moderation of content via tagging and rating
  • Uses state-of-the-art technologies that take interactivity on the Web to the next level by use of popular technologies like Ajax, Flash, and Silverlight.

Basics of creating Parallax Effect using HTML CSS and JavaScript

In this article I'll explain what a Parallax is? What does it mean? How to create one from scratch? There're so many JS libraries out there that I used to the effect in action but I never thought of getting into the basics of its What & How. Trust me, it's that simple. Let's move ahead and explore what's in there. This article is useful for all Beginners in Web Design & Development.
What is Parallax?

Definition: The effect whereby the position or direction of an object appears to differ when viewed from different positions. 

Well, that's a bit tough to understand what exactly a Parallax mean. Putting it simple, Imagine you're in a forest. You know how when you move sideways and look at the trees, the ones at the distance seem to move at a different rate (slower) than the ones near you? 

Another easy way to understand this is to hold your index finger about 6 inches from your face. Look at it with just your right eye, then just your left eye, and notice how its position changes with respect to the
background.

Or, when you play old side-scrolling video games, the backgrounds will have three layers that move at different speeds to make it look like you're moving? 

That moving of different layers at different speeds effect is parallax. I hope now you understand what does that heavy word mean? Okay, let's move now and see what composes a parallax.

What is takes to create a Parallax?

Practically a parallax is composed of more than one layer in parallel, moving along on scroll at different speeds, giving us the feel that they're at different distance. You're free to add as many layers to create a parallax but more than one. CSS is there to do all the layers for you and JavaScript will update the CSS values every time you scroll through the contents. That's all it takes to create it. Let's see now how we do it with a demo.

Demo: How we do it?

I will take two layers for demo purposes (you may include as many as you want as I explained earlier). 
Here you can see I've two divs having class "background" for background layer and "contents" for the layer on top.

I'm going to include more contents to "contents" div so that we can have the space to scroll. Below is the CSS which does all the magic of creating the layers from the two Divs above:
So, to reveal the secret behind, we fix the layers in background using CSS and later increase/decrease the at a desired rate on scroll. That's all a parallax has to do with it.

Finally, the JavaScript which make the effect come into picture:
Here I've a function named "parallax" which updates the "top" CSS property for fixed layer which is in background as per the scrolling has been done. Later I bind this function to "onscroll" event of window object so that it does the magic.
 
I've used lorempixem.com for sample images that you see appearing in background.

Here's the complete code:
**************************************************************************************************************************



Parallax Sample


.background{
background: url('https://lorempixum.com/1024/768') repeat;
position: fixed;
width: 100%;
height: 300%; /* adjust the height according to the length of contents */
top:0;
left:0;
z-index: -1;
}
.contents{
color: #fff;
font-family: arial;
width: 600px;
margin: auto;
line-height: 20px;
font-size: 16px;
}



function parallax(){
var scrolled = $(window).scrollTop();
$('.background').css('top',-(scrolled*0.2)+'px');
}
$(window).scroll(function(){
parallax();
});

What is “Nightly Build” version of softwares? What does it mean?


I always keep trying latest applications of my interest in market from internet and often came across this scary word and for many softwares that I downloaded without knowing whether it’s a fully working or pre-release or anything else, had this title as “Nightly Build” version of X software. Probably I was frightened of any ghost thinking of that it may get’s build at mid night or only at nights and not during day time so I just kept ignoring the term and using the softwares. But so far in the journey, I got the courage (lol.. after so long time) to explore what really it means. Hence my this post is for the “Geeks” like me who never try to search for the such keywords just avoiding any unfortunate consequence.

What is a “Nightly Build” version of any software?

Nightly builds are automated Alpha builds from the latest development code in Testing. By nature, these builds are experimental, unstable, untested, hence – may contain Bugs and Errors and may be harmful to your machine. It’s the build before release of any Beta version or a Release Candidate (RC). 

Nightly Build = An automatic build from a codebase

In software development, a neutral build is a build that reflects the current state of the source code checked into the source code version control system by the developers, but without any developer-specific changes.

A nightly build is a neutral build that takes place automatically. These typically take place when no one is likely to be working in the office so that there are no changes to the source code during the build. 

Obviously, it may or may not be usable, depending on what stage of development it’s at, what the release strategy for that project is, etc. What you are testing is a snapshot of unfinished software at one moment in time.

How to configure Sublime-Text to Open HTML file in Chrome on build


Many times I use Sublime Text as my GoTo text editing tool for not so serious scripting and want it to html files in Google Chrome on build. Here I’m sharing the steps how I made it work. You first need to create a “Build System” called by Sublime Text in order to achieve this purpose. Build Systems are JSON files having extension name as “.sublime-build“. It allows you to run external programs from within the editor.


As the Sublime Text Unofficial Documentation –“Build systems let you run your files through external programs like make, tidy, interpreters, etc.”


Coming to the actual point of this post, to create a build system to run your HTML files in Google Chrome on build: follow the steps below:


I’m using Sublime Text 3 and running Windows 7 OS.


1. Start Sublime Text > Goto Tools > Build System > New Build System:


2. It will open a file named “untitled.sublime-build” looking like picture below:



3. Find “Google Chrome” Programs > Right click on  Properties > Copy the full path of the application, it will look like this:

“C:UsersYourUserNameAppDataLocalGoogleChromeApplicationchrome.exe”

YourUserName” is your user account name under which you’re working in Win 7 OS.

4. Modify the contents of new sublime build file as below and save as “Chrome.sublime-build”. By default it shows the build directory that should be:


“C:UsersYourUserNameAppDataRoamingSublime Text 3PackagesUser” 


If you see any other folder, please ensure and change it to the folder above otherwise Sublime Text will not be able to see and use this build system.


And Yes, don’t forget to escape the backslash in the path! (highlighted in violet in picture below)



5. Now as you have saved he build system as “Chrome.sublime-build” in Build Systems directory, it will now show up in “Build System”, select it:


You’re all done now. Just open any html file or write and save new file as html and press “CTRL+B” or Goto Tools>Build and it will open the HTML file in Google Chrome.

Thanks for reading! Hope you enjoyed this article. 

What is an Echo Server?


A server that returns back the data whatever it receives, is called an Echo Server. This is the same as you call a name in the mountains and hear it returned back or you have echo facility in various sound systems where you can hear your voice returned back.

How to use Server.MapPath in ASP.NET MVC 4?

You can use Server.MapPath in ASP.NET MVC 4 like this:

String path = HttpContext.Current.Server.MapPath(“~/myFolder/myFile.txt”);

You can use the way mentioned above but ASP.NET MVC 4 has another way to map files on server  and that is using HostingEnvironment class. Actually Server.MapPath() also internally calls HostingEnvironment.MapPath() to map the file paths on server. It belongs to the  System.Web.Hosting namespace. SO you can use it like this:

using System.Web.Hosting;
String path = HostingEnvironment.MapPath(“~/myFolder/myFile.txt”);

It is more recommended because its static and not dependent on current context unless you want it to use.

Thanks!


“rem” units in css

Well, if you’re a designer, web developer, you must be aware of rem units. In this post we will go through the basics and learn how to use it. First, lets go through the little basics for those who are not aware of the “rem” unit.
As per the specs, we have two kind of Distance Units or the Length type:
  • First one is Absolute lengths, i.e.: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
  • Second one is Relative lengths having two sub categories:
    • Font-Relative lengths: “em”,”ex”,”ch”,”rem” units &
    • Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
For example, observe this CSS rule:
It specifies that every element in the body will have a font-size of 50 pixels and Div element will have a font-size of 0.5emmeans half of its parent. So, let’s see how it affects your styling in below example:
You can see here, that every inside div is inheriting the font-size length from its parent div. Here pixels (“px”) is an absolute length unit whereas “em” is relative. To mitigate this problem – Rem unit has been introduced.
The “rem” unit is for “root em”. What “em” unit does is, it inherits the length from its immediate parent element and then scale it on the given ratio. This one is not relative to its parent but to the root.
If you just replace the em to rem in sample CSS rule above and see the change in Output:
OUTPUT:

Scaling document elements

You can use rem to scale some elements in a document while leaving others in place. It provides a way to specify lengths as fractions of the root element’s font size. In practical terms, this almost always means the font size of the element. The most obvious use for rem is replacing em to protect inner element font sizes from being changed by outer elements, thus avoiding the classic nested em scaling problem. Let’s look at how rem works and how it differs from the em unit. An em value is calculated against the font-size of a current element, so boxessized with it will consequently scale as font sizes are adjusted by the element or its ancestors. Meanwhile, rem is defined as the font-size of the root element. So, all references to rem will return the same value, regardless of ancestor font size. In effect, rem is a document-wide CSS variable.
Q. Why should you bother?

A. Well, let’s say you want to enlarge everything on your site as soon as it exceeds a certain width limit. With everything rem you just set the font-size of the tag to 120% and, magic, everything is 20% bigger. But what to do with everything px in this case? Good luck with that! Make a media query and overwrite every single element that is supposed to be larger? No way!
Also, it’s a much better option than “zoom”ing as zooming isn’t as easy as it looks. By increasing the single “root em” font-size, all our elastic pixels increase!

Hope you find this post useful. Thanks for reading 🙂