Posts

Showing posts from August, 2020

Free Pop-up / Overlay Script

I created a cool little script to help you create custom pop-up screens for your website. For example: http://jpmalloy.com/popup.html All you need to do is add the JavaScript at the bottom of your webpage's source code, before the closing </body> and create a div container like below. Also, don't forget the CSS. There is an ability to create new instances of popups via the JavaScript mode too. View the source code for the example at  view-source:http://jpmalloy.com/popup.html or download the JavaScript file here: http://jpmalloy.com/popup.js Feel free to modify the script and use however you want, but leave credit intact. Thanks.  <div id="popup-container2" data-header="Example 2" data-style="background-color:lightblue;width:80%;margin-top:40px;z-index:2" style="display:none">     <div style="padding:0px 20px 20px 20px;">     content goes here     </div> </div>  If I update the script, I will let y

Using JavaScript to get a users local time and difference and display as time ago

We are going to use Timeago, a jQuery plugin to display the users time with a fuzzy timestamp. For example, "about 1 day ago". You can download it here: http://timeago.yarp.com    First we create our time HTML element: <time class="timeago" datetime=""></time> To get the timestamp calculation of a user, use the following for the timezone difference between UTC and Local Time and getTime to return the number of milliseconds since 1970-01-01 from the instance of the Date class. <script> var x = new Date(); var stamp = (x.getTime() + x.getTimezoneOffset()*60*1000)/1000; // You could then store this timestamp in a database or something and select it later for use to display the time ago like below. // For demo purposes, I am going to next set the time element with a datetime attribute to hold our timestamp as ISO 8601 UTC $("time.timeago").attr("datetime":stamp);  // Lastly we update the time element with our fuzzy time.

How to write a Redirect rule for an IIS web server inside a web.config file

The first important part is the "rule" element. Everything inside the opening and closing tags of this element describe what your rule does. The rule has a few attributes setup for the rule's name, pattern syntaxing, processing, and if it's enabled. <rule name="Redirect to https" enabled="true" patternSyntax="Wildcard" stopProcessing="true"> </rule> The next child element is the start of our rule. Using the wildcard * inside the "match" element's url attribute tells the server to match any character found in your website's URL. <match url="*" negate="false" /> Next we have the "conditions" element that lets the web server know to ignore any patterning matching for HTTPS requests.  <conditions logicalGrouping="MatchAny">      <add input="{HTTPS}" pattern="off" />  </conditions> Lastly we have the "action&q

An example of chaining jQuery Ajax request callbacks

Chaining is a great way to separate your Ajax request callbacks' code and run multiple commands/functions on one element in a row. The fail callback function is a must for finding out if anything goes wrong with the HTTP request. I recommend the below code for alerting your user of anything going wrong with a request. You can have the error posted to any notification system you have. For demo purposes, I am using the vanilla alert function. As a bonus, I have added comments to the code for explanation. $.ajax({     // request information goes here }).done(function(data,textStatus,jqXHR){     // handling of successful requests goes here      // please note this will not fire if there is a failed request, use the always chain for that }).fail(function(jqXHR, exception) {     // handling of bad requests goes here     if (jqXHR.status === 0) {         alert('Could not connect to the server. 0 code');     } else if (jqXHR.status == 404) {         alert('The requested page

Rewrite rules for IIS web server inside a web.config file

I am going to show you the entire XML file upfront and then break down the important parts that make the magic happen. With that said, here is the XML file: <?xml version="1.0" encoding="UTF-8"?> <configuration>     <system.webServer>         <rewrite>             <rules>                 <rule name="profileurl1" enabled="true">                     <match url="^([^/]+)/?$" />                     <conditions>                         <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                         <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />                     </conditions>                     <action type="Rewrite" url="index.php?page=profile&amp;user={R:1}" />                 </rule>                </rules>         &l

Creating hashtag hyperlinks on the fly for your website

In this post I am going to show you how to take any string of text containing hashtags and convert them into clickable URLs, AKA "hyperlinks". Okay, to get started we will first need some text containing hashtags. $text = 'You can find #programming help at my #blog.'; Now we will use the following regular expression pattern to find all hashed words in the string. $pattern = "/\#([A-Za-z0-9_-]*)/is"; It's important to note, that with this pattern, if you include anything inside the brackets, like a period after the 9, it will find the period with the word. With this pattern we can pass it into the PHP preg_replace_callback function. The callback function will return our matches found and replace all hashtags with clickable URLs. $text = preg_replace_callback($pattern,      function($matches){           $nohash = str_ireplace('#','',$matches[0]);           return '<a href="?tag='.$nohash.'" target="_self"&

How to execute a PHP file via the command line and output the results

