Scripts


Pure Javascript snippet to find duplicate DOM ids

Sometimes is necessary to find out duplicate element ids in DOM.
There is a pure javascript snippet to copy paste in you browser console,
which will inform you the number of duplicates and will enumerate them.

/* Find duplicate DOM ids | (c) 2021 - Petros Kyladitis */
let uid = Array() ;
let did = Array() ;
let e = document.querySelectorAll('*[id]') ;
for(i=0; i<e.length; i++){
  if(!uid.includes(e[i].id)){
    uid.push(e[i].id) ;
  }else{
    did.push(e[i].id) ;
  }
}

let msg = "There are " + (did.length>0 ? did.length : "NO") + " duplicate ids in DOM\n" ;
for(j=0; j<did.length; j++){
  msg += "\n" + did[j] ;
}

console.log(msg) ;

Update: ElStr.class.php goes to v1.2

php-iconThe PHP Class ElStr with usefull functions for modern greek unicode text manipulation, such as transcript greek to latin, or accent marks stripping is now updated to version 1.2

What’s new?

  • mixed case support for difthongs, etc:
    • μπ => mp or τζ => tz
    • Μπ => Mp or Τζ => Tz
    • μΠ => mP or τΖ => tZ
    • ΜΠ => MP or ΤΖ => TZ

  • Two new accent mark removal methods:
    • strtolower_no_accent($str) – that Convert unicode string to lower case, without accent marks for the greek letters
    • str_no_accent($str) – that Remove accent marks for the greek letters at passed unicode string (no any case convertion)

Examples

require('ElStr.class.php') ;
$txt = "Το μπαρμπουνάκι θέλει μπυρίτσα" ;
$elstrObj = new El_Str() ;

echo $elstrObj->to_latin($txt) ;
//echoes: To barmpounaki thelei byritsa

echo $elstrObj->strtoupper_no_accent($txt) ;
//echoes: ΤΟ ΜΠΑΡΜΠΟΥΝΑΚΙ ΘΕΛΕΙ ΜΠΥΡΙΤΣΑ

echo $elstrObj->strtolower_no_accent($txt) ;
//echoes: το μπαρμπουνακι θελει μπυριτσα

echo $elstrObj->str_no_accent($txt) ;
//echoes: Το μπαρμπουνακι θελει μπυριτσα

Downloads

Download v1.2      View Source


ElStr.class.php

php-iconA PHP Class with usefull functions for modern greek unicode text manipulation, such as transcript greek to latin, or upper case greek letters stripped from accent marks.

Functions
string to_latin($str)

  • Convert greek letters at the string to latins, as ISO:843 / ΕΛΟΤ:743 defines
  • $str string to convert
  • Returns converted string

string strtoupper_no_accent($str)

  • Convert unicode string to upper case, without accent marks for the greek letters
  • $str string to upper case convert
  • Returns converted string

bool is_upper($char, $notGreekException = false)

  • Check if $char is upper case
  • $char is the character for checking
  • If $notGreekException == true, throws exception when char is not greek
  • Returns true if $char is upper case, else false

bool is_lower($char, $notGreekException = false)

  • Check if $char is lower case
  • $char is the character for checking
  • If $notGreekException == true, throws exception when char is not greek
  • Returns true if $char is lower case, else false

Download      Frok it at Github

License
This project is free software, distributed under the terms & conditions of the FreeBSD License.


SQL syntax highlighter for PrismJS

After the Python highlighter, here is an SQL syntax highligher for PrismJS. Covering over 380 important keywords from the most famous SQL database implementations, such as MySQL, Microsoft SQL Server etc.

SQL Highlighting Sample


//one line comment
/* 
 * multiline 
 * comments
 */
SELECT Book.title 
 FROM Book
 JOIN Book_author ON Book.isbn = Book_author.isbn
 GROUP BY Book.title
HAVING Book.price > 10.4 AND Book_author.name = "Frank"
ORDER BY No_of_Authors ; -- another comment style

 
Until my GitHub fork merged with the original PrismJS project, you can download this add-on and use it with the existing PrismJS script, by putting it after the the prism.min.js script definition and by using the value language-sql at class property of the code element you like to highlight.

Usage

. . .
<script src="prism.min.js"></script>
<script src="prism-sql.min.js"></script>
. . .
<pre><code class="language-sql">
. . .

 
Download Prism SQL Higlighter


Python syntax highlighter for PrismJS

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind, developed by Lea Verou.

I recently changed to this highlighter on my website. But except the officialy supported languages I need to use it for highlight a WOL Python script. Thanks to the fact that it is easy extensible, I create some add-on code for Python syntax.

Python Highlighting Sample

# comment
import library
def main(arg=15):
    print("Hello world!") ;

 
Here you can see the source code of the addon.

Add-on source code (minified)

