Front-end Development

From Gulp to Webpack

by ALKAL on January 24, 2018 , No comments

The phrase “New Year, New Skills” is not just another buzzword, it is a critical aspect for every professional, also for me. I have already create a list of skills that I will try to gain into 2018 and I wish to achieve my target. I wish the same for you, too.

Firstly in my list is no other than Webpack 2. It is true that I’ve been avoided it for long enough, as I had been using Gulp in my daily workflow. Therefore, I found out it could do the same things as Gulp does. Even though Webpack can do almost the same things as Gulp does, the main difference is that Webpack can bundle javascript assets into a single, deliverable file. However, since its release it has been evolved into a manager of all front-end code. As a consequence, Webpack give me the ability to make the build process easier by passing dependencies through Javascript.

My Basic Webpack Workflow

Open up a terminal/command prompt, cd into the ‘webpack-starter’ directory and run

$npm init –y

The `-y` answers yes to all the questions npm asks during setup. This creates a `package.json` file in the root directory.

Now install ‘webpack’ and ‘webpack-dev-server’

$npm i -D webpack webpack-dev-server

‘webpack-dev-server’ is similar to ‘gulp-webserver’ in the sense that it creates a server to test on. Open the package.json file and add a new line in the scripts section to run the ‘webpack-dev-server’;

"scripts": {
    "test":"echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server",
    "build:prod": "webpack -p"
}

This allow you to start the server by typing ‘npm run build’ in the terminal. If you work with different teams and across projects, maybe there are different webpack versions installed. Adding the –p flag and typing ‘npm run build:prod’ set the local version of webpack in production mode and run uglifies/minifies scripts.

Once you have webpack installed, you’ll need to create at the root folder a webpack configuration file,named webpack.config.js, as following:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  
  entry: ["./src/js/index.js"],
  
  output: {
    filename: "js/index.js",
    path: path.join(__dirname, "dist")
  },
  
  module: {
     rules: [
         {
             test:/\.html$/,
             use:['html-loader']
        }
     ]
  },
  
  plugins: [
     new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
     })
  ]
};

The most important points of the Webpack configuration file are:

entry: it’s our main Javascript file where all of the application’s code gets imported

output: it’s the resulting Javascript file, bundled by Webpack

module and rules: it’s the place where you configure the loaders

plugins: it’s the place where you configure which plugins Webpack will use

A list of most-common loaders and plugins is the following:

LoadersPlugins
babel-loaderHtmlWebpackPlugin
style-loaderExtractTextPlugin
css-loaderCleanWebpackPlugin
sass-loader
html-loader
file-loader

To get started, my personal Github repo for this article is webpack-starter.

I hope that all the aforementioned are a helpful starting point to those who are hesitant to move away from Gulp and try Webpack. It true that it can take a little time to understand how to use webpack’s configuration, loaders and plugins but learning how it works you make the development process rapid and easy.

Finally, for further reading you can check the following resources:

Thanks for reading!!!

Continue reading >>
ALKALFrom Gulp to Webpack

Progressive Enhancement with Drupal: NO-JS Approach

by ALKAL on July 5, 2016 , No comments

As referred in GOV.UK documentation: “Progressive enhancement is a way of building websites and applications. It’s based on the idea that you should start by making your page work with just HTML, and consider everything else an extra […].Make any new web page or feature usable from the start with only HTML – no images, CSS or JavaScript, just HTML.”

As a consequence, at the process of front-end developing with progressive enhancement in mind, by thinking about your coding in layers:

Continue reading >>
ALKALProgressive Enhancement with Drupal: NO-JS Approach

Pure CSS3 Notepaper

by ALKAL on July 3, 2015 , No comments

Pure CSS3 Notepaper is a simple technique to present quotes or small written text on your website (or app).

In our case, I used Bootstrap, my lovely front-end framework and suitable css rules to give the effect of notepaper. More specifically, regarding Bootstrap framework, Collapse JS has been used to handle toggle behaviour, compatible with custom jquery script. Enjoy it!

It works perfectly in Webkit, Opera, Firefox and almost perfectly in IE (paper rulers are not presented).

css notepaper

View Demo

Continue reading >>
ALKALPure CSS3 Notepaper

GET URL Parameter using Bootstrap JS Collapse

by ALKAL on March 30, 2015 , No comments

Bootstrap JS Collapse provides base styles and flexible support for collapsible components like accordions and navigation. Some articles below [Bootstrap Multiple Expand/Collapse], I had present a custom jQuery script which based on the given Bootstrap JS Collapse script and actually it was extended with the famous feature expand/collapse all.

In this article, using again the Bootstrap JS Collapse script, I will provide a custom jQuery script that will get url parameter and define the current state of the collapsible element.

More specifically, if you use the accordion example code that is provided by Bootstrap framework, you will be sure that add aria-expanded to control the element. In our case, the use case scenario prescribes that the collapsible elements should be closed by default and only one collapsible element will be open every time regarding a custom url parameter.

The following code presents how I developed the above scenario:

Bootstrap JS Collapse  – Accordion Example Code

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
   <div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-controls="collapseOne">
           Collapsible Group Item #1
         </a>
       </h4>
     </div>
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">....</div>
     </div>
   </div>
 <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="headingTwo">
     <h4 class="panel-title">
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-controls="collapseTwo">
         Collapsible Group Item #2
       </a>
     </h4>
   </div>
   <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
     <div class="panel-body">...</div>
   </div>
 </div>
 <div class="panel panel-default">
   <div class="panel-heading" role="tab" id="headingThree">
     <h4 class="panel-title">
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-controls="collapseThree">
         Collapsible Group Item #3
       </a>
     </h4>
   </div>
   <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
     <div class="panel-body">....</div>
   </div>
 </div>
</div>

jQuery Script – Custom Code

     
     //Given a query string "?accPanel=collapseTwo"
    //$.urlParam("accPanel") will return "collapseTwo"
    $.urlParam = function(name){
       var results = new RegExp(name + "=([^&]*)", "i").exec(window.location.href);
       return results[1] || 0;
   };

   $(function(){

      //assign the retuern value to params variable
      var params = $.urlParam('accPanel');

      //on document ready open the respecrtivle collaspible element
      $("#"+params).addClass('in');
   }
Continue reading >>
ALKALGET URL Parameter using Bootstrap JS Collapse

Thoughts for Javascript Frameworks

by ALKAL on August 1, 2014 , No comments

Generally speaking, Javascript framework is the set of pre-written Javascript code that helps developers to create easier Javascript based applications. Using a framework, apps development becomes much easier using same blocks of code rather than to write the same line of code each time individually.

There are plenty of Javascript frameworks (and their communities respectively), which can be found anywhere on the web with having different type of working capabilities, according to the situation where they have been used. The selection of the best (and suitable) framework is really a tough job and it also requires the complete knowledge about the language so that one can find really useful stuff. Here [Comparison of JavaScript frameworks] you can find an extended analysis about of the most well-known Javascript frameworks.

Some of the most usage Javascript frameworks are Backbone, Ember.js, and Angular.js. Earlier today, I read the following interesting comment and I think that it was a nice food for thoughts and search about the weekend!

[Source of comment]

Continue reading >>
ALKALThoughts for Javascript Frameworks