Tag: Coding

Print all properties of JavaScript object

Printing out variables using console.log(variable) is a common way to debug Web Applications. But for object variables looking thru a tree of properties, prototype, and so on is quite annoying…

Here is a simple React Component for outputting a JavaScript object as a HTML <ul> list. Internal properties of object type are also printed as sublists:

export const ListObjectProps = (props) => {
  const { object } = props;

  function renderObjectProps() {
    const result = [];
    for (const property in object) {
      if (typeof object[property] === 'object') {
        result.push(
          <li key={property}>
            {property}:
            <ListObjectProps object={object[property]} />
          </li>
        );
      } else {
        result.push(<li key={property}>{`${property}: ${object[property]}`}</li>);
      }
    }
    return result;
  }

  return <ul>{renderObjectProps()}</ul>;
};

To print the object properties use following JSX code:

  <ListObjectProps object={anyJavaScriptObject} />

Destructuring and access “props” in the same time

Modern ES6 syntax of destructuring becomes popular between JavaScript developers:

const { a, b = defaultValue, c } = props;

React developers also start using this technique, especially for functional components:

const component = ({ index, data = 0, onClick }) => {
...
}

But a new problem (beside unreadable code…) appears:

How to access props.children and other sub-properties that were not extracted?

The solution is simple, use …spread JavaScript syntax!

const component = ({ index, data = 0, onClick, ...props }) => {
...
  <li key={index} onClick={onClick.bind(data)}>
    {props.children}
  </li>
...
}

This is the shortest single line solutions to unpack properties and access the rest of object’s data at the same time!

Anyway, you can always roll back to readable JS code, just add a single line:

const component = (props) => {
  const { index, data = 0, onClick } = props; 
...
  <li key={index} onClick={() => onClick(data)}>
    {props.children}
  </li>
...
}

List of Categories and List of Tags for WordPress website

There is no standard way to list non-empty categories or output the list of all tags in WordPress.

Here are code of two useful “shortcodes”:

/**
 * Generates list of categories. Set $atts('counts' => true) to show number of items in every category 
 */
function html_list_categories( $atts ) { 
	$terms = get_terms( 'category', array('hide_empty' => true) );
	if ( !$terms ) return '';

	if ( isset($atts['counts']) ) $showCounts = $atts['counts']; else $showCounts = false;

	$li_items = '';
	foreach( $terms as $t ) {
		$li_items .= "\t" . '<li class="cat-item"><a href="' . get_term_link($t) . '"'; 		  
			if ( $t->description != '') $li_items .= ' title="' . $t->description  . '"'; // add title if description is set		  
		$li_items .= '>'. $t->name . "</a>";
			if ( $showCounts ) $li_items .= " (" . $t->count . ")</li>"; // add count if required
		$li_items .= "\n";
	};

	return "\n<ul class=\"cat-list\">\r\n{$li_items}</ul>\n";
};
add_shortcode( 'list_categories', 'html_list_categories' ); 

/**
 * Generates list of tags. Set $atts('counts' => true) to show number of items for every tag
 */
function html_list_tags( $atts ) { 
	$terms = get_terms( 'post_tag', array('hide_empty' => false) );
	if ( !$terms ) return '';
  
	if ( isset($atts['counts']) ) $showCounts = $atts['counts']; else $showCounts = false;

	$li_items = '';
	foreach($terms as $t) {
		$li_items .= "\t" . '<li class="tag-item"><a href="' . get_term_link($t) . '"'; 		  
			if ( $t->description != '') $li_items .= ' title="' . $t->description  . '"'; // add title if description is set		  
		$li_items .= '>'. $t->name . "</a>";
			if ( $showCounts ) $li_items .= " (" . $t->count . ")</li>"; // add count if required
		$li_items .= "\n";
	};
	
	return "\n<ul class=\"tag-list\">\n{$li_items}</ul>\n";
}
add_shortcode( 'list_tags', 'html_list_tags' );

You can add this code directly into your WordPress theme (function.php or header.php file). But we strongly advice to use one of “code plugins”: Code Snippets, PHP Snippets, etc.

To output Category or Tag lists use “shortcode” in your post or page:

[list_categories]

[list_tags counts="true"]

You can style lists in your own way using CSS classes:

.cat-list {
...
}
.cat-item {
...
}
.tag-list {
...
}
.tag-item {
...
}

How to play system sounds in C#

.NET Framework allows playing system sounds using a simple code: 

SystemSounds.[Type].Play();

But the SystemSounds class supports only 5 types of sound notifications: Asterisk, Beep, Exclamation, Hand, Question.

There is no easy way to play other standard sounds like LowBatteryAlarm, DeviceConnect, DeviceDisconnect, MailBeep, and others from the Windows Sound Scheme.

We in BgRnD are using following function in our C# projects: 

