2 solutions for empty spaces below an IMG html element (no margins used)

Have you ever have empty space below a DIV element with an image inside of it? No? Lucky you! I had this problem. But this image had no margin or padding below it. So it was really weird.

But I never thought about what kind of type of display (CSS), an IMG element was. And what I saw, it was a “display: inline”. So that helps a lot to find a solution (after a hour searching, checking and reloading hahaha). To fix this, there are 2 solutions!

Solution 1

empty-space-below-image-html-css-display-block

Set the image to a display: block; in the CSS.

Solution 2

empty-space-below-image-html-css-vertical-align-top

Set the vertical-align: top;

You can decide yourself what solution is for you the best.

Error: spawn C:\Python27 ENOENT npm

A couple of days I was trying to fix this error when installing “gulp-sass” via:

npm install gulp-sass

Then I got this error: “spawn C:\Python27 ENOENT”. But when I searched Google I couldn’t find the correct fix for it.

In my PATH settings for PYTHON the only value was: “C:\Python27″. But after I changed that to “C:\Python27\python.exe” the issue was solved.

So hopefully this will also help to solve your problem!

Cross-browser Document Ready with Vanilla JavaScript (IE8 included)

In jQuery, developers are used to the $(document).ready(); function. This is just a check if your document is completely loaded, and all needed stuff is on your page. But since I left jQuery in my work, I wanted to have the same check but with Vanilla JavaScript.

So today I would love to share with you a snippet, that check’s if you DOM is ready without any dependencies!

Document Ready check

This snippet will covers all the browser to check if the DOM is ready.

document.addEventListener("DOMContentLoaded", function() {
   console.log('Your document is ready!');
});

Document Ready check for IE8

Offcourse there is IE8, who wants a different way.

document.attachEvent("onreadystatechange", function(){
 if (document.readyState === "complete"){
   console.log('Your document is ready!');
 }
});

Cross-browser Document Ready check

If I would create a small module of it, it would be like this:

var domIsReady = (function(domIsReady) {
   var isBrowserIeOrNot = function() {
      return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
   }

   domIsReady = function(callback) {
      if(callback && typeof callback === 'function'){
         if(isBrowserIeOrNot() !== 'ie') {
            document.addEventListener("DOMContentLoaded", function() {
               return callback();
            });
         } else {
            document.attachEvent("onreadystatechange", function() {
               if(document.readyState === "complete") {
                  return callback();
               }
            });
         }
      } else {
         console.error('The callback is not a function!');
      }
   }

   return domIsReady;
})(domIsReady || {});

Source is on Gist and a demo is on Codepen.

And this is how you could use it:

(function(document, window, domIsReady, undefined) {
   domIsReady(function() {
      console.log('My DOM is ready peeps!');
      document.querySelector('#page').style.background = 'blue';
   });
})(document, window, domIsReady);

 

Use a micro-library

You can also choose to use a small JavaScript Library if you like. It can be very usefull, but I prefer to intergrate the snippets above in my own code.

Hope this will help you build your website or application!

Your first AngularJS Application

AngularJS is hot these times, so hot that all the big companies are searching for (frontend) developers with a good knowledge of AngularJS and testing AngularJS application’s.

So I would love to tell you how to build your first (basic) AngularJS Application. You can use it as a base to start, and build something cool(er) with it.

Let’s begin with the start! If you just want to use my first setup? checkout my source at Github. For the ones who like to read first, please continue.

How to start an AngularJS Application

We are gonna start with including the AngularJS library. You can choose to include it from a CDN or download the script and save it.

 <!-- CDN version of AngularJS -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<!-- Or use a selfhosted version -->
 <script src="assets/js/libs/angular.min.js"></script>

But since I prefer to concat all my JavaScript files into one file (to minimise the total requests). In the end I only include one file:

<script src="assets/js/app.js"></script>

Set AngularJS root element

To let AngularJS know what the root element is you need to use ng-app. Add the atribute to the html tag. Which results in:

<html ng-app>

Test if AngularJS is loaded

Inside the body you need to add this expression: 1 + 2 = {{1 + 2}}. If AngularJS is loaded correctly, you will see the awnser of 1 + 2 on your page. If you try to remove the ng-app attribute from your root element, you will see that the expression stays like you added it to the HTML.

See the Pen Simple AngularJS setup by Raymon Schouwenaar (@rsschouwenaar) on CodePen.

Create the AngularJS Application

