Here we will see how we can load YouTube channel video in our website by using JSON.

Now we will start this from scratch

STEP 1 (Get API Key):
We will get ‘API Key’ from Google Developer Console, you can find steps here : https://developers.google.com/youtube/v3/getting-started

STEP 2 (Get Channel ID):
Go to your YouTube Channel and copy your channel URL e.g. https://www.youtube.com/channel/XXXThs2cnzpDD-dT
and your channel id is ‘XXXThs2cnzpDD-dT‘.

Now see the complete code below

<?php
    $api_key = 'XXXXXXXXC9eEmCnF4qXXXXX';
    $chanel_id = 'XXXnzpXXXXXXXXXXXc-dT'; // Youtube Channel ID, copy from url of channel 'https://www.youtube.com/channel/XXXnzpXXXXXXXXXXXc-dT'
    $maxResults = '20';
    
    $url    = 'https://www.googleapis.com/youtube/v3/search?key='.$api_key.'&channelId='.$chanel_id.'&part=snippet,id&order=date&maxResults=20';
    
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
       
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
       
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 60); curl_setopt($ch, CURLOPT_TIMEOUT, 60); 
    $result = curl_exec($ch); 
    if(curl_errno($ch) !== 0) { error_log('cURL error when connecting to ' . $url . ': ' . curl_error($ch)); } 
    curl_close($ch); 
    $videoLists = json_decode($result);
    //echo'<pre>';
    //print_r($videoLists);
    
    $videoList = $videoLists->items;
?>

<?php
    foreach($videoList as $videoListVal){
        ?>
        <div style="width:20%; float:left;">
            <?php
                $thumb_url      = $videoListVal->snippet->thumbnails->medium->url; //mediaum,high,default
                $title          = $videoListVal->snippet->title;
                $description    = $videoListVal->snippet->description;
                $videoId        = $videoListVal->id->videoId;
                $publishTime    = $videoListVal->snippet->publishTime;
            ?>
            <iframe width="100%" height="auto" src="https://www.youtube.com/embed/<?php echo $videoId; ?>?si=ICtFe87ElbGLgdvm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
        <?php
    }
    //echo'<pre>';
    //print_r($videoList);
?>

The post YouTube Channel Video API in PHP appeared first on Cody Paste.

Here we will see how we can load YouTube channel video in our website by using JSON.

There are two steps:

Query Channels to get the “uploads” Id. eg

https://www.googleapis.com/youtube/v3/channels?id={channel Id}&key={API key}&part=contentDetails

Use this “uploads” Id to query PlaylistItems to get the list of videos. eg

https://www.googleapis.com/youtube/v3/playlistItems?playlistId={"uploads" Id}&key={API key}&part=snippet&maxResults=50

Now we will start this from scratch

STEP 1 (Get API Key):
We will get ‘API Key’ from Google Developer Console, you can find steps here : https://developers.google.com/youtube/v3/getting-started

STEP 2 (Get Channel ID):
Go to your YouTube Channel and copy your channel URL e.g. https://www.youtube.com/channel/XXXXXXXThs2cnXXX-dt
and your channel id is ‘XXXXXXXThs2cnXXX-dt‘.

STEP 3 :
Now replace {channel Id} with your channel id and API Key with your API Key
https://www.googleapis.com/youtube/v3/channels?id={channel Id}&key={API key}&part=contentDetails
to
https://www.googleapis.com/youtube/v3/channels?id=XXXXXXXThs2cnXXX-dt&key=XXXXXXXXXXXXXXXXXXX&part=contentDetails

Here you will get “uploads” Id to query Playlist Items e.g.

{
  "kind": "youtube#channelListResponse",
  "etag": "XXXXXXXXXXXABiQXX",
  "pageInfo": {
    "totalResults": 1,
    "resultsPerPage": 5
  },
  "items": [
    {
      "kind": "youtube#channel",
      "etag": "XXXXXXXXXXYmaRUXXXXXX",
      "id": "XXXXXhs2cnzpqc-rAXXX",
      "contentDetails": {
        "relatedPlaylists": {
          "likes": "",
          "uploads": "XXXXwEk6hThs2cnzXXXX" // this is upload id
        }
      }
    }
  ]
}

“uploads”: “XXXXwEk6hThs2cnzXXXX” is the upload id

STEP 4 :
Use this “uploads” Id to query PlaylistItems to get the list of videos. eg

