Add Bootstrap sass(scss) to Angular 2

 

  1. Update .angular-cli.json ( which is in root folder of your Angular2 application) for
    1. “styleExt”: “css” to “styleExt”: “scss”
    2. “styles”: [
      “styles.css”
      ] to “styles”: [
      “styles.scss”
      ]
  2. Update the styles.scss in src folder ( create if does not exist) for adding lines
    1. @import “./assets/bootstrap-sass/variables”;
      @import ‘../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap’;
  3. Install bootstrap sass module npm install –save bootstrap-sass
  4. Copy _variables.scss file from node_modules/bootstrap-sass/assets/stylesheets/bootstrap to src/assets/bootstrap-sass folder.
  5. (Optional) Update the above file src/assets/bootstrap-sass/_variables.scss for bootstrap customization.
  6. Run ng serve to compile the Angular2 application and see the changes in browser.

 

 

Note:

You may need to update src/assets/bootstrap-sass/_variables.scss for fonts path,

Change

$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../fonts/bootstrap/”) !default;

to

$icon-font-path: if($bootstrap-sass-asset-helper, “bootstrap/”, “../node_modules/bootstrap-sass/assets/fonts/bootstrap/”) !default;

 

 

Getting Started with Angular2 and Bootstrap

Getting Started with Angular2 and Bootstrap

# Install Angular2 Cli
npm install -g @angular/cli

# Create new application
ng new application-name

# Start serving application, see browser localhost:4200
ng serve

# In src directory, install bootstrap using bower
bower install bootstrap –save

# Link bootstrap style to application, edit .angular-cli.json
# add new element to app->styles array
“bower_components/bootstrap/dist/css/bootstrap.min.css”

# Stop and again start serving the application and it is ready!

JavaScript “this” at simplest level

In JavaScript “this” thing confuses the beginners as well as experienced ones sometimes. There is lot of stuff on Internet (may be like this one) and almost each book on JavaScript emphasizes on explaining “this“.

Here lets go through very simplest definition (though informal one) which can help us in understanding “this“.

this” is a reference to object to which enclosing method belongs and if there is no enclosing method “this” is global object “window“.

Examples

1. In global context, without enclosing function
console.log(this);
// window….

Here “this” is in global context hence simply it is nothing but reference to “window” object.
2. In global context, within enclosing function

function foo(){
     console.log(this);
}

foo();
// window

Here “this” is in enclosing function which belongs to global object “window” (you can call window.foo() here),
hence here “this” is “window”.

 

3. In enclosing function which is method of some object.

var foo = {
    bar: function (){
        console.log(this);
    }
};

foo.bar();
// foo

Here “this” is in enclosing function “bar” which belongs to object “foo”, hence “this” is a reference to “foo” object.

 

4. Another varient of #3, but with one more level of nesting

var person = {
    name: “Sachin”,
    showName: function () { console.log(this.name); },
    employee: {
        name: “Web Develoepr Sachin”,
        showName: function () { console.log(this.name);}
    }
};

person.showName();
// Sachin

person.employee.showName();
// Web Developer Sachin

Even if this example shows nesting here, but if we simply follow our informal defination “person.showName” method’s “this” is “person” object and “person.employee.showName” method’s “this” is “employee” object.

 

Let me know your comments.

Happy coding 🙂

How to add sass syntax highlighting for sublime

When you are on sublime editor window,

  1. Enter Ctrl  + Shift + P, it will open command window for sublime.
  2. Type “Install Package Control”
  3. Click command “Install Package Control” form the list, it will install the package control for your sublime.
  4. Enter Ctrl + Shift + P, to open the command window. (Select Install Package)
  5. Enter the “sass” to search the sass support packages
  6. Select the appropriate one and click the package to install.
  7. Your done!, you can use these steps to install any package/support for sublime e.g. jade highlighting

Happy coding…. 🙂

Better angular js validation messages using jquery validator

Angularjs validation messages requires you to

  1. Add lot of html markup
  2. Add validation rules to your html markup.

