webpack: difference between style-loader and css-loader

                                              i was doing webpack and wanted to add a css file to a page and so i went through the webpack way and wanted to implement this feature via webpack loader. There are basically two webpack loader both are used to together to accomplish this task

1.  First is style-loader 
2. Second is css-loader

This is my webpack.config.js file contents

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

module.exports = { entry: './src/main.js', output: { path: 'build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel', query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] } };

Here i used the 'style-loader!css-loader' (! represents pipe here) on line 19. The css-loader takes a css file and returns the css with imports and url(...) resolved & style-loader takes that css from css-loader ( reason they are linked via a pipe which is represented via ! on line number 19 ) and inserts it into the page so that styles are active on the page.

Installing CouchDB in Ubuntu 16.04

                                                      CouchDB is one of the main NoSQL databases out there. Installing couchdb in ubuntu is fairly easy. Just run these following commands or follow the video inside this post.

sudo add-apt-repository ppa:couchdb/stable
sudo apt-get update
sudo apt-get install couchdb

Installing brightness indicator in status bar of ubuntu 16.04

                                                   Hey guys just follow this youtube video you just have to run these three commands explained in the video to install a brightness indicator in you operating system.

sudo add-apt-repository ppa:indicator-brightness/ppa
sudo apt-get update
sudo apt-get install indicator-brightness

Ubuntu, Update, Upgrade, Dist-Upgrade

                                                                     Hey guys i just made a video on updating, upgrading and dist-upgrading ubuntu operating system in the following video.

sudo apt-get update
sudo apt-get upgrade
sudo apt-get dist-upgrade

                                                

Generating SSH keys and adding it to github.

                                                            So guys if you're on windows just like me and you are using git and want to push changes to remote repository on github without typing email and password everytime then first y'all have to generate SSH keys same as we generated in linux and then add the generated public key on the GITHUB account so we don't have to provide email password everytime we want to push something on github.

Just run this command to generate the SSH keys locally first.

ssh-keygen -t rsa -b 4096 -C "YOUR@EMAIL.com"

This command basically creates a directory named .ssh to go to this directory use this command.

cd ~/.ssh

NOTE Those two commands must be ran using git-bash.

After navigating into the directory you will find that it has three files.

1 2 3

id_rsa id_rsa.pub known_hosts

Only id_rsa.pub is of our use it is actually the public key and we have to upload the content of the id_rsa.pub file to this github link.

That's it. :D 

component relative paths instead of absolute path in angular 2

                                                                         So guys if you're using quickstart repo of angular 2 instead of ng-cli then many things you have to do yourself one of them is relative path of component html and stylesheets and you can do this simply by using moduleId in component like in the example shown below

1 2 3 4 5

@Component({ moduleId: module.id, selector: 'user-app', templateUrl: 'user.component.html' })

This will make the relative path work. I also added this solution as a stackoverflow answer. feel free to upvote.