https://www.googleapis.com/youtube/v3/playlistItems?playlistId={"uploads" Id}&key={API key}&part=snippet&maxResults=50

Here you will get Palaylist in json Format.

The post YouTube channel video in website appeared first on Cody Paste.

STE 1 : Get Instagram Access Token

https://docs.oceanwp.org/article/487-how-to-get-instagram-access-token

STEP 2 : PHP Code for Website

<?php
$access_token = 'IGQVJWR0VIbHF6cGl0aTZA5NnFsMkxhbHY3MmR0em83emNZAQ3Vxa0dtenRrTHZAqVzFpbHhENmtDRjNIY2lFSGthUkFzX191TEU3SDJzcVJDcnNTYkVYVFlRa1JJZAE12YmFLMVdpWUV4YTJ6cGxWeDBmaQZDZD';

$fields ='id,caption,thumbnail_url,media_url,permalink';

  function fetchData($url){
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_TIMEOUT, 20);
  $result = curl_exec($ch);
  curl_close($ch); 
  return $result;
  }

  $result = fetchData("https://graph.instagram.com/me/media?fields=".$fields."&access_token=".$access_token."");


  $result = json_decode($result);
  
  //echo'<pre>';
  //print_r($result); die();
  
  
  foreach ($result->data as $post) {
      
      $thumbnail_url    = $post->thumbnail_url;
      $image    = $post->media_url;
      $url      = $post->permalink;
      $caption  = $post->caption; // Text content
     ?>
        <div style="width:20%; float:left; padding:5px; margin:5px; border:solid 1px #ebebeb;">
            <a href="<?php echo $url; ?>" target="_blank">
                <?php
                    if($thumbnail_url==""){
                ?>
                    <img src="<?php echo $image; ?>" width="100%">
                <?php }else{
                    ?>
                    <img src="<?php echo $thumbnail_url; ?>" width="100%">
                    <?php
                } ?>
                
                
                
                
                
                <p><?php echo $caption; ?></p>
            </a>
        </div>
     <?php
  }
?>

The post Instagram Feed on Website PHP appeared first on Cody Paste.

HTML Form

<form action="#" method="post" enctype="multipart/form-data">
	<input type="file" name="invoice[]" id="customFile" required multiple>			
	<label for="customFile">Choose file</label>		
	<button class="btn btn-success" type="submit" style="margin-left: 15px;">Upload</button>  
</form>

jQuery Validation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  
<script>
    $(document).ready(function(){
         $("form").submit(function(){
            //==Check File Size==>
            var splashArray = new Array();
            var files = $('form :input[type=file]').get(0).files;
            for (i = 0; i < files.length; i++)
            {
               splashArray.push(files[i].size);
            }
            //alert(JSON.stringify(splashArray));
            var total = 0;
            for (var i = 0; i < splashArray.length; i++) {
                total += splashArray[i] << 0;
            }
            //alert(total);
            if (total > 5000000){
                alert('Total File size should not more than 5 MB');
                return false;
            }
        }); 
    });
</script>

The post File Size Validation jQuery appeared first on Cody Paste.

<script src='https://www.google.com/recaptcha/api.js'></script>
            <div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div>

Get reCaptcha Value in jQuery and pass in ajax

var g_recaptcha_response = grecaptcha.getResponse();
var dataString = 'uname='+ uname + '& g-recaptcha-response=' + g_recaptcha_response;

Validate reCaptcha

$secret = 'YOUR-SECRET-KEY'; //google captcha check
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success){
   //Do if captcha is valid
}

Make reCaptcha checkbox required

<!-- GCaptcha require karne ke liye-->
    <style>
        #g-recaptcha-response {
          display: block !important;
          position: absolute;
          margin: -78px 0 0 0 !important;
          width: 302px !important;
          height: 76px !important;
          z-index: -999999;
          opacity: 0;
        }
    </style>
    <script>
        window.addEventListener('load', () => {
      const $recaptcha = document.querySelector('#g-recaptcha-response');
      if ($recaptcha) {
        $recaptcha.setAttribute('required', 'required');
      }
    })
    </script>
<!-- -->

Reset reCaptcha

For reCaptcha v2, use:

grecaptcha.<span class="hljs-title function_">reset</span>();

If you’re using reCaptcha v1 (probably not):

<span class="hljs-title class_">Recaptcha</span>.<span class="hljs-title function_">reload</span>();