For simple, short forms this might be good but for big forms and regular use it will not fit. It makes html markup complex, making it hard for user to understand the form validation rules, change messages.

Before angularjs, in the time of jQuery plugins world, there was a plugin (and still exists) used for validations called jQuery Validator. This plugin allows you to keep rules, messages in single javascript object which is very easy to maintain. It also provides good range of validation rules along with custom rule creation.

This jQuery validator plugin can be used in angular js(the angular way), here it is Angular jQuery Validator.

Please see the documentation for how to get started.

It makes validation task really easy and manageable.

Handle write permissions in ubuntu for uploads or code generators

Usually we need to change directory/file permission to able to write files. This may be for uploads directory or code generation tool. But most of the time some developers do bad thing, that the give permission 777 to the directory/file and get work the done.

sudo chmod -R 777 /path/some-directory

Here the script which throws the write permission error, now executes smoothly as it has got the 777 permission. But here we compromised serious security risk. Permission 777 means that is read/write/execute to everybody in the system, thus creating loop hole for security.

Instead of assigning permission 777, we can assign 775 and add the user who runs the script(which thrown the permission error) in the user group of the directory/file.

Following command adds given user (userName) to particular group (groupName)

sudo usermod -a -G groupName userName

Above will add user which runs the script to the group of users of directory/file which need write permission. Here I am assuming that your directory/file already has write permission i.e. user group has writable permission. You can also check members of user group from file “/etc/group”.

For web applications where Apache is the web server, you can add “www-data” to group of users. For PHP yii framework you need to set writable permission to some directories while development so that code generators can work.

This was just to give alternative way(good) to the developer who quickly give 777 permission to avoid/fix permission error. There are many more things you need to care when you think from security aspect. Avoid globally write is surely one of them.

Happy coding 🙂

 

 

Some ref.

https://help.ubuntu.com/community/FilePermissions
http://askubuntu.com/questions/79565/add-user-to-existing-group
http://www.cyberciti.biz/faq/linux-list-all-members-of-a-group/

Javascript string functions

Knowing string functions is always useful and saves time to Google the correct function. Hence I have prepared list of most useful, usually used string functions.

First of all definition of String

In computer programming, a string is traditionally a sequence of characters, either as a literal constant or as some kind of variable.

In JavaScript context it inherits prototype of String object.
A string can be any text inside double or single quotes.

List of almost all kinds of string manipulations.

Creating a String:
var name = new String (“sachin”)
Or simply
var name = “sachin”

Changing a String
Replace
name.replace(“in”,”out”)
replace replaces first occurrence only.

Change case
name.toUpperCase()
name.toLowerCase()

// Custom title case function

Concat
var fullName = name + ” ” + “Gaikwad”
or
var fullName = name.concat(” Gaikwad”)

Stuff String or Char
name.substring(0,3)+”123″+name.substring(3,name.length)
//sac123hin
// No direct method to stuff string/char in string

Stat- counting

chars
name.length

words
name.split(” “).length

Char at position
name.charAt(0) //s

Check Substring
name.includes(“chi”) // true

Get first occurrence index or last occurrence index of other string resp.
name.indexOf(“sa”)
name.lastIndexOf(“hi”)

Extract another string 
name.slice(2) // chin

Trim whitespace
name.trim() // removes whitespace ” sachin ” to “sachin”

 

Export/Import from/to other data type

Array
name.split(” “) // gives array
nameArray.join() // gives string

Number
parseInt(“123”)// string to integer
parseFloat(“12.3”) // string to float
“”+123 // number to string

 

Auto Slug field in Django

While designing database, many times we need slug field which we populate from some other field of the same model.

We can set auto slug field so that we don’t need to code in order to populate slug field while insert or update.

You can use the field AutoSlugField from module django-autoslug.

1. Install module django-autoslug.
pip install django-autoslug

2. Import in models file where your model exists.
from autoslug import AutoSlugField

3. Set field in model
E.g.
title = models.CharField(max_length=100)
slug = AutoSlugField(populate_from=’title’,default=None)