Categoria: webmaster

Pubblicato il

Regex for “space”

It can happen that you want replace a double space before <p>: use the \s. I.g. to replace

,</p>

<p>

You should use this find: ,</p>\n\n\s\s</p>

Pubblicato il

Regex replace tags around digits

If you would replace all <p>[some digits, such as "10", or "23", or "348"]</p>, you could use this regex code:

search: <p>(.*?\d{2})</p>

replace: <h6>\1</h6>

Indeed (.*?) is whatever, and (.*?\d{2}) is whatever number (with more than two digits).

Pubblicato il

Html emojis

Here you can find a complete set of available emojis to use in your website.

You can have an image from a simple html code, like this:

📆 🌤

To add an emoji via css, you have to set something like

.book:before {
  content: "\01F4D5";
}
Pubblicato il

leaving xampp

For many years I used xampp (for Linux: Lampp), because of its simplicity, unlike the “native” Linux apache/php/mysql apps, wich seemed to me very difficult to configure.

The pro of xampp is its simplicity (with few mouse clicks you can do all to install and configure your local php/mysql sever). But the con is that your xampp apps don’t are updated regularly, and there can raise conflicts with Linux “native” mysql.

Therefore I decided to learn how to configure “native” (system-rooted, so to say) apache/php/mysql apps. I chose to install mariadb and not mysql.

And in these last weeks I managed to configure the server, with the following steps:

  • sudo apt install -y apache2
  • sudo apt install -y php
  • sudo apt install mariadb*
  • sudo mysql_secure_installation
  • sudo mysql -u root -p (and within >mysql shell
    • use mysql
    • GRANT ALL PRIVILEGES ON . TO 'root'@'localhost' WITH GRANT OPTION;
    • SHOW GRANTS FOR 'root'@localhost; //to check if it is all right
    • FLUSH PRIVILEGES;
    • exit;
  • sudo systemctl enable mariadb.service

Pubblicato il

tables and small screens

Tables, mainly if with more than two columns, are badly rendered on small screens (smartphones, tablets and the like). Indeed, not only they are unreadable, but they mess up the whole page, making it unreadable on small screens.

Therefore the best would be avoid as possible tables used as layout or even concept map.

The only tables you should use are for data (as from a database). In these cases you can use this helpful css code:

 <style type="text/css">
 /*<![CDATA[*/
 table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
 }

 table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
 }

 table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
 }

 table th,
 table td {
  padding: .625em;
  text-align: center;
 }

 table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
 }

 @media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
 }

 /*]]>*/
 </style>

In this way you can get you data perfectly readable on small screen., as you can see in this example.

Pubblicato il

How to set the css :.after size

It may happen that an image you chose for a css after content is too big. Therefore you need to resize it.

The following code doesn’t work:

yourelement::after {
  content: url(image.jpg);
  width: 10px;
}

You should use this, instead

yourelement::after{
    background-image: url(image);
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Pubblicato il

How to switch a php variable according to the server address

I managed to switch my websites links (containing a php variable: $root) according to the server address. If they are in localhost the variable begins with: http://localhost , if they are on remote the variable is the remote address.

The php code is quite simple:

if ($_SERVER['SERVER_NAME'] == "localhost")
{$root_yourwebsiteA = "http://localhost/your path/yourwebsiteA/";
 $root_yourwebsiteB = "http://localhost/your path/yourwebsiteB/";
 $root_yourwebsiteC = "http://localhost/your path/yourwebsiteC/";
}
else 
{$root_yourwebsiteA = "http://remote path/yourwebsiteA/";
 $root_yourwebsiteB = "http://remote path/yourwebsiteB/";
 $root_yourwebsiteC = "http://remote path/yourwebsiteC/";
}

Pubblicato il

how to pass a php variable to javascript

You can use a code like the following:

<?php 
  $name= "Hello World";
?> 
<script type="text/javascript"> 
  var x = "<?php echo "$name"?>";      
  document.write(x);    
</script>

and then insert this code in a php page: but not with a js extension, but with some like inc

Pubblicato il

embed a div from another page

The way with less code is a jquery script. Like the following:

<p id="new"></p>

<script>
$( "#new" ).load( "/your-path/your-file.php #your-div" );
</script>

The only security limit is that you cannot use an absolute path, beginning with https:// .

But you can use a php variable to set your javascript value so that it may be available from any folder (sub-folder) of your website. See here how to pass a php variable to javascript.