Fetch .json file #Javascript
function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    httpRequest.open('GET', path);
    httpRequest.send(); 
}

fetchJSONFile('file.json', function(data){
	// Do something with Data
    console.log(data);
});
Mod_Security Error Response body too large #Server
# Mod_Security Error Response body too large
# Domains > domain.com > Apache & nginx Settings > Additional directives for HTTPS
<IfModule mod_security2.c>
    SecResponseBodyLimit 546870912
</IfModule>
,,,,
Pdo Query for noobs #PHP
<?php
// Set
global $pdo;
if (isset($pdo)) {return;} 
mysqli_report(MYSQLI_REPORT_STRICT);
$pdo = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);
// Set the PDO::ATTR_EMULATE_PREPARES Attribute to false
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);
if (mysqli_connect_errno()) {		
  die(sprintf("Connect failed: %s\n", mysqli_connect_error()));
}
// Prepared Statements
$firstname = "bruce";
$sql = "SELECT * FROM users WHERE firstname =:fname ;";
$stmt = $pdo->prepare($sql);
$stmt->bindValue(":fname", $firstname);
$stmt->execute();
if(!$result = $stmt->fetch(PDO::FETCH_OBJ)){
    echo "Credentials do no match";
} else {
    echo"Id: ".$result->id. " Name: ".$result->firstname." ".$result->lastname;
}
// Prepared Statements With Parameterized Query
$firstname = "jeff";
$sql = "SELECT * FROM users WHERE firstname = ?";
$stmt = $pdo->prepare($sql);
$stmt->bind_param("s", $firstname);
$stmt->execute();
$result = $stmt->get_result();
if($result->num_rows === 0) exit('No rows');
while($row = $result->fetch_assoc()) {
    echo"Id: ".$row['id']. " Name: ".$row['firstname']." ".$row['lastname'];
}
get http headers values #PHP
<?php 			
// GET HTTP HEADERS VALUES
// SINGLE VALUE - Replace XXXXXX_XXXX with the name of the header you need in UPPERCASE (and with '-' replaced by '_')
$headerStringValue = $_SERVER['HTTP_XXXXXX_XXXX'];
echo $headerStringValue;
// GET ALL HEADERS			
$headers = apache_request_headers();
foreach ($headers as $header => $value) {
    echo "$header: $value <br />\n";
} ?>
Trim Input Whitespace #Javascript
/* trim-whitespace-input.js*/
$('.no-spaces-field').keyup(function() {
  $(this).val($(this).val().replace(/ +?/g, ''));
});
Bulletproof Buttons #Email
<center>
<div style="margin: 0 auto;"><!--[if mso]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="16%" strokecolor="#ed7014" fill="t">
    <v:fill type="tile" src="https://www.emailonacid.com/images/orange_btn_bg.jpg" color="#ed7014" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:18px;font-weight:bold;">Click the Button!</center>
  </v:rect>
<![endif]-->
<div style="margin: 0 auto;mso-hide:all;">
<table align="center" cellpadding="0" cellspacing="0" height="50" width="250" style="margin: 0 auto; mso-hide:all;">
	<tbody>
		<tr>
			<td align="center" bgcolor="#ed7014" height="50" style="vertical-align:middle;color: #ffffff; display: block;background-color:#ed7014;background-image:url(https://www.emailonacid.com/images/orange_btn_bg.jpg);border:1px solid #ed7014;mso-hide:all;" width="250">
				<a class="cta_button" href="#" style="font-size:16px;-webkit-text-size-adjust:none; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:50px; width:250px; display:inline-block;" title="Button">
					<span style="color:#ffffff">Click the Button!</span>
				</a>
			</td>
		</tr>
	</tbody>
</table>
</div>
</div>
</center>
Force Https the easy way #Html
<!-- Force https -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Plesk increase timeout ( 504 Gateway Time-out) #Server
# Plesk increase timeout response( 504 Gateway Time-out)
# Domains > example.com > Apache & nginx Settings.
FcgidIdleTimeout 1200
FcgidProcessLifeTime 1200
FcgidConnectTimeout 1200
FcgidIOTimeout 1200
Timeout 1200
ProxyTimeout 1200
Conditional content hiding with Outlook #Email
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>Outlook content</td>
    </tr>
