Category Archives: Web

Web

Инсталиране на yuicompressor (оптимизиране на js, css)

1. Инсталиране на java
mkdir -p /usr/share/java

wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar -P /usr/share/java

vi /usr/bin/yc

#!/bin/sh

java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"
chmod +x /usr/bin/yc
yc default.css -o default-min.css

yc sample.js -o sample-min.js

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Скриване на елемент за мобилни устройства

Идеята е с javascript да идентифицираме клиента по user agent-а и да скрием id блок от него.

<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
$('#bu1').hide();
}

</script>

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Google maps embed iframe -- респонсив

<style>
    .google-maps {
        position: relative;
        padding-bottom: 30%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>
<br /><br /><center><h3>Map</h3><br /></center>
<div class='google-maps'>
<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2932.58550931219!2d23.29158247261225!3d42.69132162380618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40aa85232c054953:0x408417d08050add6!2sBusiness+Centre+Serdika!5e0!3m2!1sen!2sbg!4v1468307728158&quot; width='600' height='450' frameborder='0' style='border:0' allowfullscreen></iframe>
</div>
VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

mysql tips random

идеята е една колона в mysql таблица да се напълни със случайни числа от 1 до 3, но от mysql.

Решението: update articles set sezon_id=ceil(RAND()*3)

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Оптимизиране на изображенията (png,jpg)

Идеята е да се оптимизират изображнията за по- бързо зареждане и според Google PageSpeed Insights:

find . -iname '*.jpg' -print0 | xargs -0 jpegoptim --max=90 --strip-all --preserve --totals;
find $PWD -type f -name "*.jpg*" -execdir jpegoptim -v --strip-all --max=85 --preserve '{}' \;
find . -iname '*.png' -print0 | xargs -0 optipng -o7 -preserve;

Резултата:

./images/back.jpg 85x203 24bit Adobe  [OK] 1044 --> 724 bytes (30.65%), optimized.
./images/322.jpg 100x100 24bit JFIF  [OK] 3044 --> 2666 bytes (12.42%), optimized.
./images/257.jpg 100x100 24bit JFIF  [OK] 2929 --> 2533 bytes (13.52%), optimized.
Average compression (1636 files): 48.48% (10643k)



** Processing: ./selector-arrow.png
13x10 pixels, 4 bits/pixel, 16 colors (1 transparent) in palette
Input IDAT size = 81 bytes
Input file size = 211 bytes

Trying:
  zc = 9  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 9  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 8  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 8  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 7  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 7  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 6  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 6  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 5  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 5  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 4  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 4  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 3  zm = 9  zs = 0  f = 0		IDAT size = 68
  zc = 3  zm = 8  zs = 0  f = 0		IDAT size = 68
  zc = 3  zm = 9  zs = 1  f = 0		IDAT size = 68
  zc = 3  zm = 8  zs = 1  f = 0		IDAT size = 68
                               
Selecting parameters:
  zc = 3  zm = 8  zs = 1  f = 0		IDAT size = 68

Output IDAT size = 68 bytes (13 bytes decrease)
Output file size = 198 bytes (13 bytes = 6.16% decrease)

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

htaccess

RewriteEngine On


#Options -Indexes

ErrorDocument 404 /404.php
#RewriteBase /
#RewriteCond %{HTTP_HOST} !^DOMAIN$ [NC]
#RewriteRule ^(.*)$ http://DOMAIN/$1 [L,R=301]

RewriteRule ^css.min/(.*\.css) /m/?f=/css/$1 [NC,L,QSA]
RewriteRule ^js.min/(.*\.js) /m/?f=/js/$1 [NC,L,QSA]

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES CACHING ##


# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"


# Set up caching on media files for 1 week
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"


# Set up 2 Hour caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A9200
Header append Cache-Control "proxy-revalidate"


# Force no caching for dynamic files
<FilesMatch "\.(php|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"



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

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Проблем с Google Page Speed и Facebook "Enable compression"

Проблем с Google Page Speed и Facebook "Enable compression"

Гугъл казва, че трябва да се оптимизират скриптовете от facebook. Супер, но ние нямаме достъп до тях. Ето го и съобщението:

Enable compression
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Enable compression for the following resources to reduce their transfer size by 447KiB (72% reduction).

    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yn/r/TafFivy4OjC.js could save 132.2KiB (72% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/y0/r/89exU7sq7Ld.css could save 83.2KiB (81% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/y6/r/9tEPef2Xf70.js could save 81.6KiB (72% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yh/r/Sst4Eu6wCBO.js could save 69.3KiB (70% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yq/r/EKSe2LvV9st.css could save 29.5KiB (81% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yg/r/QHf4dqPAsjn.js could save 19.7KiB (68% reduction).
    Compressing http://dobrich24.com/fonts/tiefontello.svg?88026028 could save 15.3KiB (56% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yG/r/ZvGCpbKPoq8.js could save 11.9KiB (62% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/y2/r/HOF18dCoWFZ.css could save 2.6KiB (67% reduction).
    Compressing https://static.xx.fbcdn.net/rsrc.php/v2/yy/r/Aqy-PT2Uo_S.js could save 1.8KiB (53% reduction).

Решение: Използване на lazyscript -- http://hayageek.com/jquery-lazy-loading-scripts ;)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.com/examples/jquery/lazy-script/jquery.lazyscript.js" type="text/javascript"></script>

<script>
$(document).ready(function () {
var options = {
type: "delay",
time:1000,
scripts: [
"http://platform.twitter.com/widgets.js",
"http://connect.facebook.net/en_US/all.js#xfbml=1&appId=445577382175430",
"https://apis.google.com/js/plusone.js"
],
success: function () {
FB.init({ status: true, cookie: true, xfbml: true });
}
};
$.lazyscript(options);

});
</script>



<div class="fb-like-box" data-href="http://www.facebook.com/FACEBOOKPAGE" data-width="180" data-show-faces="true" data-stream="false" data-header="false"></div>
VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Инсталиране на WordPress в WordPress

Идеята е да се инсталира wordpress + папка с още един WordPress.

Примерно "/" и "/en/"

File: /.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

File: /en/.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /en/
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /en/index.php [L]
</IfModule>
# END WordPress

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

php debug na $_FILES

идеята е, че така лесно се дебъгва $_FILES при работа с ajax където не можем да покажем какво се случва през браузъра. Идеята е каквото се случва да се запише във файл. Това е ефективно и като цяло защото позволява записването на масив във файл с един ред :)

file_put_contents('filename.txt', print_r($_FILES, true));

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)