donderdag 27 februari 2014

Create wordpress tables with unique index

Sometimes you wish to create tables with multiple unique indexes in wordpress or a tutorial on how to create them, but they are hard to find. Well, I don't give you a tutorial but an example of a database update script and simply leave you to fend for yourself.



Well, here I give you a script where you simply have to add your own sql table creation script.(Easiest way to get your own creation script if you're not fluent in mysql is to create the table layout you want in a tool like phpMyAdmin and export it and take the creation from the .sql file that is generated.)

To create an unique index add the CONSTRAINT UNIQUE INDEX STYLE_CLASS_NAME (name)
after your primary key creation.
Buildup

CONSTRAINT
This means you are telling SQL this is is a rule to which values entered into the rule you are defining need to adhere to this rule.

UNIQUE
This is pretty self explanitory, but it tells SQL that the values needs to be unique

INDEX
This tells SQL to make it in index. Indexes are what you use to speed up lookup of items/rows.

STYLE_CLASS_NAME
This is the name of the rule, not of the column the rule applies to. This Rule prefably is an unique name that also explains what it does and applies to. In my case you could figure out it applies to a style class name ;-)

(name)
This is the column name the rule applies to. This has to be the actual column name


Below my full sql database update script that you can place in the functions.php of your wordpress template or place it in your plugin. Feel free to do with it what you like, but I would appriciate a comment if you use it ;-)



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?php
global $YOURVARIABLEPREFIX_db_version;
$YOURVARIABLEPREFIX_db_version = "1.0";// Update this value to execute the script. 
function JX_modules_install()  
 {
 global $wpdb;
 global $JX_db_version;
 require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
 // You can simply place the code without any explinatiory comments
 // in your sql string
 $table_name = $wpdb->prefix . "_YOURPREFIX_YOURTABLENAME";
 $sql = "CREATE TABLE $table_name (
   id int(11) NOT NULL AUTO_INCREMENT,
   active int(11) NOT NULL,
   name tinytext NOT NULL,
   text text NOT NULL,
   UNIQUE KEY id (id)
   );";
 $res = dbDelta( $sql );
 echo "Update $table_name.<BR/>" . implode('<BR/> - ',$res) . '<BR/><BR/>';
 
 $table_name = $wpdb->prefix . "_YOURPREFIX_YOUROTHERTABLENAME";
 // Or you can place comments by using the mighty dot...
 $sql = "CREATE TABLE $table_name (
   id int(11) NOT NULL AUTO_INCREMENT,".// You can place comments
   "name varchar(255) NOT NULL,". // On why you are
   "something text NULL,". // Using certain talbes
   "content text NOT NULL,". // This way for future reference....
   "UNIQUE KEY id (id),". // ID as primary key, gotta love integers
   "CONSTRAINT UNIQUE INDEX STYLE_CLASS_NAME (name)".//try to create a nice table index for the names so no duplicates can be inserted.
   ");";
 $res = dbDelta( $sql );
 echo "Update $table_name.<BR/>" . implode('<BR/> - ',$res) . '<BR/><BR/>';
 update_option( "YOURVARIABLEPREFIX_db_version", $YOURVARIABLEPREFIX_db_version );
 }
function JX_install_fmv_theme()
 {
 global $YOURVARIABLEPREFIX_db_version;
 if(get_option('YOURVARIABLEPREFIX_db_version') != $YOURVARIABLEPREFIX_db_version)
  {  
  echo '<div id="message" class="updated below-h2"><p>The database for the WHAT EVER YOUR PLUGIN/TEMPLATE NAME IS need to be updated from version ';
  echo get_option('YOURVARIABLEPREFIX_db_version');
  echo ' to version '. $YOURVARIABLEPREFIX_db_version .'<BR/><BR/>';
  echo 'Installing database updates & settings<BR/>';
  JX_modules_install();
  echo '<BR/>Update complete. </p></div>';
  }
 }
// This is to make sure this gets executed.
// You can also attach this to a hook if you like.
JX_install_fmv_theme();
?>