</table>
<![endif]-->

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-hide:all;">
    <tr>
        <td>Other clients</td>
    </tr>
</table>
Download Textarea Content as Html File #Javascript
/* Download Textarea Content as Html File.js */
$('#download-button').click(function() {
    if ('Blob' in window) {
        var fileName = prompt('Please enter file name to save', 'Untitled.html');
        if (fileName) {
            var textValue = $('textarea').html();
            var textToWrite = htmlDecode(textValue);
            var textFileAsBlob = new Blob([textToWrite], {
                type: 'application/xhtml+xml'
            });
            if ('msSaveOrOpenBlob' in navigator) {
                navigator.msSaveOrOpenBlob(textFileAsBlob, fileName);
            } else {
                var downloadLink = document.createElement('a');
                downloadLink.download = fileName;
                downloadLink.innerHTML = 'Download File';
                if ('webkitURL' in window) {
                    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
                } else {
                    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
                    downloadLink.click(function() {
                        document.body.removeChild(event.target);
                    });
                    downloadLink.style.display = 'none';
                    document.body.appendChild(downloadLink);
                }
                downloadLink.click();
            }
        }
    } else {
        alert('Your browser does not support the HTML5 Blob.');
    }
});
Create iFrame from Textarea Content Html #Javascript
/* Create iFrame from Textarea Content Html */
function setFrame() {
    var HTMLval = TextareaContentID.value;
    var iframe = document.getElementById('iframeID');
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(HTMLval);
    iframe.contentWindow.document.close();
}
Post per page for Custom post types #wordpress
<?php /* Set posts per page for a custom post type in wordpress.php */ ?>
<?php
function set_posts_per_page_for_towns_cpt( $query ) {
  if ( !is_admin() && $query->is_main_query() && is_post_type_archive( 'towns' ) ) {
    $query->set( 'posts_per_page', '10' );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_for_towns_cpt' );
?>
Show thumbnails in pagination #wordpress
<?php /* Show thumbnails in WordPress Posts Pagination */ ?>
<?php if( $prev_post = get_previous_post() ): ?>
    <div class="nav-box previous">
        <?php $prevthumbnail = get_the_post_thumbnail($prev_post->ID, 'thumbnail' );?>
        <?php previous_post_link('%link',"$prevthumbnail  <p>%title</p>", TRUE); ?>
    </div>
<?php endif; ?>
<?php if( $next_post = get_next_post() ): ?>
    <div class="nav-box next">
        <?php $nextthumbnail = get_the_post_thumbnail($next_post->ID, 'thumbnail' );  ?>
        <?php next_post_link('%link',"$nextthumbnail  <p>%title</p>", TRUE); ?>
    </div>
<?php endif; ?>
Gmail iOS Font Fix Update #Email
<style>
.gmailfix {
 display:none;
 display:none!important;
}
</style>
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>
Better copyright #wordpress
<?php 
function synth_copyright() {
	global $wpdb;
	$copyright_dates = $wpdb->get_results("
		SELECT
		YEAR(min(post_date_gmt)) AS firstdate,
		YEAR(max(post_date_gmt)) AS lastdate
		FROM
		$wpdb->posts
		WHERE
		post_status = 'publish'
	");
	$output = '';
	if($copyright_dates) {
		$copyright = "&copy; " . $copyright_dates[0]->firstdate;
		if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
			$copyright .= '-' . $copyright_dates[0]->lastdate;
		}
		$output = $copyright.' - Site r&eacute;alis&eacute; par <a href="https://synth.agency" target="_blank">synth.agency</a>';
	}
	return $output;
} ?>
Detect Click Outside of the Element #Javascript
 // Hide Div when Click Outside of the Element using jQuery / https://www.codexworld.com/
$(document).mouseup(function(e){
    var container = $("#elementID");

    // If the target of the click isn't the container
    if(!container.is(e.target) && container.has(e.target).length === 0){
        container.hide();
    }
});
Get all vars from POST #PHP
<?php echo "<ul>";
    foreach ($_POST as $key => $value) {
        echo "<li>".$key." : ".$value;
        echo "</li>";
    }
?>
Show Future posts #wordpress
<?php // Loop
$recent = new WP_Query('post_type=event&post_status=future&order=ASC&orderby=date'); 
while($recent->;have_posts()) : $recent->the_post(); ?>
<div>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?> - <?php the_date('l, F j, Y');?></a>
</div>
<?php endwhile; ?>
<?php 
// Functions.php
add_filter('the_posts', 'show_future_posts');
function show_future_posts($posts){
    global $wp_query, $wpdb;
    if(is_single() && $wp_query->post_count ==0){
        $posts = $wpdb->get_results($wp_query->request);
    }
    return $posts;
}; ?>
Responsive color picker #css
<!-- https://codepen.io/Idered/pen/jbrzro -->
<style>
.c-color-swatch {display: table;width: 100%;table-layout: fixed;max-width: 250px;}
.c-color-swatch__item {display: table-cell;height: 16px;line-height: 16px;text-align: center;user-select: none;position: relative;transition: transform 0.25s;}
.c-color-swatch__item:hover {z-index: 1;transform: scale(1.5);}
.c-color-swatch [type=checkbox]:checked + label:after {content: "";font-size: 9px;vertical-align: top;color: #fff;font-family: FontAwesome;}
</style>
<div class="c-color-swatch">
  <input type="checkbox" name="colors[]" id="color-F9ED69" hidden/>
  <label class="c-color-swatch__item" for="color-F9ED69" style="background: #F9ED69"></label>
  <input type="checkbox" name="colors[]" value="F08A5D" id="color-F08A5D" hidden/>
  <label class="c-color-swatch__item" for="color-F08A5D" style="background: #F08A5D"></label>
  <input type="checkbox" name="colors[]" value="B83B5E" id="color-B83B5E" hidden checked/>
  <label class="c-color-swatch__item" for="color-B83B5E" style="background: #B83B5E"></label>
  <input type="checkbox" name="colors[]" value="6A2C70" id="color-6A2C70" hidden/>
  <label class="c-color-swatch__item" for="color-6A2C70" style="background: #6A2C70"></label>
  <input type="checkbox" name="colors[]" value="2B3964" id="color-2B3964" hidden/>
  <label class="c-color-swatch__item" for="color-2B3964" style="background: #2B3964"></label>
  <input type="checkbox" name="colors[]" value="3482AA" id="color-3482AA" hidden/>
  <label class="c-color-swatch__item" for="color-3482AA" style="background: #3482AA"></label>
  <input type="checkbox" name="colors[]" value="6DB3B5" id="color-6DB3B5" hidden/>
  <label class="c-color-swatch__item" for="color-6DB3B5" style="background: #6DB3B5"></label>
  <input type="checkbox" name="colors[]" value="477D7F" id="color-477D7F" hidden/>
  <label class="c-color-swatch__item" for="color-477D7F" style="background: #477D7F"></label>
  <input type="checkbox" name="colors[]" value="1F5357" id="color-1F5357" hidden/>
  <label class="c-color-swatch__item" for="color-1F5357" style="background: #1F5357"></label>
  <input type="checkbox" name="colors[]" value="64BD97" id="color-64BD97" hidden/>
  <label class="c-color-swatch__item" for="color-64BD97" style="background: #64BD97"></label>
</div>
Chmod Plesk / Repair permissions #Server
# Chmod Plesk / Repair permissions (useful for wp)
plesk repair fs -y domaine.name
Vertical align anything #css
/* traditional */
.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* Modern with flexbox */
.element-parent {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    width:100%;
    padding:80px 0;
    text-align: center;
 }
Detect if iOs #Javascript
/* Detect iOs */
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
// do something
}

No more items to load