allowed memory size of 134217728 bytes exhausted

In Magento 2, When you are trying to trigger  “di:compile” command in DOS command prompt, normally you will get fatal error: allowed memory size of 134217728 bytes exhausted

How to solve Fatal Error: allowed memory size of 134217728 bytes exhausted

Open your php.ini file and increase the memory_limit= 128M to memory_limit= 512M

Note: Don’t forget to restart your local server. Please restart your server.

Advertisements

Grunt

1) What is grunt?
Grunt is javascript task runner that does thinks that you would do normally with your code.
For example: Normaly when you develop the code and upload it to the server. Your first moto is to make your site faster. for that you minify your css file and js file. Normaly you copy your css code and paste it to the third party website that will
minify your css and js file. Each time, each file you have to copy and paste your code and need to minify it. This process is time consuming. Grunt solve this problem.

2) How to Install Grunt?
Following are the steps to install grunt
a) install node.js
– Go to https://nodejs.org/en/download/
– Download and install nodejs
b) install grunt-cli
– Go to command prompt and install grunt command line interface.
– command: npm install -g grunt-cli

3) Preparing a new grunt project.
– Create a grunt folder on desktop
– open command prompt and go to your project
– create package.json with following command
– Command: npm init
– enter name, version, author information
– Need to save with next command: npm install grunt –save-dev
– You will see node_modules folder created in your project directory with all installed grunt modules

Note: If you see error “Failed to parse package.json data” then clean npm cache with following command: npm cache clean

4) gruntfile.js
gruntfile is where you would register and load all of your plugins, all of your plugins will ran when you type command in
commandprompt (command: grunt)
You will get fatal error message when you type command grunt because yet you have not create gruntfile.js file in your
project directory. Create a file gruntfile.js with following basic code.

module.exports = function(grunt){
    grunt.initConfig({

    });
};

5) What are plugins ?
Plugins are like robots. You can think plugin are like as a robots. When you want to minify css their is one plugin in grunt (cssminify). This plugin will minify all css files and save your time.

6) Installing plugin in grunt
– Go to grunt website and find link for plugin
– Find plugin which you want to install. We are going to install cssmin plugin.
– Type next command: npm install grunt-contrib-cssmin –save-dev
– Above command will install cssmin plugin into your node_modules folder. Also your package.json file is updated.
– Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
– Command: grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
– so your gruntfile.js will look like

module.exports = function(grunt){
    grunt.initConfig({

    });
    grunt.loadNpmTasks('grunt-contrib-cssmin');
};

– This code will load our plugin

7) How to use grunt plugin
– It is very easy to use plugin. some times it is easy and some time it is hard to use. We have installed cssmin plugin.
it is very easy to use. Now, in your gruntfile.js add following code.

module.exports = function(grunt){
   grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
     cssmin:{
       options:{

       },target:{
       files:{
       'output.css':['style.css', 'reset.css']
       }
    }
}
});

     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.registerTask('default',['cssmin']);
};

– Go to command prompt and run command: grunt
– You will see output.css will be created into your project directory.

Assignment: Create CSS folder and add two css file in that folder and generate output.min.css in that css folder using cssmin plugin

Solution:

module.exports = function(grunt){
    grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
    cssmin:{
      options:{
       },
       target:{
         files:{
              'css/output.min.css':['css/reset.css','css/style.css']
       }
    }
  }
});

    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default',['cssmin']);
};

Why you need a build system

What should a build system do
A) Repetative Tasks
– Concatenating JavaScript
– Prefixing CSS
B) Utilities
– JSHint
– Uglify(compress/minify) JavaScript
C) Local Server
D) Live Reload

GRUNT – GULP – BRUNCH

Why is this good for you ?
– Less file requests for page load
– Faster file requests

Development workflow
– You can use cool technologies
– You can break code into multiple files
– Easier to avoid code conflicts
– You can avoid annoying, repetative tasks

*** Registering Tasks  ***

You can register task with following code.

grunt.registerTask('speak',function(){
console.log('I am speaking');
});

You can run this task with command: grunt speak

grunt.registerTask('read',function(){
console.log('I am reading');
});

You can run this task with command: grunt read

grunt.registerTask(‘both’,[‘read’,’speak’]);

You can run this task with command: grunt both

 

*** Plugin ***
1) grunt-contrib-concat
2) grunt-contrib-watch
Note: To exit from commandprompt (watch) press ctrl + c

3) gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
    cssmin:{
          target:{ 
            files:{
           'dist/css/styles.css':['css/style-1.css','css/style-2.css']
          }
       }
    },
   concat: {
       js: {
         src: ['js/file-1.js', 'js/file-2.js'],
         dest: 'dist/js/scripts.js',
       },
       css: {
       src: ['css/style-1.css', 'css/style-2.css'],
       dest: 'dist/css/styles.css',
      }
   },
   watch: {
     js: {
     files: ['js/**/*.js'],
     tasks: ['concat']
   },
    css: {
    files: ['css/**/*.css'],
    tasks: ['concat']
  },
 }

});

grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default',['cssmin']);
grunt.registerTask('default',['concat']);
grunt.registerTask('default',['watch']);

};

Error filtering template: Magento 2

Error filtering template: Unable to write file into directory /E:/xampp/htdocs/magento216/pub/media/catalog/product/cache/f073062f50e48eb0f0998593e568d857/m/b. Access forbidden.

Description: After installation of magento 2 with sample data, If you see above error then you can solve this issue with following way.

Go to your project directory : in vendor/magento/module-catalog/Model/View/Asset/Image.php file and replace all occurrences of DIRECTORY_SEPARATOR with ‘/’.

The second is edit the getRelativePath function to look like:

private function getRelativePath($result)
{
    $prefix = $result == '/' ? $result : '';
    $result = $this->join($result, $this->getModule());
    $result = $this->join($result, $this->getMiscPath());
    $result = $this->join($result, $this->getFilePath());
    return $prefix . $result;
}

 

SASS Responsive

When you are designing web page using SASS or any other css techniques. You should have to design it for all the devices. Devices have different width and height. Create a separate file _devices.scss and define the standard width in following way:

$desktop-xl: “(max-width: 1200px)”;
$desktop-max: “(min-width: 1024px)”;
$desktop-min: “(max-width: 1024px)”;
$tablet-max: “(min-width: 768px)”;
$tablet-min: “(max-width: 768px)”;
$small-device: “(min-width: 568px)”;
$mobile-device: “(max-width: 568px)”;

How to use above media queries in SASS?

.header{
    @media #{$tablet-min}{
        width:100%;
   }
}

SASS List

SASS List: Lists in Sass are kind of like an arrays, but not.

Defining a list
$cars: “TATA” “Toyota” “Maruti” “Mahindra” “BMW”;
$cars: TATA Toyota Maruti Mahindra BMW;
$cars: TATA, Toyota, Maruti, Mahindra, BMW;
$cars: “TATA”, “Toyota”, “Maruti”, “Mahindra”, “BMW”;

The lists can be nested:

$prices: TATA 55000, Toyota 100000, Maruti 300000, Mahindra 500000, BMW 2000000;

OR

$prices: (TATA 55000) (Toyota 100000) (Maruti 300000) (Mahindra 500000) (BMW 2000000);

Indexing starts at 1, not from 0, as in all other programming languages.

Everything is a list, variables, booleans, strings, anything.
This means, that list functions can be used on, say, strings:

$thing: “My name is surya”
length($thing) # Length is 1

# Drop out quotes, it’s a list
$thing: My name is surya;
length($thing) # Length is 4

List functions

Name Description
length($list) Returns the length of a list.
nth($list, $n) Returns a specific item in a list.
set-nth($list, $n, $value) Replaces the nth item in a list.
join($list1, $list2, [$separator]) Joins together two lists into one.
append($list1, $val, [$separator]) Appends a single value onto the end of a list.
zip($lists…) Combines several lists into a single multidimensional list.
index($list, $value) Returns the position of a value within a list.
list-separator(#list) Returns the separator of a list.

Accessing a list
Let us consider our cars list.
$cars: TATA Toyota Maruti Mahindra BMW;

To access an individual node of a list, use the nth() function:
nth($cars, 1)
// Results in TATA

Negative index values address elements in reverse order, starting from end.
A good trick if you need to get the last node in a list:

nth($cars, -1)
// Results in BMW

Access list with for loop

@for $i from 1 through length($cars){
.cars-#{$i}{
    &:after{
       content: "#{$i}. #{nth($cars, $i)}";
      }
   }
}

Accessing nested lists

$horses: pony #995533,horse Red,mini-horse #222,maxi-pony #882233;

It has name color pairs, in a way it looks a bit like an associative array, but it’s not.
It’s nested list, a different data type.Here’s a cool use case for it:

@each $horse in $horses {
.horses--#{hth($horse, 1)} {
        background-color: url('#{nth($horse, 2)}');
        background-image: url('img/horse-types/#{nth($horse, 1)}.png');
     }
}

SASS basic syntax

SASS Basics

  1. Variables in SASS
$font-stack:    Helvetica, sans-serif;
$primary-color: #888;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Output:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. Partials
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

For example: _header.scss, _footer.scss

4. Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.

Let’s say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Note: When you import a file you don’t need to include the file extension .scss. Sass is smart and will figure it out for you.

5. Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here’s an example for border-radius.

SCSS Syntax:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

6. Extend/Inheritance
Using extend you can inherit properties. This is most useful feature of the SASS.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
} .error{ @extend .message; border-color: red; }

7. Operators:

SASS also supports arithmatic operators like ‘+’, ‘-‘, ‘/’, ‘%’, ‘*’.
$full-width: 100%;
$col-50: $full-width – 50;
Assignment: Create simple grid layout using operators.

8. SASS List

$colors: "red" "green" "blue" "orange";
$colors-with-comma: "red","green","blue","orange";
ul {
    @each $color in $colors {
        li {
            &:nth-child(#{index($colors, $color)}) {
                a {
                    color: #{$color};
                }
            }
        }
    }
}

9. SASS For loop

$cars: Tata BMW Tavera Swift;

@for $i from 1 through length($cars){
.cars-#{$i}{
    &:after{
      content: "#{$i}. #{nth($cars, $i)}";
     }
   }
}

Output:

.cars-1:after {
content: “1. Tata”; }

.cars-2:after {
content: “2. BMW”; }

.cars-3:after {
content: “3. Tavera”; }

.cars-4:after {
content: “4. Swift”; }

SASS Installation on Windows

SASS Installation on Windows

Browsers can’t interprete scss files. Browser can interprete only .css files.
You need to install SASS which will convert your scss file into .css file.
There are so many applications are available on the  internet which will generate .css code from .scss.
Some of them are free and some are paid in versions.
1) CodeKit (Paid)
2) Compass.app (Paid, Open Source)
3) Ghostlab (Paid)
4) Hammer (Paid)
5) Koala (Open Source)
6) LiveReload (Paid, Open Source)
7) Prepros (Paid)
8) Scout (Open Source)

You can try with above applications.

My favourate way is to install sass through command line.
Windows users can use following steps.
** Installation **
– Install the Ruby from http://rubyinstaller.org/downloads/
– Open CMD
– Type in “gem update –system”
– Type in “gem install sass”
– Check with “sass -v”
– Enjoy

Go to your project folder and trigger following command
sass style.scss output.css
This command compile and generate your scss file to output.css
Note: Go to your CSS folder

sass –watch style.scss:output.css
This command watches your scss file change
Note: Ctrl + C stop watching your scss file

If you have a directory with many Sass files, you can also tell Sass to watch the entire directory:

sass –watch app/sass:public/stylesheets

 

Learn More

Functions

Functions:
Less provides a variety of functions which transform colors, manipulate strings and do maths.

@background-color:red;
div{
    width:100px;
    height: 100px;
    background-color: @background-color;
    &:hover{
        background-color: fadeout(@background-color,50%);
    }
}

Operations

Operations:
You can do basic math operations to numerical values and colors. Lets say we want to have two divs placed next to each other, the second one being twice as wide and with a different background.

@div-width:200px;
@bg-color: #999999;

div{
    display: inline-block;
    height: 150px;
    border:1px solid red;
}
.left{
    width: @div-width;
    background-color: @bg-color;
}
.right{
    width: @div-width * 2;
    background-color: @bg-color - 300;
}

Note:

@base: 2cm * 3mm; // result is 6
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

Nesting and Scope

Nesting and Scope
Nesting can be used to structure your stylesheet in a way that matches the HTML structure of the page, while reducing the chance of conflicts. Here is an example of an unordered list and its children:

Example:

You can also use pseudo-selectors with your mixins using this method. In following example (& represents the current selector parent):

/* Nesting */
ul{
    background-color: #333;
    list-style-type: none;
    padding: 10px;
    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
    a{
        text-decoration: none;
        color: #000;
        padding: 5px;
        display: block;
        &:hover{
            color:red;
        }
    }
    
}

/**************** Scope ************************/

Just like in programming languages, in Less variables receive their values depending on the scope.
If the value isn’t specified in the specific scope, LESS will look for it in upper blocks until it finds the nearest declaration.

/* Nesting and scope */
@text-color:green;
ul{
    background-color: #333;
    list-style-type: none;
    padding: 10px;
    @text-color:orange;
    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
    a{
        text-decoration: none;
        color: @text-color;
        padding: 5px;
        display: block;
        &:hover{
            color:red;
        }
    }    
}

Nested Directives and Bubbling

Directives such as media or keyframe can be nested in the same way as selectors. Conditional directives e.g. @Media, @supports and @document have also selectors copied into their bodies.

.screen-color {
  @media screen {    
    @media (max-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: olive;
  }
}

Output:

@media screen and (max-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: olive;
  }
}

Remaining non-conditional directives, for example font-face or keyframes, are bubbled up too. Their bodies do not change:

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

Output:

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}