The post Make Google reCaptcha required and use in JQuery Ajax appeared first on Cody Paste.

Here we will save Form Data to a ‘CSV’ File instead of any Database, we are going to use PHP for this.

(We are assuming you have knowledge of PHP)

So let’s get started.

STEP 1:

Create a CSV File ‘contact_data.csv‘. (Open Ms Excel and save a file in CSV Format)

Write the column name in the first row of the ‘contact_data.csv’.

(Here we are writing “sr_no”,”name”,”email”,”subject”,”message” )

STEP 2:

Create a simple HTML Form index.html with action ‘post.php’, Code given below

<form action="post.php" method="post">
   <h3 align="center">Contact Form</h3>
   <br />     
   <div class="form-group">
      <label>Enter Name</label>
      <input type="text" name="name" placeholder="Enter Name" class="form-control" value="" />
   </div>
   <div class="form-group">
      <label>Enter Email</label>
      <input type="text" name="email" class="form-control" placeholder="Enter Email" value="" />
   </div>
   <div class="form-group">
      <label>Enter Subject</label>
      <input type="text" name="subject" class="form-control" placeholder="Enter Subject" value="" />
   </div>
   <div class="form-group">
      <label>Enter Message</label>
      <textarea name="message" class="form-control" placeholder="Enter Message"></textarea>
   </div>
   <div class="form-group" align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Submit" />
   </div>
</form>

STEP 3:

Create Action File ‘post.php‘, Code given below.

<?php
$error = "";
$name = "";
$email = "";
$subject = "";
$message = "";

function clean_text($string)
{
    $string = trim($string);
    $string = stripslashes($string);
    $string = htmlspecialchars($string);
    return $string;
}

if (isset($_POST["submit"])) {
    if (empty($_POST["name"])) {
        $error .=
            '<p><label class="text-danger">Please Enter your Name</label></p>';
    } else {
        $name = clean_text($_POST["name"]);
        if (!preg_match("/^[a-zA-Z ]*$/", $name)) {
            $error .=
                '<p><label class="text-danger">Only letters and white space allowed</label></p>';
        }
    }
    if (empty($_POST["email"])) {
        $error .=
            '<p><label class="text-danger">Please Enter your Email</label></p>';
    } else {
        $email = clean_text($_POST["email"]);
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $error .=
                '<p><label class="text-danger">Invalid email format</label></p>';
        }
    }
    if (empty($_POST["subject"])) {
        $error .=
            '<p><label class="text-danger">Subject is required</label></p>';
    } else {
        $subject = clean_text($_POST["subject"]);
    }
    if (empty($_POST["message"])) {
        $error .=
            '<p><label class="text-danger">Message is required</label></p>';
    } else {
        $message = clean_text($_POST["message"]);
    }

    if ($error == "") {
        $file_open = fopen("contact_data.csv", "a");
        $no_rows = count(file("contact_data.csv"));
        if ($no_rows > 1) {
            $no_rows = $no_rows - 1 + 1;
        }
        $form_data = [
            "sr_no" => $no_rows,
            "name" => $name,
            "email" => $email,
            "subject" => $subject,
            "message" => $message,
        ];
        fputcsv($file_open, $form_data);
        $error =
            '<label class="text-success">Thank you for contacting us</label>';
        $name = "";
        $email = "";
        $subject = "";
        $message = "";
    }
}

echo $error;
?>

DOWNLOAD CODE

The post Save Data to Excel/CSV Instead of MySQL appeared first on Cody Paste.

• 1. Login WordPress Admin Dashboard.
• Go to Settings -> General
  • Change :
    • WordPress Address (URL): http://www.codypaste.com to https://www.codypaste.com
    • Site Address (URL): http://www.codypaste.com to https://www.codypaste.com

The post Your connection is not private appeared first on Cody Paste.

<script  src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>

<form id="form1" name="form1" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<label for="permalink">Permalink:</label>
<input type="text" name="permalink" id="permalink">
<input type="submit" name="submit" id="submit" value="Submit">
</form>

<script>
function slugify(text)
{
return text.toString().toLowerCase()
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/[^\w\-]+/g, '') // Remove all non-word chars
.replace(/\-\-+/g, '-') // Replace multiple - with single -
.replace(/^-+/, '') // Trim - from start of text
.replace(/-+$/, ''); // Trim - from end of text
}