maandag 24 februari 2014

Chaning the order of appearance of elements in a responsive webdesign layout

Sometimes you wish to change the ordering of elements when an website get's resized, but alas native css doesn't support "moving" elements from one position to another.

That is why I've written my own library to help with that so that even if elements have to appear at an totally different order that is totally managable.

With this library it's not even important in which order your html div's are placed within the document, because they get recalculated at every screen resize to their approriate positions.

Now, because what I'm trying to explain is pretty abstract below the visualisation of what I mean:

Say that this is your website. The natural flow is that the red and blue block are aligned left and the gray blok right.
What happens if you have a responsive layout, the gray block has to appear or as whole above the red or below the red. You cannot extract one block and place that where you wish to place it from the gray block.

This is an example of the desired result with a responsive view on mobile. You can see that the first block fromt the gray set has been placed under the red and the rest at the bottom.
Doing this in pure css is tricky if not impossible.

That is why I've written my own library to help with the sorting. Below my library(which is dependant on jQuery. If you need a library that is not dependant on library that is not jQuery in dependant contact me:
To minify this code feel free to use: http://www.minifyjavascript.com/, but do please keep the comment with the copyright notice in place.


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* Copyright 2014 Michael Dibbets, all rights reserved. 
    This library is free to use for non commercial use, 
    if you leave a comment below the blog post at 
    http://all-purpose-programming.blogspot.nl/2014/02/chaning-order-of-appearance-of-elements.html
    where you are implementing this libary.
    For commercial use contact me to come to an licensing agreement.
    mdibbets [at] outlook [dot] com
    My prices are fair and reasonable.
    ususage of this script without notification of the author 
    in the before mentioned ways is not permitted.
*/
function JX_responsive_sort(precursor)
    {
    if(typeof precursor == 'undefined')
        {
        precursor = 'conditional';
        }
    // our sorting array
    var orderofthings = new Array();
    // window width 
    var windowwidth = $(window).innerWidth();
    // get all classes named conditional
    jQuery('.'+precursor).each(function()
       {
       // get all classes of the conditional element
       var classList = jQuery(this).attr('class').split(/\s+/);
       // loop through all classes of the current element
       // backwards compatible... of course
       for(c=0;c<classList.length;c++)
          {
          item=classList[c];
          // no need for this one bub
          if(item != precursor)
              {
              if(item.substring(0,11) == precursor)
                  {
                  // sanitise the item
                  item = item.substring(12,item.length);
                  // from which screenwidth is this rule active?
                  var startwidth = parseInt(item.substring(0,item.indexOf('_'))); 
                  // to which screenwidth is this rule active?
                  var endwidth = parseInt(item.substring(item.indexOf('_')+1,item.indexOf('_',item.indexOf('_')+1)));
                  if(windowwidth >= startwidth && windowwidth <= endwidth)
                      {
                      // remove the widths so all that remains are commands
                      item = item.substring(item.indexOf('_',item.indexOf('_')+1)+1,item.length);    
                      // split on hypens, since they are the commands separators
                      var commands = item.split(/-/);
                      for(i=0;i<commands.length;i++)
                          {
                          // get the instructions
                          var instructions = commands[i].split('_');
                          // to know the command remove the first element
                          var command = instructions.shift();
                          // command order - Instruction to display the elements in the desired order.
                          // This is a top level ordering of parent elements in the conditional_mainwrap 
                          // In order to change the ordering of child elements you'll have to "pop" them
                          // a level higher.
                          // allowed variables:
                          // 0 : order number priority. Try not to cause conflicts
                          if(command == 'order')
                              {
                              // add the this element at the desired position into the order of things.
                              orderofthings.push({order: instructions[0] , theobj : this });
                              }
                          // command pop - Instruction to remove the current element from its parent,
                          // and attach it to the parents parent.
                          if(command == 'pop')
                              {
                              // an item that switches positions needs an "returning" wrapper.
                              // that is the first parent.
                              // Then we have the normal container that needs to be escaped.
                              // Then we have parent where we wish to attach it to.
                              if(jQuery(this).parent().attr('id') == precursor + '_wrap_' + jQuery(this).attr('id'))
                                  {
                                  jQuery(this).appendTo($(this).parent().parent().parent());
                                  }
                              }
                          // command repop - Instruction to return the current element to it's designated position
                          // This is why a poppable element needs a wrapper, so we know where to return it.
                          if(command == 'repop')
                               {
                               jQuery(this).appendTo('#conditional_wrap_'+jQuery(this).attr('id'));
                               }
                          }
                      }
                  }
              }              
          }
       });
    // set a simple variable to get the jQuery object of the parent wrap
    parentkeeper = jQuery('.'+precursor+'_mainwrap');
    // sort the arrays so the orderofthings get's it's sorting from the ORDER command.
    orderofthings = orderofthings.sort(keysrt('order',false));
    for(c=0;c<orderofthings.length;c++)
        {
        if(typeof orderofthings[c] != 'undefined')
            {
            jQuery(orderofthings[c]['theobj']).appendTo(parentkeeper);
            }
        }
    }
