ALKAL

Setting up Webpack for Bootstrap 4, Font Awesome and Material Design Icons

by ALKAL on February 15, 2018 , No comments

Nowadays there is a plenty of CSS front-end frameworks, but the number of really good ones can be narrowed down to just a few. Bootstrap is not only my unique and lovely framework, but undoubtable is the undisputed leader among the available frameworks today. It’s a wonderful toolkit on your way to developing responsive, mobile first projects on the web. Technically, it’s not something special than others HTML/ CSS/ JS frameworks (Foundation, Sematic UI, PureCSS etc.), but it provides many resources (third-party plugins, extension, theme builders and so on) than others. This main reason people continue to choose it.

Recently, Bootstrap 4 released with plenty of improvements to reusing and extending variables and general code cleanup. Bootstrap 4 documentation is quite detailed and able to enhance your productivity moving from Bootstrap 3 to the new version or simply trying to learn how to use Bootstrap. One of the most notable change is the drop of the Glyphicons icon font and if you asked me, I would answered, simply: “No problem”! Personally, I am a fun user of Font Awesome library and latest I am testing with Material Design Icons (powered by Google).

Based on my first blog article for the 2018, titled From Gulp to Webpack, I took the decision for an extra blog spot presenting my personal Github repo webpack-bootstrap. If you want to set up your first Bootstrap 4 project using Font Awesome and Material Design Icons, please follow the mentioned steps, below:

  1. Clone the repo
  2. Install the dependencies
  3. Build the sample project

Keep walking on your personal project using state of the art front-end tools and frameworks!

Thanks for reading!

Continue reading >>
ALKALSetting up Webpack for Bootstrap 4, Font Awesome and Material Design Icons

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

Welcome to my newly redesigned Alkal.gr

by ALKAL on February 2, 2015 , No comments

New year, new thoughts, new targets, new website…

This is my first blog post for 2015 and I am very happy about that because it has been written using the redesigned alkal website!

The redesign process included:

  • New ALKAL logo
  • User interface revamp
  • Language change for main website pages from greek to english, because it is needed for me to contact my thoughts, interest and achievements with other enthusiastic designers and developers from all over the world
  • New main category named as “Porfolio” where I will present my personal projects in UI design and web development
  • New main category named as “Exposure” where I will exhibit my personal portfolio as amateur photographer.

Regarding my new ALKAL logo, it has been designed reflecting my interests and what I can really provide as services. The Brush – Tag icon depicts my personal effort to use design tools and state of the art techniques appropriately so as to provide a pixel perfect website and/or web application through a creative development process.

ALKAL Business Card

Feel free to browse in all main categories and contact with me for recommendations and suggestions.

Cheers!

Alexandros Kalamatianos – ALKAL

Continue reading >>
ALKALWelcome to my newly redesigned Alkal.gr