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!

The post Setting up Webpack for Bootstrap 4, Font Awesome and Material Design Icons appeared first on ALKAL Creative Development.

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:

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:

• Webpack Config docs
• Webpack How-to
• Webpack for Everyone by Jeffrey Way

Thanks for reading!!!

The post From Gulp to Webpack appeared first on ALKAL Creative Development.

As a consequence, at the process of front-end developing with progressive enhancement in mind, by thinking about your coding in layers:
1. Start with plain, well-structured HTML to display all your content, ie all forms should submit, ensure all links can be followed.
2. Next add the CSS to create an advanced layout. This essentially provides your non-Javascript version
3. Javascript should be the final layer that adds enhanced behaviour to those users that have the capability.

You shouldn’t assume the reason for designing a site that works without CSS or JavaScript (or anything else) is because a user chooses to switch these off. There are many situations when extra layers can fail to load or are filtered. This can happen due to:

• temporary network errors
• DNS lookup failures
• overload or downtime affecting the server where the resource is found, meaning it fails to respond in time or at all
• corporate firewalls blocking, removing or altering content (large institutions like banks or government departments may use these)
• mobile network providers resampling images and altering content to speed up load times and reduce bandwidth usage
• personal firewalls or antivirus software altering or blocking content
• internet providers inserting their own code into the page that accidentally conflicts with your own

As for Drupal, it is one of the most comprehensive open source content management platforms powering millions of web sites and applications. By default, Drupal platform provide a pre-defined CSS class in to <html> attribute, such as <html class=”js”>. At this point, a question is raised “What happens when someone want to apply specific style for js and no-js case respectively?”.

Personally, trying to apply difference stylesheets for js and no-js cases, I have applied the following solution:

1.  At the template.php file, the following hook added:

function ThemeName_preprocess_html(&$variables) {
$variables['classes_array'][] = 'no-js';
}

2. At the ThemeName.js file, the following script added:

(function($) {
Drupal.behaviors.context = {
attach: function(context, settings) {
$('body',context).removeClass('no-js').addClass('js');
}
};
})(jQuery);

To sum up, using the above code lines, whether javascript is not allowed (for any reason), the class=”no-js” will be applied to the attribute, otherwise the class=”js” will be there.

The post Progressive Enhancement with Drupal: NO-JS Approach appeared first on ALKAL Creative Development.

[Source: Medium]

The post Prototyping Process Survey Results appeared first on ALKAL Creative Development.

Collection #1

Collection #2

Collection #4

Collection #5

Source: [Usabilla Blog]

The post UX Infographics – Best of appeared first on ALKAL Creative Development.

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).

View Demo

The post Pure CSS3 Notepaper appeared first on ALKAL Creative Development.

View Demo

The post Inline Editing HTML Form – jQuery Script appeared first on ALKAL Creative Development.

View Demo

The post Clone HTML Form Elements – jQuery Script appeared first on ALKAL Creative Development.

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');
   }

The post GET URL Parameter using Bootstrap JS Collapse appeared first on ALKAL Creative Development.

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.

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

Cheers!

Alexandros Kalamatianos – ALKAL

The post Welcome to my newly redesigned Alkal.gr appeared first on ALKAL Creative Development.