jQuery(document).ready(function(){
JX_responsive_sort();
});
jQuery( window ).resize(function() 
    {
    JX_responsive_sort();
    });
function keysrt(key,desc) {
  return function(a,b){
   return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);
  }
}

The string 'conditional' is optional, but if it's not defined it will revert to 'conditional'.

This css selector has to be used in all elements you wish to manipulate. Otherwise the library won't recognise your elements you wish to sort.

Some example HTML code:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<HTML>
<HEAD>
<STYLE type="text/css">
#consol {
    font-family:courier;
    color:lime;
    font-weight:400;
    background-color:black;
    border:1px inset gray;
    padding-left:10px;

}
span
    {
        display:inline-block;
        margin: 50px 50px;
        font-size:4em;
        font-weight:800;
        text-shadow: 3px 3px 10px gray;
        font-family:sans-serif;
    }

#red {
    background-color:red;
    border: 1px solid brown;
    display:inline-block;
}
#yellow1, #yellow2
    {
    background-color:yellow;
    border: 1px solid lightbrown;
    }
#black
    {
    display:inline-block;
    border:1px solid black;
    background-color:gray;
    }
#green1, #green2, #green3
    {
    display:inline-block;
    background-color:lime;
    border:1px solid darkgreen;
    }
#blue
    {
    display:inline-block;
    border:1px solid darkblue;
    background-color:lightblue;
    }
#purple1, #purple2, #purple3
    {
    display:block;
    border: 1px solid darkpurple;
    background-color:purple;
    }
/* desktops and big resolution screens that can handle the normal layout */
@media only screen and (min-width: 875px) {
#red {
    width:600px;
}

#yellow1, #yellow2
    {
    width:250px;
    height:300px;
    margin:20px;
    float:left;
    }
#black
    {
    float:right;
    }
#green1, #green2, #green3
    {
    clear:both;
    float:right;
    width:200px;
    height:150px;
    margin:20px;
    }
#blue
    {
    width:600px;
    }
#purple1, #purple2, #purple3
    {
    width:150px;
    margin:25px;
    float:left;
    height:200px;
    }
}
/* small screens */
@media only screen and (max-width: 875px) {
#red {
    width:100%;
}
#yellow1, #yellow2
    {
    width:90%;
    margin:5%;
    float:left;
    }
#black
    {
    width:100%;
    }
#green1, #green2, #green3
    {
    width:90%;
    margin:5%;
    }
#blue
    {
    width:100%;
    }
#purple1, #purple2, #purple3
    {
   width:90%;
    margin:5%;
    }
}
</STYLE>
</HEAD>
<BODY>
<div class="conditional conditional_mainwrap">
  <div id="black" class="conditional conditional_0_875_order_4 conditional_875_3000_order_1">
    <div id="conditional_wrap_green1" class="conditional">
        <div id="green1" class="conditional conditional_0_875_pop-order_2 conditional_875_3000_repop whoa">
            <span>1</span>
        </div>
    </div>
    <div id="green2">
        <span>2</span>
    </div>
    <div id="green3">
        <span>3</span>
    </div>
