Bootstrap Style Gradient Button Set

Coded bootstrap style gradient buttons. May help somebody
https://codepen.io/anon/pen/dWVwVE

Developing Nodejs App Using Eclipse

Until today I was doing npm init to initialize my nodejs project and install dependencies. But I have figured out way to write nodejs code using my favorite tool eclipse.

There is a plugin called Nodeclipse which will help you to do that stuff. I will go through step by step to run first nodejs project using elipse.

Installing Nodeclipse to your existing eclipse tool

Open your eclipse marketplace. 

HELP >> Eclipse Marketplace

Click on "Install" to install your plugin.

Restart your eclipse

Deploying Express Nodejs Application

Once you restart you eclipse, create a new nodejs project or new nodejs Expressjs Project. In my case, I have created Nodejs Expressjs Project.

Now, right click on the app.js view, select run as Nodejs Application. Your nodejs app is up and running with your favorite tool eclipse.

Emailing Only Summary of Blogger Post Using Feedburner

Created email subscription using feedburner and delivering emails but you need to send only summary of the post. I know, when I have created the same, I use to deliver the complete post to my subscribers initially.

In the below description, I will show you how to send your feedburner emails with only the summary.

Feedburner Feeds

Goto https://feedburner.google.com/fb/a/myfeeds and click on the feed link you want to send emails with only summary of the posts.

Feedburner Optimize

Visit Tab "Optimize"

On the left navigation menu, go to Summary Burner as shown in the below image.

Select the maximum number of characters you want to put as summary in the email posts and now make the service active.

How to get your github repository to windows desktop app ?

I have created a git repository using web browser and I was wondering how do I sync with local directory. This small tip will help you get your github repository downloaded to your local machine.

I will go through two steps, if you have already created repository on github, just go directly to second step.

CREATING GITHUB REPOSITORY

This is so simple. 

Visit your user area on github something like https://github.com/mannemvamsi

Go to the tab repositories and then click on "New " button which will create you repository you like.

PULLING THAT REPOSITORY TO YOUR LOCAL DESKTOP APP

Click on the "+" symbol on the top left of your desktop github app.

It gives you three options. 

1. ADD
2. CREATE
3. CLONE

You need check the option clone just like the picture shown here below




The list will refresh with the ones available on the github browser page.

Now, you can simply check on the repository you have created and say clone. This will fetch the github repository.

Making a fullscreen image slider

We already know videos in webpage offers a button to make the video view-able in full-screen mode. It will be really nice if we can make our high quality image slider to be presented in full-screen.

In this small tutorial we will see making the slider full-screen.

To make my demo easy, I took basic image slider from bootstrap.

Making a responsive navigation without any additional css framework

This small tutorial will show you how to create a simple responsive navigation that works for any device.

Making a hamburger icon with pure css

Hamburger icon is used across all platforms, initially people were using it for mobile devices but now it is used on regular websites as well for indicating menu.

Since this hamburger icon spread ed across all devices and everybody knows what that icons means -- something hidden in there (i.e menu) or some options, So, I spent few minutes to code that with css.

Serving first HTML with node.js

Last week I have written hello world with node js i.e how to write first javascript file on the server side and how to execute it with node.js

In this tutorial, we will see how to start our own server and throwing first html with it. This is achived in two steps

Few interesting arts with sketch.js

I just found these interesting arts with sketch.js. This minimal footprint javascript library lets you to code fun things in your web designs.

You can do unlimited things with sketch javascript library.

Below are few examples done with sketch.js

Pulling your data attributes using CSS pseudo property

I learned this recently and have been using it frequently, getting the html data attributes to content using css pseudo properties.

In this article, we will actually see how to control position of an element using css and also getting the data attribute using css content property.

Do not make your webpage to load all images at once. Tip to speed up website

User experience is very important aspect in making a web application. One of the important factors is improving your website page load time. Where do many applications fail to make good user experience ?

•  Trying to load lot of content at once.
•  Loading higher dimension ed images than required by your styles
•  Loading images before even they actually require on the screen.

Amazing Javascript work done by this website

Google has released an amazing tool to look top costume searches happening for this Halloween. The CSS effects with javascript are interesting. Thought of sharing this.

This kind of presentation would be possible with javascript library Threejs .

How to Remove browser default css styles

Removing default browser styles is very important in our web design or development.

Many of the beginners wonder why there is a little bit of margin on the left side or styling the navigation list will not result as expected. The reason is each browser will have some set of predefined styles applied to our html web page.

Hello World with node.js

I have been hearing a lot from programmers about node.js. A server side javascript framework which can accomplish all the server side tasks. Lets see how to use node.js

Control elements visibility with bootstrap css

There is no doubt that bootstrap is one of the best css frameworks that are available today. It has lot useful css classes that make our web development easy.

In this small article I am explaining about hide elements with bootstrap css classes

 Hide on screens less than 768px width

.hidden-xs

 Hide on screens width between 768px(include) and 992px(exclude)

.hidden-sm

 Hide on screens width between 992px (include) and 1200px(exclude)

.hidden-md

 Hide on screens width anything above or equal 1200px

.hidden-lg

Simple demo for this is available here http://jsfiddle.net/mannemvamsi/x7dy3mcf/

Floating your sidebox between two points, Inspired by Google

I have seen google pagespeed insights floating the mobile or desktop screenshot on the sidebar between only certain points.
I just figured it out how to do it. And here is the tutorial explaning to make your website sidebar widget float between two limits.

Offer something when user is moving out of your page

What most of the publishers are doing to convert their new visitors as returining visitors? They offer something when users visit the site.
Now, when do they offer discount or free stuff, it depends from business to business, either when user spends some time on a page or
user visiting couple of pages or when he/she is leaving the website.

Sidebar Navigation of smashing magazine style

I thought it will be hard to implement such beautiful navigation. I was wrong about that. This smashing magazine style left navigation is implemented with just HTML and CSS.

How to create a simple login form of paypal style

I am a paypal user and I login to my account at least once in a week. The new login interface is very modern and attractive. Hence decided to share the code to create one such login interface for websites.

Creating twitter desktop style header navigation

Twitter navigation is one of my favorite navigation styles. So I have tried replicating the same navigation, which seems good and tested with the browsers Chrome, firefox and Microsoft Edge.