$("#name").keyup(function(){
var sl_val=this.value;
var sl_val= slugify(sl_val);
$("#permalink").val(sl_val);
});
</script>

The post Auto Permalink value in text field appeared first on Cody Paste.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

<span class="token comment" spellcheck="true">/* Smartphones (portrait and landscape) ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 480px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Smartphones (landscape) ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-width</span> <span class="token punctuation">:</span> 321px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/* Smartphones (portrait) ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">max-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPads (portrait and landscape) ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPads (landscape) ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPads (portrait) ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/**********
iPad 3
**********/</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 768px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/* Desktops and laptops ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen  and <span class="token punctuation">(</span><span class="token property">min-width</span> <span class="token punctuation">:</span> 1224px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Large screens ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen  and <span class="token punctuation">(</span><span class="token property">min-width</span> <span class="token punctuation">:</span> 1824px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPhone 4 ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 480px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span> <span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-width</span> <span class="token punctuation">:</span> 480px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-min-device-pixel-ratio</span> <span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPhone 5 ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 568px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 568px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPhone 6 ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 375px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 667px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 375px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 667px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* iPhone 6+ ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 414px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 736px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 414px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 736px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Samsung Galaxy S3 ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Samsung Galaxy S4 ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 320px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/* Samsung Galaxy S5 ----------- */</span>
<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> landscape<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@media</span> only screen and <span class="token punctuation">(</span><span class="token property">min-device-width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">max-device-height</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span> and <span class="token punctuation">(</span><span class="token property">-webkit-device-pixel-ratio</span><span class="token punctuation">:</span> 3<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true">/* Styles */</span>
<span class="token punctuation">}</span>

The post Media queries for common device Breakpoints appeared first on Cody Paste.

<?php
    function buildBaseString($baseURI, $method, $params) {
        $r = array();
        ksort($params);
        foreach($params as $key=>$value){
            $r[] = "$key=" . rawurlencode($value);
        }
        return $method."&" . rawurlencode($baseURI) . '&' . rawurlencode(implode('&', $r));
    }

    function buildAuthorizationHeader($oauth) {
        $r = 'Authorization: OAuth ';
        $values = array();
        foreach($oauth as $key=>$value)
            $values[] = "$key=\"" . rawurlencode($value) . "\"";
        $r .= implode(', ', $values);
        return $r;
    }

    $url = "https://api.twitter.com/1.1/statuses/user_timeline.json";

    $oauth_access_token = "your access token goes here";
    $oauth_access_token_secret = "your access token secret goes here";
    $consumer_key = "your consumer key goes here";
    $consumer_secret = "your consumer secret goes here";

    $oauth = array( 'oauth_consumer_key' => $consumer_key,
                    'oauth_nonce' => time(),
                    'oauth_signature_method' => 'HMAC-SHA1',
                    'oauth_token' => $oauth_access_token,
                    'oauth_timestamp' => time(),
                    'oauth_version' => '1.0');

    $base_info = buildBaseString($url, 'GET', $oauth);
    $composite_key = rawurlencode($consumer_secret) . '&' . rawurlencode($oauth_access_token_secret);
    $oauth_signature = base64_encode(hash_hmac('sha1', $base_info, $composite_key, true));
    $oauth['oauth_signature'] = $oauth_signature;

    // Make requests
    $header = array(buildAuthorizationHeader($oauth), 'Expect:');
    $options = array( CURLOPT_HTTPHEADER => $header,
                      //CURLOPT_POSTFIELDS => $postfields,
                      CURLOPT_HEADER => false,
                      CURLOPT_URL => $url,
                      CURLOPT_RETURNTRANSFER => true,
                      CURLOPT_SSL_VERIFYPEER => false);

    $feed = curl_init();
    curl_setopt_array($feed, $options);
    $json = curl_exec($feed);
    curl_close($feed);

    $twitter_data = json_decode($json);

//print it out
print_r ($twitter_data);

?>

<?php echo $twitter_data[0]->text; ?><br />
Created: <?php echo $twitter_data[0]->created_at; ?>
<br /><br />
<?php echo $twitter_data[1]->text; ?><br />
Created: <?php echo $twitter_data[1]->created_at; ?>
<br /><br />
<?php echo $twitter_data[2]->text; ?><br />
Created: <?php echo $twitter_data[2]->created_at; ?>
<br /><br />

The post Twitter Feed API appeared first on Cody Paste.