</div>
<div id="red" class="conditional conditional_0_875_order_1 conditional_875_3000_order_2">
    <div id="yellow1">
        <span>1</span>
    </div>
    <div id="yellow2">
        <span>2</span>
    </div>
</div>

<div id="blue" class="conditional conditional_0_875_order_3 conditional_875_3000_order_3">
    <div id="purple1">
        <span>1</span>
    </div>
    <div id="purple2">
        <span>2</span>
    </div>
    <div id="purple3">
        <span>3</span>
    </div>
</div>
</div>

Now to explain how it works if you can't puzzle it from the example code ;-)

Every class that is affected or has a command for the library needs to have the CSS class that you defined in the precursor.
Then, any commnd for the library to be processed needs to be preceded by the precursor and then an underscore '_'
Then you define the minimal screen width that this command has to be executed.
Then another underscore. Then the maximal screen width where this rule applies to.

Usually these will follow the same max and min widths you have defined in your responsive css selectors.

The library will skip rules that do not fit within the current screen dimensions.

The following commands can be used with this library:

order _ [INT]

The order commands takes one parameter and that is the sorting order that applies to this element.
Does it need to appear as first, as second or as third, etc..
This is defined as an integer value(1,2,3,4,5,6).

pop

You can "pop" an element out of it's container(in the graphic example the gray box) with this command.
To use this command you need to give the element you're popping an unique ID.
Also the element needs to be wrapped with a div with the following ID: precursor_wrap_[ID of the element you wish to pop].
This is to make sure that the element can be returned if it needs to be.
NOTE: do not execute this at top level elements ;-) just saying...

repop

This command is used to "undo" the above command pop


String commands together
Sometimes you wish to use multiple commands in order to get your object at the desired position.
To make a queue of commands concatenate them with a hypen '-' so that you do not need to use multiple classes to do multiple commands.

To first pop and then sort an element use the following string:

conditional_0_875_pop-order_2

What does this do?
conditional : precursor, this tells that this in an instructing css class
0: Is the current screen width bigger or equal then 0 pixels?
875: Is the current screen width smaller or equal then 875 pixels?

if above statements are both true then:

look for commands, command found:
pop: First pop the element out of the current container
First command executed, check if there is a next command:
order: Tell the sorter to sort the current element at integer provided
2: Priority of sorting. Will be shown as second element if there is an element with priority 1
no further commands, continue loop

Another note, and is possibly the most important one... there needs to be a 'mainwrap' where all manipulations happen.

css class: precursor_mainwrap

This is where all the sorted elements will be put into.

Now, to see it in action:

http://jsfiddle.net/mdibbets/5r5A5/

Full screen:

http://jsfiddle.net/mdibbets/5r5A5/embedded/result/

If you have any (intelligent) questions, please don't hesistate to ask me, but kinda same rules as on stackoverflow apply on asking me questions...

If you cannot understand this code from provided code and jsfiddle, this is not for you, go learn stuff then return.;-)

How to get facebook to show the right image on magento shared pages.

On magento it maybe problematic to get og:image right for the right image to show if you share on facebook.
First of all, you need to make a default image, that is at least 200x200 pixels. Otherwise facebook will ignore it and choose it's own image(And facebooks choice of images is usually very poor...)

So, to get the og:image right in facebook is a problem for magento because you have so much  modules to go through to see if there is an image.

So I wrote my own simple processing application to be put in app/design/frontend/base/templatename/page/html/head.phtml

This code will recognize if we are on a product page and wish to share the product image, if we're on a cms page and wish to share the image in the cms page or we are on an aw_blog page from ahead works blog module and want an image from the blogpost.

By default from blogposts and cms pages it will take the first image that is present within the content text.
IF there is an image with -SOCIAL- in the path or image name, it will present that one to facebook as the "chosen" image for sharing. That way you are not forced to use the first image always as the sharing image. Remember that your image that you choose to share has be to be at least 200 by 200 pixels in dimensions for facebook.

