Category Archives: Tutorials

How to delete node_modules folders.

Let us agree, we all have been there once in a while, messing up our hair while removing these long path issue with node_modules.

For a while, I used to copy paste nested npm folders outside and try deleting again and again until I delete them all. I googled around and found few other tricks that does the job fairly, but after being so used to of Node workflow, I happen to find the easiest way. So here we is what you have to do.

Enter npm prune

All you got to do is remove the node_module listings from your package json and the run `npm prune`

Lets say your package.json looks like this:

Screen Shot 2015-12-08 at 3.25.55 AM

Remove everything or may be just any particular npm which you wish to remove. Take an example, we wanted to remove all of it – then I would simply empty the dependencies like:

Screen Shot 2015-12-08 at 3.27.40 AM

Then run “npm prune” and voila. NPM will unbuild all of the node_modules folder which it didn’t find in the package.json but did locate in drive.

How to set Cookies to share across all subdomains using JavaScript

Browser Cookies, is a very handy feature that enables us as a web developer to do so many interactive programming. Recently since HTML5 raised up, its Web Storage is replacing this feature. But there is one area where Web Storage fails to achieve the result – subdomain access. There we have to again jump back for old school document.cookie method.

In this very quick tutorial, lets discuss how we can setup browser cookies that can be accessed from all subdomains and root domain. But proceeding further requires basic knowledge of cookies, and if you need to learn, Tutorial Point has good article on JavaScript Cookies.

Steps:

  1. Prepare the cookie name/value
  2. Get the top level domain and assign as .domain.com
  3. Set the path to root path=/
  4. Set Expires (optional)

Lets set up a example cookie. Example take as ‘Last time report generated’ to showup across subdomains.

//variables
var LastReportGenerated="Jul 11 2013",
baseDomain = '.cssjunction.com',
expireAfter = new Date();

//setting up  cookie expire date after a week
expireAfter.setDate(expireAfter.getDate() + 7);

//now setup cookie
document.cookie="Report={'ReportName':'MainReport', 'lastGenerated':" + LastReportGenerated + "}; domain=" + baseDomain + "; expires=" + expireAfter + "; path=/";

Major thing to take care here is:

Your domain must be in format of “.domain.com” – dot and root domain and your path=/ always. If you don’t setup your path=/, auto path will be saved as from where the cookies is being saved hence it wont be accessible across any subdomain.

You can try copy paste code above in the Console, and see the result in Resource Panel. If you happen to successfully run the script above, you will get a preview:

JavaScript Cookie

Now that ‘Report’ cookie should be available across all subdomains like = main.cssjunction.com, tuts.cssjunction.com etc.

CSS Icons for Better Web – Part I

Recently, I have been busy working on several mobile applications – both web and native apps. Most of them was User Centric and app was allowing them to set their own themes. This made my job as a CSS Developer a little trickier as I was using several icons with CSS sprites. Trying to come up with a better solution on how can I get rid of limited opportunity given by image sprites – I made a decision that CSS Icon should play the role here.

Here is why I chose to do the same:

  • Very first, it’s very best for performance as there wont be any HTTP request and
  • CSS icons are modular – we can reuse and remake/style it based on condition.

Today, I am going to share some of very basic icons – that we can create using CSS and use it right away- the way we wanted. This is a series of posts, will be posting more on coming days – more icons with CSS.

Mean time, you can check CSS3 Document Icon, written by me for Nettus+.

Quick Preview

Preview of CSS3 Arrow Icons

Above preview, if you try to produce by using image icon – you gotta use 4 different images. But if you write by CSS, NO IMAGE is required. Even if you need to change the color and you did use image, you will need another set of images with color changed in Photoshop and reusing – causing bit more load to your page. By CSS – you can have as many colors as your want – much more efficient, efficient – that’s why I called it – CSS Icons for better web.

How to  – Steps:

  1. A simple class with border on right & top – no background.
  2. Then Rotate it to different angles (45 for right, 135 for down, 225 for left and -45 for up.)

Lets Do it.

1. Any Element with Class .arrow

<i class="arrow"> </i>

Your CSS

.arrow {
    display:inline-block;
    width:7px;
    height:7px;
    line-height:7px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

Now create three more classes with different different rotation and apply to HTML along with the main class.

.arrow-down {
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.arrow-left {
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.arrow-up{
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

Changing the arrow color on HOVER, (See how easy – think what we used to do with images):

.arrow:hover {
    border-color:#444;
}

You can see the final preview here (See in Result Tab):

And Here is a useful demonstration, (using :after pseudo element instead of separate HTML element to keep markup clean and more semantic) (See in Result Tab):

Top 5 Articles on HTML5 Audio Video

Learn HTML5 Audio Video

1. Everything you need to know about HTML5 video and audio

Here, Simon Pieters, from Opera, will walk you through everything basics you needed to know about HTML5 Audio & Video features. He says:

This article aims to provide all the nitty-gritty details of HTML5 media, the DOM API, events, and so forth, so you can implement your own HTML5 player with fallback to old browsers.

2. HTML5 Audio and Video: What you Must Know

Bruce Lawson talks on Nettuts+ about must know facts regarding HTML5 Audio/Video.

3. Getting started with the HTML5 Audio Video API

Very quick & a short article to get you started on making your own media players on HTML5 Video.

4. Using HTML5 Video and Audio in Modern Browsers

This time, in-depth learning on API, learn about browser fall back & how to handle those legacy browsers – from SitePoint.

5. How to Make Your Own Video Player On HTML5 Video

Once again very depth article. This article will take you thoroughly on how you can create your very own media player using HTML5 Audio & Video.

That’s it. Hope you will learn from very basic to creating your own full functional media players. Happy coding!

PS: Image used in this post banner is taken from 356PSD.com