If you really want to create an application where you could do something with, we need to create an AngularJS module var todoApp = angular.module("myTodoApp", []);. Now you can use the variable todoApp everywhere in your script to create your application. “myTodoApp” is the app name you are gonna use inside.

<html ng-app="myTodoApp">

Let’s create some AngularJS routing

For creating different views (like pages) we need to include the ngRoute script in our html. (source) When the ngRoute script is loaded we need to include “ngRoute” inside our AngularJS module: var todoApp = angular.module("myTodoApp", ['ngRoute']);. Now we can create a configuration for the different views. (check my source on Github)

todoApp.config(function($routeProvider, $locationProvider) {
 $routeProvider
 .when('/', {
 templateUrl: '../views/home.html'
 })
 .when('/home', {
 redirectTo: '/'
 })
 .when('/about', {
 templateUrl: '../views/about.html'
 })
 .when('/contact', {
 templateUrl: '../views/contact.html'
 })
 .otherwise({
 redirectTo: '/'
 });
 });

For creating different views I created a folder with html files to show different content for each view.

Every view I added to the $routeProvider. So when I go to /home the application will redirect to the base url. And there the templateUrl will be showed in the ng-view tag inside your html body. This is the same for /about or /contact, there the views will be showed which you specified. If you don’t include ng-view the different views won’t appear.
I hope this blog will help you to build a cool AngularJS project. You can use my Github sources as a base to build your own application!

Please let me know if you used it in one of your application? Or if you got some questions/comments please add them to the comments below :-) Enjoy!

How to use JavaScript Module Pattern inside WordPress

Since I discovered that it is better to avoid to put everything in your global scope with JavaScript I love to use the Module Pattern. (Mastering The Module Pattern of Todd Motto is a very good article about it) But I build a lot of WordPress websites. At the first time I started the create a cool slider for 1 of my clients with the Module Pattern, it was not easy to let WordPress change options like the autoplay, slide effect or the animation speed.

I was used to use jQuery in WordPress, and jQuery does a lot on the global scope. After searching a trying a lot with my slider, I discovered the solution, and I love to share with you! (if you have better ideas about this, I love to hear it in the comments!)

How to add theme options to a WordPress website

For theme options I always use the WordPress plugin: Options Framework. This is a great helpfull plugin to create custom WordPress theme options.

These are my options for my CleanSlider module:

  $options[] = array(
      'name' => __('CleanSlider Opties', 'options_check'),
      'type' => 'heading');

 $options[] = array(
  'name' => __('Clean slider toon/verberg', 'options_check'),
  'desc' => __('Toon de slider', 'options_check'),
  'id' => 'visibility_clean_slider',
  'type' => 'checkbox');

 $options[] = array(
  'name' => __('Clean slider autoplay', 'options_check'),
  'desc' => __('Automatisch afspelen', 'options_check'),
  'id' => 'clean_slider_autoplay',
  'type' => 'checkbox');

  $cleanSlider_animation = array(
    'slide' => __('Slide effect', 'options_check'),
    'fade' => __('Fade effect', 'options_check'),
  );

$options[] = array(
    'name' => __('Clean slider effect', 'options_check'),
    'desc' => __('Selecteer animatie effect van de slider.', 'options_check'),
    'id' => 'clean_slider_effect',
    'std' => 'fade',
    'type' => 'radio',
    'options' => $cleanSlider_animation);

  // Test data
  $clean_slider_animation_speed = array(
    '1000' => __('1 sec', 'options_check'),
    '2000' => __('2 sec', 'options_check'),
    '3000' => __('3 sec', 'options_check'),
    '4000' => __('4 sec', 'options_check'),
    '5000' => __('5 sec', 'options_check'),
    '6000' => __('6 sec', 'options_check'),
    '7000' => __('7 sec', 'options_check'),
    '8000' => __('8 sec', 'options_check'),
    '9000' => __('9 sec', 'options_check'),
    '10000' => __('10 sec', 'options_check'),
  );

  $options[] = array(
    'name' => __('Clean slider animatie snelheid', 'options_check'),
    'desc' => __('Snelheid van de slider animatie', 'options_check'),
    'id' => 'clean_slider_animation_speed',
    'std' => '5000',
    'type' => 'select',
    'class' => 'mini', //mini, tiny, small
    'options' => $clean_slider_animation_speed);

I created an option for animation speed, autoplay, animation effect and show or hide slider.