Today I am going to show you how to execute a PHP file via a command line interface and output the result to the terminal. You will also learn how to pass in arguments to the PHP file. The first step is to test to see if the global "argv" variable is set. If it is, then we can run our program and get the array of arguments passed to our script.  if(isset($argv)) { Side note, you can read the history behind ARGV here: https://flatironschool.com/blog/a-short-explanation-of-argv The next step will be to slice our argument's array into a string and populate our $_GET array with the new key value variables we have passed in. parse_str(      join( "&", array_slice( $argv, 1 ) ), $_GET ); Lastly, we will print out the new array to see the results.      echo "\n";      print_r($_GET);      echo "\n"; } To test this script you will need to find the full path to your command line PHP executable file. You can then open up a command line terminal. I

A handy command to find a files location on a Linux machine

One of my old favorite commands to find a file on a Linux machine is the following: find / | grep "somefile.ini" It will use the find command along with grep to find all files matching "somefile.ini". If you want it not to be case-sensitive, you can add the -i option in front of the file name you are searching for. For example: find / | grep -i "somefile.ini"   This example is searching from the root directory of your server. It will output all found matches to your terminal.

Using phpinfo() to find out error reporting settings

Image
When things go wrong, every programmer needs to know for development purposes where to look to debug the problem. The PHP function phpinfo() is the first place to look to find out how PHP is reporting errors. The following will print out all of PHP settings, directives and their values.  echo phpinfo();   The "error_log" directive will let you know where errors are being written to. You can set the local value at run time inside your script or by editing your PHP configuration file "php.ini". For example, to set the local value via your PHP script:  ini_set('error_log','error.log'); Two other directives are also important. The "log_errors" should be set to On and "error_reporting" to  E_ALL Make sure for production (site going live) you turn off "display_errors" and "display_startup_errors" or they will show on your live site.

A simple example of responsive wrapping layout with CSS Flex

If you have been living under a rock, then you probably have not heard about CSS Flexbox and Grid layouts. The old days of float layouts are over for responsive design! Now you can create simple responsive wrapping layouts with CSS Flex.  So, without further ado, here is the example: <style> div.container {     display: flex;     ju stify-content: left;     align-items: center;     flex-wrap: wrap;     column-gap: 10px; } </style> <div class="container">      <div>Item 1</div>      <div>Item 2</div> </div> There you go, an example on how to wrap child div elements or anything for that matter inside the parent container using Flex.

Vanilla JavaScript to get basic webpage document information

I recommend old school vanilla JS when you just want the bare minimum information and light load for developing popup screens etc. The below code I sometime use to get document info the old dirty way without having to load a heavy JavaScript library. The getDocInfo function collects all the variable document information and returns it as a object. You can then use it as you wish over and over again. function getDocInfo(){     var doc = {};     var body = window.document.body;     var document = window.document;     var w = window.innerWidth || document.documentElement.clientWidth || body.clientWidth;     var h = window.innerHeight || document.documentElement.clientHeight || body.clientHeight;     doc.clientHeight = h;     doc.clientWidth = w;     doc.scrollTop = document.scrollingElement.scrollTop || 0;     doc.scrollLeft = document.scrollingElement.scrollLeft || 0;     doc.docHeight = body.clientHeight;     doc.docWidth = body.clientWidth;     doc.scrollYBarWidth = (doc.clientWidth -

How to Fix warning: Cookie “” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value

If you have noticed this warning in your developer's console, then you are not alone. The browser will soon require you to set this for cookie security reasons. The general warning looks like this:  Cookie “PHPSESSID” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute From now on when setting your cookies you will need to set the samesite attribute. For example, for older versions of PHP you will need to set them like the following: session_start(); $session = session_id(); setcookie('Members_Session', $session, 0, '/; samesite=Lax'); For PHP versions 7+ you can use the following to set cookies: setcookie('Members_Session', $session , ["path"=>"/",'samesite' => 'Lax']); The value used depends on your site's requirements. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite    

Using PHP with getID3() to find out if a video is landscape or portrait

In this post I am going to show you how to use PHP with the getID3() engine to find out if a video is landscape or portrait. First things first, you will need to have the getID3() library of files. You can download them here: https://github.com/JamesHeinrich/getID3/archive/master.zip and unzip them to your project. After you have unzipped the folder, navigate to the demos folder and create a new PHP file in there. You can test the demo below in this new PHP file. The first line of code you will need to include is the getID3() library: require_once('../getid3/getid3.php'); Now point to the video file you would like to analyze and create a new instance. $filename = 'some_video.mp4';  $getID3 = new getID3; Now run the analyze method to get the width and height of the video. $file = $getID3->analyze($filename); The file variable now contains an array of information about the video file including the width and height shown below. $width = $file['video']['reso

Using PHP and FFmpeg / FFprobe to get the width and height of a video

For this example I am using Moo0 on a Windows machine. Moo0 FFmpeg/FFprobe are tools used to convert video files and get information about videos. The download page is located here: https://www.moo0.com/software/FFmpeg Please take note that after you download it, to where you installed it on your machine. I am assuming you already have PHP installed on your machine and can run PHP scripts.  To get started, after you have installed it, you need to find the location of binaries folder for Moo0. After I installed it on my machine the location was here: C:\Program Files (x86)\Moo0\FFmpeg 1.07\bin\ffprobe.exe. Now we can create the command to run that will return our width and height of our video file: $cmd = " -show_entries stream=width,height -of default=nw=1:nk=1 a.mp4"; Next I am using the PHP function popen to run the command as a background process. $open = popen('start /B "" "C:\Program Files (x86)\Moo0\FFmpeg 1.07\bin\ffprobe.exe"'. $cmd.'&