To check if your page gets processed properly use the facebook debug tool
https://developers.facebook.com/tools/debug

That way you can resolve any errors that are shown on that page.

If no images can be found in a blogpost, make sure you show a default image. Set the default absolute url in the variable $__JX_default_image.

Please let me know if you extended this for other pages/plugins that are in magento, so I can update this snippet so more programmers can benefit from it.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<meta property="og:image" content="<?php 
$__JX_default_image = 'http://static.host.com/media/wysiwyg/-SOCIAL-/logo.jpg';
if (Mage::registry('current_product'))
 {
 echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'image');
 }
 

elseif($content = Mage::getSingleton('blog/post')->getData('post_content'))
 {
 $cms_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($content);
 $trip = 0;
 $src = array();
 $pos = 0;
 while(strpos($cms_content,'<img ',$pos)!== false)
  {
  $trip++;
  if($trip == 100)break;
  $pos = strpos($cms_content,'<img ',$pos);
  $src[] = substr($cms_content,
     strpos($cms_content,' src="',$pos)+6,
     strpos($cms_content,'"',
      strpos($cms_content,' src="',$pos)+6)
       -
      (strpos($cms_content,' src="',$pos)+6));
  $oldpos = $pos;
  $pos = strpos($cms_content,'"',strpos($cms_content,' src="',$pos)+6);
  }
 $theone = isset($src[0]) ? $src[0] : false;
 if($theone != false)
  {
  foreach($src as $img)
   {
   if(strpos($img,'-SOCIAL-') !== false)
    {
    $theone = $img;
    }
   }
  }
 else
  {
  $theone = $__JX_default_image;
  }
 echo $theone;
 }

elseif($page = Mage::getModel('cms/page')->load(Mage::app()->getRequest()->getParam('page_id', Mage::app()->getRequest()->getParam('id', false))))
 {
 $cms_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($page->getContent());
 $trip = 0;
 $src = array();
 $pos = 0;
 while(strpos($cms_content,'<img ',$pos)!== false)
  {
  $trip++;
  if($trip == 100)break;
  $pos = strpos($cms_content,'<img ',$pos);
  $src[] = substr($cms_content,
     strpos($cms_content,' src="',$pos)+6,
     strpos($cms_content,'"',
      strpos($cms_content,' src="',$pos)+6)
       -
      (strpos($cms_content,' src="',$pos)+6));
  $oldpos = $pos;
  $pos = strpos($cms_content,'"',strpos($cms_content,' src="',$pos)+6);
  }
 $theone = isset($src[0]) ? $src[0] : false;
 if($theone != false)
  {
  foreach($src as $img)
   {
   if(strpos($img,'-SOCIAL-') !== false)
    {
    $theone = $img;
    }
   }
  }
 else
  {
  $theone = $__JX_default_image;
  }
 echo $theone;
 }
else
 {
 echo $__JX_default_image;
 }
 ?>"/>

dinsdag 18 februari 2014

How to recover an acer aspire notebook

As a programmer you are asked to do a variety of things...

My twitter doesn't work,
how do I...
I can't attach an image...

One of the more fun thing is, recovering computers to factory defaults.
Usually it's hitting F11 or F12 at boot time(bios screen) to go into the recovery mode to restore the computer.

 BUT... the trick question is: How do I recover an Acer system from the harddrive?

Almost all big name brands have a recovery partition on their harddrive where they keep a pristine copy of the factory installation.
How to access it, that is a challenge.
You could always use a boot cd and set it to primary boot partition... but that's overcomplicating things.

On an acer, at bios screen press ALT + F10 Simultaniously only at the time that the bios screen shows. Usually 3 times helps. Holding ALT and hitting F10 doesn't usally work. You need to hit them at the same time.

donderdag 6 februari 2014

Escape codes for special characters in a CSS content element.

Sometimes you need a special character to place within your website, before an html element. That's why I'm providing this list for you so you can easily find which code to use to get your special icon. Wether it's a sideways arrow, or a simple airplane, there are a lot of standard font icons to use.

