What I have learned today

We learn new things with every day. Someone I know told me about this habit and how it helped him and I thought it was nice to try. I’ve done it for a while in the past and then I got super busy and forgot to think about it. Something really cool happened when I discovered my past notices after a few years, I thought they are amazing, I realized how much I changed, how many things I learned and I remembered exactly how it felt that moment.

I also figured out most of the things I wrote down were hard to find and since sharing is caring I’ll be more than happy to share my findings with you.

It’s a good habit and I plan to start doing it again.

I’m curious if any of you are doing something similar and I’ll be very excited to read yours if you have it online. If so please post it in the comments sections.

There are 6 posts filed in What I have learned today (this is page 1 of 1).

What I have learned today 2016.10.14

#1 A simple method to test if is touch device in JavaScript

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}

function is_touch_device() {

try {

document.createEvent("TouchEvent");

return true;

} catch (e) {

return false;

}

And if you combine that with a simple screen width conditional it can become something useful.

(function($) {
    jQuery( document ).ready(function($) {
        if ( $(window).width() > 768 && is_touch_device() ) {
            //JQUERY, DO SOMETHING COOL!
        }
    });
})(jQuery);

(function($) {

jQuery( document ).ready(function($) {

if ( $(window).width() > 768 && is_touch_device() ) {

//JQUERY, DO SOMETHING COOL!

}

});

})(jQuery);

Has anyone a better idea? Post it in the comments. I would love to hear it.

#2 Have you wondered what WordPress script localization does?

The cleanest method to pass variables from Php to JavaScript in WordPress is by using localization function.

Something like this used in your functions.php file:

<?php

/**

* Pass php to javascript.

function custom_scripts() {

$firstname = "John";

$lastname = "Doe";

$website = "johndoe.com";

wp_register_script( 'custom-actions', get_stylesheet_directory_uri() . '/js/actions.js', array(), '20160920', true );

$translation_array = array(

'firstname' => $firstname,

'lastname' => $lastname,

'website' => $website,

'ajaxurl' => admin_url('admin-ajax.php')

);

wp_localize_script( 'custom-actions', 'settings', $translation_array );

wp_enqueue_script( 'custom-actions' );

}

add_action( 'wp_enqueue_scripts', 'custom_scripts' );

In JavaScript you would call them like this:

// VARIABLES FROM PHP

var firstname = settings.firstname;

var lastnmae = settings.lastname;

var website = settings.website;

var ajaxurl = settings.ajaxurl;

The above technique simply works and it’s really useful but have you ever wondered what happens under the hood?

Behold!

<script type='text/javascript'>
/* <![CDATA[ */
var settings = {"firstname":"John","lastname":"Doe","website":"johndoe.com","ajaxurl":"http:\/\/www.johndoe.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>

/* <![CDATA[ */

var settings = {"firstname":"John","lastname":"Doe","website":"johndoe.com","ajaxurl":"http:\/\/www.johndoe.com\/wp-admin\/admin-ajax.php"};

/* ]]> */

</script>

Pfff, no magic here 🤔

What I have learned today 2016.10.13

#1 Copy XMLHttpRequest as cURL command

It comes a day in a developer’s life when he needs to replicate a cURL command that runs in the browser. The reasons can be numerous and I’m not here to judge anyone. Anyway, I find it useful for prototyping purposes when working with API’s.

So you know some magic is running in the background and you want to take a look “under the hood”.

You can try this in Chrome or Firefox (mine was Version 53.0.2785.143 (64-bit) ).

save-as-curl

Next, to use it you have to paste it in Terminal.

execute-curl

That’s just a basic example but imagine how helpful it can be!

What I have learned today 2016.10.11

#1 Global variables / objects in JavaScript

In a website page, you can see all global variables available by running Object.keys(window); in console.

What I have learned today 2016.10.09

#1 WordPress in a subfolder on Nginx

I’ve tried to install my blog as a WordPress install in a subfolder called /blog and I found that Nginx doesn’t do it automatically so in your /etc/nginx/sites-available/yoursite.com you have to add the following:

location /blog {
    index index.html index.htm index.php;
    try_files $uri $uri/ /blog/index.php?$args
}

location /blog {

index index.html index.htm index.php;

try_files $uri $uri/ /blog/index.php?$args

}

What I have learned today 2016.09.30

#1 Test the Spammyness of your Emails with mail-tester.com

A nice tool to get your email spam score. It works super simple, when you first open the site you see a random email address and you’re requested to send a test email from the email address you want to test to that @mail-tester.com email.

After you do that you check your score by clicking the big button on the screen.

Mail-tester.com website | Bogdan Dragomir - WordPress Consultant

On my gmail address I got a score of 7/10 and below I can see why. That helps!

Spam score results on Mail-tester.com | Bogdan Dragomir - WordPress Consultant

Check it here www.Mail-tester.com

What I have learned today 2016.09.29

#1 The text-overflow CSS property

This is super useful when you don’t have enough space for some content. For example a title, a description, an excerpt.

What does it do? It determines how overflowed content that is not displayed is clipped and it adds this nice ... at the end.

.clipped-text {
    text-overflow: ellipsis;
}

.clipped-text {

text-overflow: ellipsis;

}

It has to be applied to block container elements (or inline-block).

How does it look?

This is my clipped text content which is bigger than the container where it is added and using text-overflow:ellipsis it make this nice clipping

To make it work you have to add also white-space: nowrap; and overflow: hidden;

Published

October 13, 2016