How I Describe My Thoughts

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

Σε μία αθηναϊκή milonga…

by ALKAL on October 23, 2015 , No comments

Ήταν βραδύ Δευτέρας… ένας φίλος μας προσκάλεσε εμένα και το φωτογραφικό μου (…και όχι μόνο!!!) ταίρι να παρακολουθήσουμε και να φωτογραφίσουμε την πρόβα της ομάδας «T4Tango» σε μια αθηναϊκή milonga…

Εκείνη από την Αργεντινή. Εκείνος Έλληνας. Συναντιούνται «τυχαία», σε μια milonga, ή αλλιώς μια βραδιά tango, μιας ξένης και στους δύο ευρωπαϊκής πόλης. Η έλξη άμεση και αμοιβαία. Εκείνος αποφασισμένος να κερδίσει, εκείνη να κερδηθεί μεν, αλλά… Όπλο και των δύο σε αυτό το παιχνίδι, το tango. Προκλητικό, ερωτικό, απαιτητικό, εκμηδενίζει τις αποστάσεις και καταλαβαίνει μόνο μια γλώσσα. Αυτή της αγκαλιάς.

Η ομάδα «T4Tango» ανοίγει την πόρτα ενός άγνωστου κόσμου για τους περισσότερους, αυτού των milongas. Ενός κόσμου με τη δική του «ετικέτα», τους δικούς του κανόνες συμπεριφοράς και τους δικούς του κώδικες, γνωστούς μόνο στους milongueros. Στους ανθρώπους που, όταν πέσει η νύχτα, φορούν τον καλύτερό τους εαυτό και αφήνονται φανατικά στη μαγεία των tangos…

Η παράσταση των T4Tango θα παρουσιαστεί από 25 Οκτωβρίου 2015 και για τέσσερις μόλις Κυριακές σε ένα χώρο που μεταφέρει όλη την μαγεία και την ατμόσφαιρα των milongas, στο El Convento Del Arte.

 

ALKAL Photography - Tango Photoshooting

ALKAL Photography - Tango Photoshooting

ALKAL Photography - Tango Photoshooting

ALKAL Photography - Tango Photoshooting

ALKAL Photography - Tango Photoshooting

Continue reading >>
ALKALΣε μία αθηναϊκή milonga…

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