You can also use this website to see if different browsers/platforms will render the same icons.

I'd love to show you the icons as is, even if you don't have javascript enabled, but blogger won't accept a post of 1.8 million characters for some reason...
That's why the first 200 are show if you don't have javascript enabled.
Return with a javascript enabled browser and see all ten thousand unicode characters.

CSSElement::before {content:'\0';}
escape code: \0

CSSElement::before {content:'\1';}
escape code: \1

CSSElement::before {content:'\2';}
escape code: \2

CSSElement::before {content:'\3';}
escape code: \3

CSSElement::before {content:'\4';}
escape code: \4

CSSElement::before {content:'\5';}
escape code: \5

CSSElement::before {content:'\6';}
escape code: \6

CSSElement::before {content:'\7';}
escape code: \7

CSSElement::before {content:'\8';}
escape code: \8

CSSElement::before {content:'\9';}
escape code: \9

CSSElement::before {content:'\10';}
escape code: \10

CSSElement::before {content:'\11';}
escape code: \11

CSSElement::before {content:'\12';}
escape code: \12

CSSElement::before {content:'\13';}
escape code: \13

CSSElement::before {content:'\14';}
escape code: \14

CSSElement::before {content:'\15';}
escape code: \15

CSSElement::before {content:'\16';}
escape code: \16

CSSElement::before {content:'\17';}
escape code: \17

CSSElement::before {content:'\18';}
escape code: \18

CSSElement::before {content:'\19';}
escape code: \19

CSSElement::before {content:'\20';}
escape code: \20

CSSElement::before {content:'\21';}
escape code: \21

CSSElement::before {content:'\22';}
escape code: \22

CSSElement::before {content:'\23';}
escape code: \23

CSSElement::before {content:'\24';}
escape code: \24

CSSElement::before {content:'\25';}
escape code: \25

CSSElement::before {content:'\26';}
escape code: \26

CSSElement::before {content:'\27';}
escape code: \27

CSSElement::before {content:'\28';}
escape code: \28

CSSElement::before {content:'\29';}
escape code: \29

CSSElement::before {content:'\30';}
escape code: \30

CSSElement::before {content:'\31';}
escape code: \31

CSSElement::before {content:'\32';}
escape code: \32

CSSElement::before {content:'\33';}
escape code: \33

CSSElement::before {content:'\34';}
escape code: \34

CSSElement::before {content:'\35';}
escape code: \35

CSSElement::before {content:'\36';}
escape code: \36

CSSElement::before {content:'\37';}
escape code: \37

CSSElement::before {content:'\38';}
escape code: \38

CSSElement::before {content:'\39';}
escape code: \39

CSSElement::before {content:'\40';}
escape code: \40

CSSElement::before {content:'\41';}
escape code: \41

CSSElement::before {content:'\42';}
escape code: \42

CSSElement::before {content:'\43';}
escape code: \43

CSSElement::before {content:'\44';}
escape code: \44

CSSElement::before {content:'\45';}
escape code: \45

CSSElement::before {content:'\46';}
escape code: \46

CSSElement::before {content:'\47';}
escape code: \47

CSSElement::before {content:'\48';}
escape code: \48

CSSElement::before {content:'\49';}
escape code: \49

CSSElement::before {content:'\50';}
escape code: \50

CSSElement::before {content:'\51';}
escape code: \51

CSSElement::before {content:'\52';}
escape code: \52

CSSElement::before {content:'\53';}
escape code: \53

CSSElement::before {content:'\54';}
escape code: \54

CSSElement::before {content:'\55';}
escape code: \55

CSSElement::before {content:'\56';}
escape code: \56

CSSElement::before {content:'\57';}
escape code: \57

CSSElement::before {content:'\58';}
escape code: \58

CSSElement::before {content:'\59';}
escape code: \59

CSSElement::before {content:'\60';}
escape code: \60

CSSElement::before {content:'\61';}
escape code: \61

