Matching multiple BEM modifiers in Sass



Egghead Useful Free JavaScript Videos

configure eslint in project using webpack

First, you need webpack installed in your project and later go through this

Learn ESLint basics from very nice video tutorials by Andrew Mead

Configuring ESLint:


1. Create project using webpack.

2. Install loaders..

3. Set rules

4. Update package.json with lint scripts.

That’s it. You are done :).


$ npm install eslint-loader --save-dev

NOTE: You also need to install eslint from npm, if you haven’t already:

$ npm install eslint --save-dev


In your webpack configuration

module.exports = {
  // ...
  module: {
    rules: [
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          // eslint options (if necessary)
  // ...

ESLint Rules, Best Practices of AirBnb:


check this

For more check this commit.

Convert font icons to SVG Sprite Image

Today we will be converting font icons to SVG Sprite Image..

If you ask me how at this moment? i will say i don’t know :). Even i have to explore, learn and implement it.

Where we can get SVG icons?

From the reference from this article, i am able to generate SVG Sprite from SVG’s and applied my own css on top of it.

npm install and include SVG sprite loader:

$ npm install svg-sprite-loader --save-dev

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

Next, you’ll need to add a loader to handle your .svg icons:

Your full webpack config should look something like this:

const webpack = require('webpack')
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
  entry: {
    main: './public/src/js/main.js',
  output: {
    filename: './public/dist/js/[name].js'
  module: {
    loaders: [{
      test: /icons\/.*\.svg$/,
      loader: 'svg-sprite-loader',
      options: {
        extract: true,
        spriteFilename: './public/dist/img/icons.svg',
        runtimeCompat: true
  plugins: [
    new SpriteLoaderPlugin({
      plainSprite: true

Now that Webpack is configured to handle your icons, you’ll need to import each of them into your JS. You could do this manually, but to automate the process, you can use the helper function below to import them automatically.

function requireAll(r) {

requireAll(require.context('../path-to-icons/', true, /\.svg$/));

Run webpack and a new file called icons.svg will appear in your dist.

Finally, you can use the syntax below to reference an icon.

<svg class="icon">
  <use xlink:href="#my-icon"></use>

You can use CSS to style the outer SVG element like this:

svg.icon {
  fill: currentColor;

You can verify my github repo to understand it in better way.

Webpack Integration in AEM

This is purely taken reference from

Just for my understanding, reference i am having it in my post with my own words..

  1. Copy the example Webpack folder, .browserslistrc and .gitignore to ui.apps/src/main.
  2. Extend your project’s pom.xml.

Reference links:

FrontEnd Maven Plugin –

HTL Exercises links

Learn basics and advantages of HTL/Sightly is