public void PlaySystemSound(string RegistryName)
{
    string fileName = "";

    RegistryKey key = Registry.CurrentUser.OpenSubKey(String.Format(@"AppEvents\Schemes\Apps\.Default\{0}\.Current", RegistryName), false);
    try
    {
        fileName = (string)key.GetValue("", fileName);
    }
    finally
    {
        key.Close();
    }

    if (!File.Exists(fileName)) return;

    SoundPlayer player = new SoundPlayer(fileName);
    try
    {
        player.Play();
    }
    finally
    {
        player.Dispose();
    }
}

The function plays the sound resource specified by the RegistryName parameter. The set of possible names you can find in the System Registry at HKEY_CURRENT_USER\AppEvents\Schemes\Apps\.Default path.

Windows Sounds in the System Registry
Screenshot of Registry Editor to understand where to take Registry Names of system sounds.

You can freely use (copy and paste) this function into any of your projects.

If you still have any programming questions about playing the Windows sound notifications, feel free to ask.

Great tool to generate WMI queries

If you are planning to work with System.Management Namespace in the .NET framework, especially with ManagementObjectSearcher, ManagementObjectCollection, and ManagementObject classes, to perform different Windows Management Instrumentation (WMI) queries, take a look on WMI Code Creator tool by Microsoft.

Without this free utility, you’ll spending lots of time to test your WMI queries via console or other debugging methodology.

Using the WMI Query Builder you can browse WMI namespaces, execute methods and receive WMI events. Also you can automatically generate a working source code to perform WMI queries, either C# or Visual Basic.

Moreover, you can modify and run these management scripts by pressing a single button! Visual Studio is not required for that 🙂

Power of Backward Loops

Loops aka cycles (while, for, do until, etc) are common in programming. Actually they are a language level implementation of the iterator pattern.

Those who learned programming in the college/university, remember lots of tasks for sorting an array or traverse a double-linked list in both directions. But in practice, very few people apply the backward loops.

There are a number of tasks where the reverse iteration automatically solves a bunch of problems, for example:

If you need to release all elements of array/collection/list, it is much easier to start from the end and delete the last element each time, rather then go from the beginning, save the length of the container, make the reference for every deleting object, and so on.

Compare this: 

var len = someCollection.length();
for (i = 0, i < len, i++) {
    var element = someCollection[i];
    someCollection.delete(i);
    delete element;
}

with that: 

var i = someCollection.length();
while (i--) {
    delete someCollection[i];
}

So the backward loop is not only for students, the backward traverse rules in many cases 🙂

Avoid same IDs for HTML elements

Many back-end developers don’t care about clearance of HTML code. They think it is a front-end developers job…

Yes, but no 🙂 Developers should create a bulletproof code on both sides.

Very often, calling the PHP code, that generates some HTML template, for the second time creates two sets of HTML elements with the same IDs. This is wrong!

Here is a workaround to avoid same IDs for HTML elements using a global variable: 

<?php
global $some_global_variable;
if (isset($some_global_variable)) $some_global_variable += 1; else $some_global_variable = 0;   

$form_id = '';
if ($some_global_variable > 0) $form_id = $some_global_variable;
?>

This is an example of HTML template for this hack: 

<form role="search" method="get" id="searchForm<?php echo $form_id ?>" class="searchForm" action="/search/">
    <input type="text" id="searchText<?php echo $form_id ?>" name="search" value="" />
    <input type="submit" id="searchButton<?php echo $form_id ?>" value="" />
</form>

Try to be a good programmer every-time and everywhere!

Print any PHP variable easily

PHP developers often need to print value of different variables directly to the HTML code. But very often PHP variable is out of the current scope, so the echo(); function doesn’t help. This PHP function prints any global (or external scope) variable by its name: 

function print_var($var = 'domain', $url = '')
{
  global $$var, $$$var;
  if ($url != '')
    echo("<a href=\"$url\">${$var}</a>");
  else
    echo(${$var});
}

If you pass some URL as a second parameter you’ll get a clickable link: 

<?php print_var('page') ?>
<?php print_var('domain', '/') ?>
<?php print_var('software', '/download/') ?>
<?php print_var('site', 'http://www.site.com') ?>

We hope this PHP hack will be useful for everybody 🙂

States List for USA and Canada

Same to the countries list we are publishing the list of USA and Canadian states.

States list

Hint: Click on list, press Ctrl+A to select all, Ctrl+C to copy the list.

ISO 3166 Country Names

Every time programmers create the user panel in some program or website they have to search for a list of countries for dropdown or listview control. It is annoying…

So we’ve decided to palace such list in a public place. This is ISO 3166 Country Name list. You can freely use it in own projects.

Country Names

Hint: Click on list, press Ctrl+A to select all, Ctrl+C to copy the list.