CSSElement::before {content:'\62';}
escape code: \62

CSSElement::before {content:'\63';}
escape code: \63

CSSElement::before {content:'\64';}
escape code: \64

CSSElement::before {content:'\65';}
escape code: \65

CSSElement::before {content:'\66';}
escape code: \66

CSSElement::before {content:'\67';}
escape code: \67

CSSElement::before {content:'\68';}
escape code: \68

CSSElement::before {content:'\69';}
escape code: \69

CSSElement::before {content:'\70';}
escape code: \70

CSSElement::before {content:'\71';}
escape code: \71

CSSElement::before {content:'\72';}
escape code: \72

CSSElement::before {content:'\73';}
escape code: \73

CSSElement::before {content:'\74';}
escape code: \74

CSSElement::before {content:'\75';}
escape code: \75

CSSElement::before {content:'\76';}
escape code: \76

CSSElement::before {content:'\77';}
escape code: \77

CSSElement::before {content:'\78';}
escape code: \78

CSSElement::before {content:'\79';}
escape code: \79

CSSElement::before {content:'\80';}
escape code: \80

CSSElement::before {content:'\81';}
escape code: \81

CSSElement::before {content:'\82';}
escape code: \82

CSSElement::before {content:'\83';}
escape code: \83

CSSElement::before {content:'\84';}
escape code: \84

CSSElement::before {content:'\85';}
escape code: \85

CSSElement::before {content:'\86';}
escape code: \86

CSSElement::before {content:'\87';}
escape code: \87

CSSElement::before {content:'\88';}
escape code: \88

CSSElement::before {content:'\89';}
escape code: \89

CSSElement::before {content:'\90';}
escape code: \90

CSSElement::before {content:'\91';}
escape code: \91

CSSElement::before {content:'\92';}
escape code: \92

CSSElement::before {content:'\93';}
escape code: \93

CSSElement::before {content:'\94';}
escape code: \94

CSSElement::before {content:'\95';}
escape code: \95

CSSElement::before {content:'\96';}
escape code: \96

CSSElement::before {content:'\97';}
escape code: \97

CSSElement::before {content:'\98';}
escape code: \98

CSSElement::before {content:'\99';}
escape code: \99

CSSElement::before {content:'\100';}
escape code: \100

CSSElement::before {content:'\101';}
escape code: \101

CSSElement::before {content:'\102';}
escape code: \102

CSSElement::before {content:'\103';}
escape code: \103

CSSElement::before {content:'\104';}
escape code: \104

CSSElement::before {content:'\105';}
escape code: \105

CSSElement::before {content:'\106';}
escape code: \106

CSSElement::before {content:'\107';}
escape code: \107

CSSElement::before {content:'\108';}
escape code: \108

CSSElement::before {content:'\109';}
escape code: \109

CSSElement::before {content:'\110';}
escape code: \110

CSSElement::before {content:'\111';}
escape code: \111

CSSElement::before {content:'\112';}
escape code: \112

CSSElement::before {content:'\113';}
escape code: \113

CSSElement::before {content:'\114';}
escape code: \114

CSSElement::before {content:'\115';}
escape code: \115

CSSElement::before {content:'\116';}
escape code: \116

CSSElement::before {content:'\117';}
escape code: \117

CSSElement::before {content:'\118';}
escape code: \118

CSSElement::before {content:'\119';}
escape code: \119

CSSElement::before {content:'\120';}
escape code: \120

CSSElement::before {content:'\121';}
escape code: \121

CSSElement::before {content:'\122';}
escape code: \122

CSSElement::before {content:'\123';}
escape code: \123

CSSElement::before {content:'\124';}
escape code: \124

CSSElement::before {content:'\125';}
escape code: \125

CSSElement::before {content:'\126';}
escape code: \126

CSSElement::before {content:'\127';}
escape code: \127

CSSElement::before {content:'\128';}
escape code: \128

CSSElement::before {content:'\129';}
escape code: \129

CSSElement::before {content:'\130';}
escape code: \130

CSSElement::before {content:'\131';}
escape code: \131