Prism.languages.python={comment:{pattern:/(^|[^\\])#.*?(\r?\n|$)/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,keyword:/\b(as|assert|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|pass|print|raise|return|try|while|with|yield)\b/g,boolean:/\b(True|False)\b/g,number:/\b-?(0x)?\d*\.?[\da-f]+\b/g,operator:/[-+]{1,2}|=?&lt;|=?&gt;|!|={1,2}|(&){1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|~|\^|%|\b(or|and|not)\b/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};

 
Until my GitHub fork merged with the original PrismJS project you can use it with the existing PrismJS script, by putting it after the the prism.min.js script definition and by using the value language-python at class property of the code element you like to highlight.

Usage

. . .
<script src="prism.min.js"></script>
<script src="prism-python.min.js"></script>
. . .
<pre><code class="language-python">
. . .

 
Download Prism Python Higlighter

 


Blink Element’s Border the CSS way

Before 5 months, I wrote about a javascript function to make the border of an element blink infinite, using DOM. But, blinking an element’s border it’s also possible with CSS3 animation element, without any javascript usage.

At the stylesheet, just add a keyframe, setting the border-color property and timed at the 50% of the animation.

Also, at the blinking element class, use the animation property, with the keyframe above, the blinking duration you want, timing function at step-end, iteration count infinite and direction alternate.

Because of only prefixed CSS animation element support at the most browsers for the moment,
it’s highly recomended to use the -prefix-free script from Lea Verou, to write pure unprefixed CSS3 code and support all major browsers, until they closely aligned with the CSS3 standards.

For the moment, that support @keyframe and animation CSS elements (even in the prefixed format) are the latest versions of Firefox, Chrome and Safari.

The CSS code


@keyframes blink { 
   50% { border-color: #ff0000; } 
}
table{ /*or other element you want*/
    animation-name: blink ;
    animation-duration: .5s ;
    animation-timing-function: step-end ;
    animation-iteration-count: infinite ;
    animation-direction: alternate ;
}

The CSS with all animation properties combined at one line


@keyframes blink { 
   50% { border-color: #ff0000; } 
}
table{ /*or other element you want*/
    animation: blink .5s step-end infinite alternate;
}

 
And here is a live demo of the Amiga Guru Meditation message, using blink border at dabblet.com/gist/2694667

 


PHP random password generator

Here is a function for random password generation, could be useful in a lot of PHP projects.


/**
* @author Petros Kyladitis - 2012
* @license MIT License
*
* @description random password generator
* @param $min_length the minimum size of the password
* @param $length the maximum size of the password
* @param $chars a string contains all acceptable password characters
* @return a string with the generated password
*/

function rand_pass($min_length, $max_length=null, $chars="qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPASDFGHJKLZXCVBNM"){
  //if $max_length param is not set, pass $length is the $min_length 
  //param, else a random number between min and max params.
  $length = !isset($max_length) ? $min_length : rand($min_length, $max_length) ;
  
  //the position of the last character of $chars variable
  $chars_end = strlen($chars) - 1;
  
  //variable for store password
  $pass ;
  
  //select a random char from the $chars & concatenate to the $pass
  for($i=0; $i<$length; $i++)
    $pass .= substr($chars, rand(0, $chars_end), 1) ;
  
  return $pass ;
}

Javascript Function: strToPhpChr(str)

There are times when converting a string into PHP concatenated chr( ) functions are very useful.
So, here is a simple javascript function, who do the dirty job.

/**
* @author Petros Kyladitis - 2011
* @license MIT License
* @description get PHP concatenated chr( ) functions from a string
* @param str String to be converted
* @return the PHP code
*/
function strToPhpChr(str){
  var strLen = str.length ;
  var phpCharCode = '' ;
  for(i=0; i<strLen; i++){
    phpCharCode +=  'chr(' + str.charCodeAt(i) +  ').' ; 
  } 
  return phpCharCode.substring(0, phpCharCode.length-1) ; 
} 

Blink Element’s Border Javascript Function

I need a piece of javascript code to make the border of an element blink infinite.
So I write the next function, that changes element’s border color (using DOM) to 2nd passed color code. Then make infinite recursion calls of this function, after the passing time by using setTimeout("javascript statement",milliseconds); Use anonymous function as statement to setTimeout for passing altered color parameters each time, set 1st color code to 2nd and vice versa. After every recursive call set all params to null preventing memory leaks.


/**
* @author Petros Kyladitis - 2011
* @license MIT License
*
* @description make the border of an element blink
* @param colorA first border's color code
* @param colorB second border's color code
* @param elementId element id
* @param time blinking time in milliseconds
*/

function blinkBorder(colorA, colorB, elementId, time){
  document.getElementById(elementId).style.borderColor = colorB ;
  setTimeout( function(){
    blinkBorder(colorB, colorA, elementId, time);
    colorB = null;
    colorA = null;
    elementId = null;
    time = null;
  } , time) ;
}