Switching the order of block elements with CSS

CSS:

#blockContainer {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
#blockA {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
#blockB {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

 

HTML:

<div id="blockContainer">
    <div id="blockA">Block A</div>
    <div id="blockB">Block B</div>
    <div id="blockC">Block C</div>
</div>

 

And another one:

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

 

Source:

https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css

 

Removing emoji cruft from a WP installation

Just add this to the child functions.php and the jobs a good ‘un.

remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); 
remove_action( 'wp_print_styles', 'print_emoji_styles' ); 
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Sites for reference – Magento & HTTP headers

An online checker for gzip output from servers: http://www.gidnetwork.com/tools/

And for those file permissions to make a site secure for Magento:

find . -type f -exec chmod 400 {} \;
find . -type d -exec chmod 500 {} \;
find var/ -type f -exec chmod 600 {} \;
find media/ -type f -exec chmod 600 {} \;
find var/ -type d -exec chmod 700 {} \;
find media/ -type d -exec chmod 700 {} ;
But if you want to add in an extension, you need to set them thus:

find . -type d -exec chmod 700 {} \;
find . -type f -exec chmod 600 {} \;
Then reset the file permissions with the first set of commands after the extenions are loaded.

These commands really lock down the server and it can be a pain to reset the permissions to allow updates etc., but if you’re having troubles with hack attempts, this is one way to be sure you haven’t left the key under the mat.

Leverage browser caching

Notes: Leverage browser caching
Firstly, make sure you have the mod_expires module enabled in your httpd.conf file. It should be enabled but just check to be sure.

This block of code is usefully included your .htaccess file and sets the expiry to be a year from the date of delivery to the browser. There are nuances about what the expiry time is (expiry starts at delivery or is started from the date of creation of the asset) but a year is going to be good in most cases

Then copy this into the .htacess of your site and restart or reload your httpd/apache2 server

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
</IfModule>
## EXPIRES CACHING ##
It works nicely for my servers so it might work for yours too. As ever, all risk is your own. Credits: https://gtmetrix.com/leverage-browser-caching.html

enable gzip compression by adding instructions in your .htaccess

Notes: enable gzip compression by adding instructions in your .htaccess

This works by adding compression to Apache’s delivery of items. drop this into the bottom of your .htaccess and then see some enhancement of performance. You’ll need to have gzip module enabled in your apache config.

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:

<files *.html>
SetOutputFilter DEFLATE
</files>

It’s worked for me on a number of WordPress sites so may help with yours. As ever, all risk is your own. Credits: http://www.revealingthestuffs.com/increase-page-speed-score/