CSSElement::before {content:'\132';}
escape code: \132

CSSElement::before {content:'\133';}
escape code: \133

CSSElement::before {content:'\134';}
escape code: \134

CSSElement::before {content:'\135';}
escape code: \135

CSSElement::before {content:'\136';}
escape code: \136

CSSElement::before {content:'\137';}
escape code: \137

CSSElement::before {content:'\138';}
escape code: \138

CSSElement::before {content:'\139';}
escape code: \139

CSSElement::before {content:'\140';}
escape code: \140

CSSElement::before {content:'\141';}
escape code: \141

CSSElement::before {content:'\142';}
escape code: \142

CSSElement::before {content:'\143';}
escape code: \143

CSSElement::before {content:'\144';}
escape code: \144

CSSElement::before {content:'\145';}
escape code: \145

CSSElement::before {content:'\146';}
escape code: \146

CSSElement::before {content:'\147';}
escape code: \147

CSSElement::before {content:'\148';}
escape code: \148

CSSElement::before {content:'\149';}
escape code: \149

CSSElement::before {content:'\150';}
escape code: \150

CSSElement::before {content:'\151';}
escape code: \151

CSSElement::before {content:'\152';}
escape code: \152

CSSElement::before {content:'\153';}
escape code: \153

CSSElement::before {content:'\154';}
escape code: \154

CSSElement::before {content:'\155';}
escape code: \155

CSSElement::before {content:'\156';}
escape code: \156

CSSElement::before {content:'\157';}
escape code: \157

CSSElement::before {content:'\158';}
escape code: \158

CSSElement::before {content:'\159';}
escape code: \159

CSSElement::before {content:'\160';}
escape code: \160

CSSElement::before {content:'\161';}
escape code: \161

CSSElement::before {content:'\162';}
escape code: \162

CSSElement::before {content:'\163';}
escape code: \163

CSSElement::before {content:'\164';}
escape code: \164

CSSElement::before {content:'\165';}
escape code: \165

CSSElement::before {content:'\166';}
escape code: \166

CSSElement::before {content:'\167';}
escape code: \167

CSSElement::before {content:'\168';}
escape code: \168

CSSElement::before {content:'\169';}
escape code: \169

CSSElement::before {content:'\170';}
escape code: \170

CSSElement::before {content:'\171';}
escape code: \171

CSSElement::before {content:'\172';}
escape code: \172

CSSElement::before {content:'\173';}
escape code: \173

CSSElement::before {content:'\174';}
escape code: \174

CSSElement::before {content:'\175';}
escape code: \175

CSSElement::before {content:'\176';}
escape code: \176

CSSElement::before {content:'\177';}
escape code: \177

CSSElement::before {content:'\178';}
escape code: \178

CSSElement::before {content:'\179';}
escape code: \179

CSSElement::before {content:'\180';}
escape code: \180

CSSElement::before {content:'\181';}
escape code: \181

CSSElement::before {content:'\182';}
escape code: \182

CSSElement::before {content:'\183';}
escape code: \183

CSSElement::before {content:'\184';}
escape code: \184

CSSElement::before {content:'\185';}
escape code: \185

CSSElement::before {content:'\186';}
escape code: \186

CSSElement::before {content:'\187';}
escape code: \187

CSSElement::before {content:'\188';}
escape code: \188

CSSElement::before {content:'\189';}
escape code: \189

CSSElement::before {content:'\190';}
escape code: \190

CSSElement::before {content:'\191';}
escape code: \191

CSSElement::before {content:'\192';}
escape code: \192

CSSElement::before {content:'\193';}
escape code: \193

CSSElement::before {content:'\194';}
escape code: \194

CSSElement::before {content:'\195';}
escape code: \195

CSSElement::before {content:'\196';}
escape code: \196

CSSElement::before {content:'\197';}
escape code: \197

CSSElement::before {content:'\198';}
escape code: \198

CSSElement::before {content:'\199';}
escape code: \199

CSSElement::before {content:'\200';}
escape code: \200