How to use a WordPress theme options with JavaScript Module Pattern

First I tried to make some options of my CleanSlider Module global via the window object. But this is not so clean. And just trying to access the cleanSlider object inside a script tag inside the html was not so nice.

That’s why I have used this way to integrated the theme options inside my script. So clients can easly change the effects of the slider.

This is how my “wp-footer.php” looked like:

<?php wp_footer(); ?>
<script type="text/javascript">
(function(window, document, cleanSlider, undefined){
  <?php
    $cleanSliderAutoplay = getThemeOptionVal('clean_slider_autoplay');
    $cleanSliderEffect = getThemeOptionVal('clean_slider_effect');
    $cleanSliderAnimationSpeed = getThemeOptionVal('clean_slider_animation_speed');

    if($cleanSliderAutoplay == '') {
      $cleanSliderAutoplayRef = 'false';
    } else {
      $cleanSliderAutoplayRef = 'true';
    }

    if($cleanSliderEffect == 'fade') {
      $cleanSliderEffectRef = '';
    } else {
      $cleanSliderEffectRef = ", 'slide'";
    }

    if($cleanSliderAnimationSpeed == '') {
      $cleanSliderAnimationSpeedRef = '5000';
    } else {
      $cleanSliderAnimationSpeedRef = $cleanSliderAnimationSpeed;
    }

  ?>
  cleanSlider.init(<?php echo $cleanSliderAutoplayRef; ?>, <?php echo $cleanSliderAnimationSpeedRef; ?> <?php echo $cleanSliderEffectRef; ?>);
})(window, document, cleanSlider);
</script>
</body>
</html>

Hopefully this helped you to integrate the theme options of your WordPress website inside your JavaScript (Module Pattern)! If you have problems with it? Please add a comment below!

Source of the CleanSlider JavaScript open sourced

I made my CleanSlider module open-source so you can use it in your project! Please let me know if you used it in one of your sites? I like to know :-)

Gist link to the source!

User Agents strings Mobile & Desktop (snippets)

For a project I had to collect several User-agent strings for Mobile & Desktop. If you like to use them, be free to do :-)

Desktop User-agent Strings


Chrome "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2334.0 Safari/537.36" Firefox "Mozilla/5.0 (Windows NT 6.3; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0" IE11 "Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; MAARJS; rv:11.0) like Gecko" IE10 "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; MAARJS)" IE9 "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; MAARJS)" IE8 "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; MAARJS)" Opera "Opera/9.80 (Windows NT 6.2; WOW64) Presto/2.12.388 Version/12.17"

Mobile User-agent Strings


iPad / Chrome "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53" iPad mini / Chrome "Mozilla/5.0 (iPad; CPU OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5" iPhone 4 / Chrome "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5" iPhone 5 / Chrome "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53" iPhone 6 / Chrome Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4" iPhone 6 Plus / Chrome "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4" Blackberry Playbook / Chrome (tablet) "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+" Blackberry Z30 / Chrome "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+" Google Nexus 4 / Chrome (tablet) "Mozilla/5.0 (Linux; Android 4.4.4; en-us; Nexus 4 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36" Google Nexus 5 / Chrome "Mozilla/5.0 (Linux; Android 4.4.4; en-us; Nexus 5 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36" LG Optimus L70 / Chrome "Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; LGMS323 Build/KOT49I.MS32310c) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.1599.103 Mobile Safari/537.36" Nokia Lumia 520 / Chrome "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)" Nokia N9 / Chrome "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13" Samsung Galaxy Note 3 / Chrome "Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30" Samsung Galaxy S3 / Chrome "Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30" Samsung Galaxy S4 / Chrome "Mozilla/5.0 (Linux; Android 4.4.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36" Windows Phone 8.1 / IE11 "Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like Gecko" Windows Phone 8 / IE10 "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch)" Windows Phone 7 / IE9 "Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)"

Console User-agent Strings


Xbox One "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)" Xbox 360 "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Xbox)"

If you want to have some more or the one you searched for was not included? Check out the website useragentstring.com, the have tons of strings. The also offer an API if you want to automate your testing.

Snippets of JS: How to get height & width an of Element with Vanilla JavaScript?

You don’t need jQuery for this!
For getting the height of an Element with Vanilla JavaScript:

var element = document.querySelector('.element');
window.getComputedStyle(element).height;

For getting the width of an Element with Vanilla JavaScript:

var element = document.querySelector('.element');
window.getComputedStyle(element).width;