Starting from April 21, Google favors mobile-friendliness as a ranking signal, giving advantage to more responsive mobile-friendly sites in search results.

Is your website mobile-friendly?

Starting TODAY you may lose traffic if it is not! To check if your site is mobile-friendly you can use Mobile-Friendly Test utility from Google.

If your website uses third-party software like WordPress or Drupal there are a lot of solutions for making your site responsive. Communities may provide mobily ready themes and templates.

Please take a look some good starting points provided by Google listed below:

• WordPress
• Drupal

Also you can check official Drupal’s Mobile Guide and list of useful resources for Responsive web design.

Do not pull the time, otherwise competitors will leave you far behind. And remember, site responsiveness has become now main factor of SEO.

What to start with?

If your site is pretty basic, we could suggest making it responsive by adding a custom CSS with media queries affecting different screen resolutions. Another option is to use CSS frameworks like Bootstrap or Foundation.

WordPress provides The Bootstrap theme which can be used as the base theme for building your custom theme from scratch. Drupal has a similar project too – Bootstrap theme which occupies the 3rd place among the most popular Drupal themes.

We offer different solutions for making your site responsive depending on your needs and budget. If you have any questions or want to make your site mobile-friendly, please feel free to contact us!

Let’s make the web better together!

The post Why do you need a responsive mobile friendly site today? appeared first on WebCodingStudio.

Once, somewhere in summer 2011, I already configured FreeBSD 8 development server in our office. Then upgraded it to FreeBSD 9.0

And now new 2x2Tb disks ( for RAID0 ) and 1 SSD 100Gb arrived in case we have a lack of space on the current 500GB raid.

It’s time to install it again!

Main goal is to have more flexible server configuration and avoid of small errors which i had in first installation.

The main steps would be:

• FreeBSD 9.2-RELEASE installation
• Configuration and installation small utils like MC, Webmin, etc
• Apache 2.2 installation
• PHP 5.2, PHP 5.3, PHP 5.4 installation. All versions would be installed as FCGI
• Mysql server
• BIND DNS server
• Apache Virtual Hosts
• Samba 3.6
• Sendmail

1. FreeBSD 9.2-RELEASE installation

Diring the installation please refer this official manual: http://www.freebsd.org/doc/handbook/bsdinstall.html
Allocating Disk Space: http://www.freebsd.org/doc/handbook/bsdinstall-partitioning.html

2. Configuration and installation small utils like MC, Webmin, etc

2.1 Add “admin” user to the “wheel” group.
Login as the root user and add “admin” user to the “wheel” group. Then you will be able to operate as superuser.

  pw user mod admin -G wheel

2.1 MC

  cd /usr/ports/misc/mc
  make install clean

Uncheck “X11” support. All others may leave by default. MC installations is a really long process with a lot of dialog windows. Just press everywhere “Ok”.

2.2 Webmin

Install or update ports

  portsnap fetch
  portsnap extract
  portsnap fetch update

Webmin installation

  cd /usr/ports/sysutils/webmin
  make install clean

Add next line to “/etc/rc.conf” file.

  webmin_enable="YES"

Configure Webmin by running.

  /usr/local/lib/webmin/setup.sh

Start Webmin for the first time by running

  /usr/local/etc/rc.d/webmin start

Open Webmin in browser

  https://your-ip:10000/

3. Apache 2.2 installation

Navigate to the Apache server port and build it:

  cd /usr/ports/www/apache24
  make install clean

Add next line to “/etc/rc.conf” file.

  apache24_enable="YES"

Now let’s start Apache to make sure it works:

  /usr/local/etc/rc.d/apache24 start

If you are getting this error

  Could not reliably determine the server's fully qualified domain name, 
  using 127.0.0.1. Set the 'ServerName' directive globally to suppress 
  this message

Add next line to /usr/local/ect/apache24/httpd.conf file

  ServerName localhost

4. PHP 5.2, PHP 5.3, PHP 5.4 installation. All versions as FCGI

Install mod_fcgid

  cd /usr/ports/www/mod_fcgid
  make install clean

Add next line to /usr/local/ect/apache24/httpd.conf file

  LoadModule fcgid_module libexec/apache24/mod_fcgid.so

4.1 Installing PHP5.4

  cd /usr/ports/lang/php5
  make config
  make PREFIX=/usr/local/php54 PHPBASE=/usr/local/php54 install clean

If you got this error

  error: xml2-config not found. Please check your libxml2 installation.

Try this:

  cd /usr/ports/textproc/libxml2/
  make reinstall

Pre configure PHP54 to make sure it works.
Add next lines to to /usr/local/ect/apache24/httpd.conf file.

  <Directory "/usr/local/www/apache24/data">
    ...
    Options ExecCGI
    Options +Indexes
    Allow from all
  </Directory>
  
  <IfModule mime_module>
    ...
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
  </IfModule>

Create new file /usr/local/ect/apache24/Includes/httpd-fcgid.conf with the next content:

  <IfModule mod_fcgid.c>
    AddHandler fcgid-script .php
    FCGIWrapper /usr/local/php54/bin/php-cgi .php
    FcgidMaxRequestLen 134217728
  </IfModule>

Change DirectoryIndex directive in file /usr/local/etc/apache24/httpd.conf

  DirectoryIndex index.html index.htm index.php

4.2 Installing PHP5.3

  cd /usr/ports/lang/php53
  make config
  make PREFIX=/usr/local/php53 PHPBASE=/usr/local/php53 install clean DISABLE_CONFLICTS=1

4.3 Installing PHP5.2

  cd /usr/ports/lang/php52
  make config
  make PREFIX=/usr/local/php52 PHPBASE=/usr/local/php52 install clean

4.4 Configuration all PHP5.X

Create php.ini file for each php verson: /usr/local/php5X/etc/php.ini

  user_ini.filename = "php.ini"
  date.timezone = Europe/Kiev

In this way you can override php_value and php_flag variables, because PHP installation as FCGI doesn’t allow to override these variables via htaccess ( cause 500 error ).
You can override php_value and php_flag per-directory level, just need to create php.ini in the directory where you want to override these variables.
P.S. user_ini.filename is not supported by PHP52, so you have to override these variables in the main php.ini file /usr/local/php52/etc/php.ini

date.timezone needed to avoid following Warning

  Warning: phpinfo() [function.phpinfo]: It is not safe to rely on the system's timezone settings.

For using another FCGI Wrapper instead of default php54, just add into htaccess:

For php53

  FCGIWrapper /usr/local/php53/bin/php-cgi .php

For php52

 
  FCGIWrapper /usr/local/php52/bin/php-cgi .php

4.5 Installing PHP5.4 extensions

  cd /usr/ports/lang/php5-extensions
  make PREFIX=/usr/local/php54 PHPBASE=/usr/local/php54 install clean

Select neccessary extensions which you need to have.

If you got this error

  error: Please reinstall the libcurl distribution

Try this:

  cd /usr/ports/ftp/curl
  make reinstall

If you got this error

    Stop in /usr/ports/x11/libXau.

put the following in your /etc/make.conf:

  WITHOUT_X11=yes

For each failed extension, try

  cd /usr/ports/[portdir]
  make deinstall
  make clean
  make distclean
  make clean
  make rmconfig

And Then resintall it (with PREFIX if needed)

Reinstall libjpeg

  cd /usr/ports/graphics/jpeg
  make reinstall

Reinstall freetype2

  cd /usr/ports/print/freetype2
  make reinstall

4.6 Installing PHP5.3 extensions

  cd /usr/ports/lang/php53-extensions
  make PREFIX=/usr/local/php53 PHPBASE=/usr/local/php53 install clean

Select neccessary extensions which you need to have.

4.7 Installing PHP5.2 extensions

  cd /usr/ports/lang/php52-extensions
  make PREFIX=/usr/local/php52 PHPBASE=/usr/local/php52 install clean

Select neccessary extensions which you need to have.

Please be sure you have instaled all these extensions for all PHP versions
CURL, GD, MYSQL, MYSQLI, PDO, PDO_MYSQL, MBSTRING, MCRYPT, ZLIB, ZIP, SOAP, LDAP, OPENSSL

5. Mysql Server

Build the MySQL server:

  cd /usr/ports/databases/mysql56-server
  make install clean

Add the following line to /etc/rc.conf:

  mysql_enable="YES"

Start the mysql server:

  /usr/local/etc/rc.d/mysql-server start

Then set a password for the MySQL root user:

  /usr/local/bin/mysqladmin -u root password 'your-password'

Add new user within the MySQL shell:

  CREATE USER 'developer'@'localhost' IDENTIFIED BY 'developer';
  GRANT ALL PRIVILEGES ON * . * TO 'developer'@'localhost';
  FLUSH PRIVILEGES;

6. BIND DNS server

Usually BIND server is already installed in FreeBSD.
Add the following line to /etc/rc.conf:

  named_enable="YES"

In the file /etc/namedb/named.conf make next configurations

  options {
    ...
    listen-on  {
      192.168.1.200;
      127.0.0.1;
    };
    ...
  };
  
  zone "dev" {
    type master;
    file "/etc/namedb/dev.zone";
  };
  zone "1.168.192.in-addr.arpa" {
    type master;
    file "/etc/namedb/dev-reverse.zone";
  };

Then create zone file /etc/namedb/dev.zone

  dev.  IN  SOA ns1.dev. n2.dev. (
        2009121101
        86400
        7200
        8640000
        86400 )

        IN  NS  ns1.dev.

  ns1 IN  A 192.168.1.200
  ns2 IN  A 192.168.1.200

  vmserver  IN  A 192.168.1.200
  php54 IN  A 192.168.1.200

And for reverse zone /etc/namedb/dev-reverse.zone

  $TTL  3600
  @ IN  SOA ns1.dev. ns2.dev. (
        2009121102
        3600
        900
        3600000
        3600 )
  IN  NS  ns1.dev.
  IN  NS  ns2.dev.

  200 IN  PTR vmserver.dev.
  200 IN  PTR php54.dev.

At last configure /etc/resolv.conf properly

  domain dev
  nameserver 192.168.1.200

7. Apache Virtual Hosts

Create /usr/local/ect/apache24/Includes/httpd-vhosts.conf

  <VirtualHost *:80>
  DocumentRoot "/usr/local/www/apache24/data"
  ServerName vmserver.dev
  <Directory "/usr/local/www/apache24/data">
    Require all granted
    Allow from all
  </Directory>
  </VirtualHost>

  <VirtualHost *:80>
  DocumentRoot "/usr/local/www/php54.dev"
  ServerName php54.dev
  <Directory "/usr/local/www/php54.dev">
    Require all granted
    Allow from all
  </Directory>
  </VirtualHost>

8. Samba 3.6

Installation

  cd /usr/ports/net/samba36
  make install clean

Select: ACL_SUPPORT, AIO_SUPPORT, CUPS

Add the following line to /etc/rc.conf:

  samba_enable="YES"

Configuration file /usr/local/etc/smb.conf should contain next lines

  [global]
    workgroup = WEBCODING
    netbios name = VMSERVER
    server string = Virtual machine server
    security = SHARE

  [work]
    path = /usr/local/work
    public = yes
    browseable = yes
    writable = yes
  [www]
    path = /usr/local/www
    public = yes
    browseable = yes
    writable = yes

9. Sendmail

At the end, we need to to redirect all email to one on the local email boxes.

We need to create working macro configuration file.

  cd /etc/mail
  make

Add next line to the created sendmail configuration file: /etc/mail/vmserver.dev.mc

  define(`SMART_HOST',`local:catch-all')

Then add alias to the /etc/mail/aliases file

  catch-all:  qa

Generate the sendmail.cf by issuing the following commands:

  make install

And then restart sendmail service

  make restart
  service sendmail restart

Then all emails will be sent to the local mailbox of the QA user instead of spamming real clients mailboxes.

Finished! Now you can use server for development.

P.S. Please don’t use this configuration on the production servers.

The post FreeBSD 9.2 server configuration: Apache, Php, Mysql, DNS, Samba appeared first on WebCodingStudio.

This is useful for sorting non-chronological nodes like bios, e-commerce products, testimonials , sliders or whatever you would like.

Below is a Screenshot of drag-and-drop usage:

Node order module uses default node sticky functionality, that’s why it’s easy to integrate it with your site. By default Drupal nodes are sorted by stickiness first, then by creation date.

Download

You can download the module at the following link node_order-7.x-1.0.zip

How to use.

1. Install the module.
2. Go to the “Node Order setting” configuration page (admin/config/content/node_order) and choose which content types to use it for.
3. Then when you navigate to content list page (admin/content) the links to Node order pages will appear in Primary nav.
4. After sorting the nodes and saving the order – the values of “sticky” fields will get updated.

To do

• Migrate to Drupal 8

The post Drupal Node Order module appeared first on WebCodingStudio.

How it Works

The plugin provides a method called tilezoom which is invoked on a container element.
It’s simple html and javascript. Plugin doesn’t use canvas element, that is why it works with IE browsers too!

Tiles for the image should be generated with OpenZoom tile generator. You can use our TileGenerator (modified version of PHP Deep Zoom Tools) for this.
Then specify XML file path or path to tiles directory with width and height image resolution options. That’s all what you need.

How to use

Be sure to include the JQuery library. And just add this code inside your page head:

<link type="text/css" rel="stylesheet" media="all" href="tilezoom/jquery.tilezoom.css" />
<script type="text/javascript" src="tilezoom/jquery.tilezoom.js"></script>

Commands

The tilezoom function can be called in the following form:

$(document).ready(function(){
  $('#container').tilezoom('command');
});

The following command strings are supported:

'init'   // init tilezoom, default method
'destroy' // destroy tilezoom and unbinds all events
'zoom'  // zoom image to the specified level

Basic examples of usage:

$(document).ready(function(){
  $('#container').tilezoom({
    width: 2835,
    height: 4289,
    path: 'dest/mona_lisa_files',
    mousewheel: true
  });
});

$(document).ready(function(){
  $('#container').tilezoom({
    xml: 'dest/2dollars.xml',
    mousewheel: true
  });
});

Options

The following default options are provided by the plugin. They can be overridden by passing an options object to the tilezoom method.

var defaults = {
  width: null, // original image width in pixels. *(required) if no xml file
  height: null, // original image height in pixels *(required) if no xml file
  path: null, // tiles directory. *(required) if no xml file
  xml: null, // xml file with settings generated with Deep Zoom Tools
  tileSize: 254, // tile size in pixels
  overlap: 1, // tiles overlap
  thumb: 'thumb.jpg', // thumbnail filename
  format: 'jpg', // image format
  speed: 500, // animation speed (ms)
  easing: 'swing', // animation easing (jquery easing function name)
  mousewheel: false, // requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel
  gestures: false, // requires hammer.js event plugin, https://github.com/hammerjs/hammer.js
  zoomToCursor: true, // stay the same relative distance from the edge when zooming
  offset: '20%', //boundaries offset (px or %). If 0 image move side to side and up to down
  dragBoundaries: true, // If we should constrain the drag to the boundaries
  minZoomLevel: 0, // can't zoom out past level [minZoom]
  maxZoomLevel: 9999, // can't zoom in past level [maxZoom]
  wrapZoom: true, // If we're at the high level of resolution, go back to the start level
  beforeZoom: function($cont) {}, // callback before a zoom happens
  onZoom: function($cont, progress) {}, // callback for each zoom animation step
  afterZoom: function($cont) {}, // callback after zoom has completed
  callBefore: function($cont) {}, // this callback happens before dragging starts
  callAfter: function($cont, coords) {}, // this callback happens at end of drag after released "mouseup"
  initialized: function($cont) {}, // this callback happens after tilezoom  has been fully initalized.
  navigation: true, // navigation container ([true: show nav controls] or [false: don't show nav controls] or [DOM selector to insert controls in])
  zoomIn: null, // zoomIn button
  zoomOut: null, // zoomOut button
  goHome: null, // goHome button, reset to default state
  toggleFull: null // toggleFull button
}

Documentation

Here you can find more info about jQuery TileZoom Plugin.

Demos and Examples

• 2 Dollars (7356 x 3146)
• Mona Lisa (2835 x 4289)

Try

On this TileGenerator demo page you can try to upload your own image and see jQuery TileZoom Plugin in action.

Download

Or you can download latest release on Github.

Changelog

jQuery TileZoom 1.2, 2015-December-02
———————–
Various modernization and flexibility enhancements ( Thanks to Michaël Fortin )
Most useful changes are:
– Mouse input is not disabled when a touchscreen is detected (mouse input didn’t work with Windows devices with seldom-used touchscreens).
– Using Hammer.js for more robust multi-touch input instead of dnaielglyde/TouchIt
– Added onZoom callback (called for each zoom step)
– Removed dependency on ES6 feature (yield, which didn’t bring much to the table anyway).

TileGenerator 1.01, 2014-July-10
———————–
– Fixed exif_read_data error.

jQuery TileZoom 1.1.1, 2014-February-04
———————–
– Added “initialized” callback which happens after tilezoom plugin has been fully initalized.

jQuery TileZoom 1.1, 2012-October-11
———————–
– Add touch gesture support (jQuery required dependency:
https://github.com/danielglyde/TouchIt). Supports pinch to zoom in and
out, double tapping to zoom and tap dragging
– Add a gestures property and sets to false (just like mousewheel).
– Add dragBoundaries boolean to optionally turn off constraining image
to boundaries while dragging
– Add double-click to zoom-in
– Fix unbind the mousemove on mouse up
– Add public resize() method if the container resizes
– Fix issue where certain mousewheels (or trackpads) were giving a
non-interger based delta were causing it to scale the holder to an
un-even level (images would fail)
– Add optimization to not re-zoom if we’re already at the correct level
– Add CSS support for default navigation always showing with gestures on
Thanks to Matt Moore for all of these issues fixed.
===
– Fix issue “position: fixed;” on some Android 2.x devices.
Thanks to ericente

The post jQuery TileZoom Plugin appeared first on WebCodingStudio.

This module integrates JQuery syntax Highlight plugin into Drupal for syntax highlighting of source code snippets in any Drupal contents.

Please feel free to check out and use our Drupal Highlighting module.

Third party library dependency

This module requires JQuery syntax Highlight plugin which was written before. By defalut this library is included in the module installation.

But you can also download the latest version from JQuery syntax Highlight plugin page and copy it into the module folder.

Language Support

Highlighting module supports the same languages as the original JQuery plugin: HTML, CSS, PHP and Javascript.

How to use

Drupal 6

After installing “Highlighting” module add new input filter “Highlighter”.
To highlight your code, you should select “Highlighter” filter for the node and then just use this native formats:

<pre class="code">source code</pre>

To see more usage examples please check the original article.

Drupal 7

In Drupal 7 the module doesn’t create separate input format but adds new filter which should be enabled for input format you plan to use with highlighting the code. For example you can enable this filter for “Full Html” input format.

Demo

See Drupal 6 demo page with css, html, php, js syntax highlighted.

Download

Please use the links below for Drupal 6 and Drupal 7 versions accordingly:

Download

To do

1. Create admin configuration form for changing plugin options: source, zebra, indent and list

The post Drupal Highlighting module appeared first on WebCodingStudio.

We will not be caching whole pages, this solution is outdated. In reality, only caching of individual blocks is used. And if more precisely, we will cache only the pure data, no html.

Cacher allows you to cache variables (anything that can be put into a variable) for later use. This speeds up loading time, and reduces load on the data source.

Samples where it can be used

• caching database queries results;
• requests from remote servers;
• getting images or files listings after browsing through the directories, etc.

We use it in our Calypso CMS for caching blocks with the latest posts, menu links tree, portfolio listings, twitter requests etc.

For example, on this page we have 24 mysql queries without caching. With caching – only 9 queries.

Example

Caching hierarchical menu tree from our Calypso CMS:

$cache_key = 'menu-'.$menu['id'];
if(Cache::is_actual($cache_key, 3600)) {
	$tree = Cache::get_cache($cache_key);
}
else {
	$tree = $this->db->get_tree($menu['id']);
	Cache::put_cache($cache_key, $tree);
}

Here “3600” is cache lifetime in seconds. If 1 hour from the last time cache generated has not passed, then data is taken from the cache. Otherwise, the “get_tree” method starts, which get entries from the database and builds a hierarchical tree of links.

System requirements

Recommended: PHP 5.2.x
Required: PHP version 5.x.x or higher
PHP versions 4.x are not supported because property visibility and method visibility used (public or private).

Download

To do

• Make a single interface, then expand to various storages: filecache, database cache, memcached, etc.
• Add Cache Manager using 2 design patterns: Strategy and Registry, if we will first use a file cache, and then want to move quickly to memcache.
• Maybe will add methods to prepare cache by parts and then combine into one piece.

The post Cache Php Class appeared first on WebCodingStudio.

For example, you have almost finished slicing about 30 pages from PSD to HTML. And the customer requests to replace JUST some of the links in the footer and one link in the header for example on each page. It’s cool if you could use PHP or SSI includes. But if the customer wants a clean and simple HTML markup. What would you to do in this case?

Please feel free to check out and use our Text Replace php script.

System requirements

Recommended: PHP 5.2.x
Required: PHP version 5.x.x or higher
PHP versions 4.x are not supported because property visibility and method visibility used (public or private).

Demo

Please see Text Replace php script demo page.
You can see example html page and you can replace any line of text or html there.
Also you can see example css file and provide test changes as well.

Download

To do

• Currently the script produces only one-line replacement in files.
  In the next revision we are planning to add the ability to replace multiline blocks.

The post Text Replace php script appeared first on WebCodingStudio.

How to use

Be sure that you have include the JQuery library. And just add this code inside your page head:

<script src="highlight.js" type="text/javascript"></script>

Call Highlighter on any selected pre tag:

$(document).ready(function(){
  $('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
});

Default params:

var defaults = {
  // show source code tab
  source: true,
  // show zebra
  zebra: true,
  //indents: "tabs" or "space"  
  indent: 'tabs',
  //ordered ("ol") or unordered ("ul') list
  list: 'ol'
}

And use such “pre” tags in page content to highlight code:

<pre class="code">default</pre>
<pre class="code" lang="js">js code</pre>
<pre class="code" lang="css">css code</pre>
<pre class="code" lang="html">html code</pre>
<pre class="code" lang="php">php code</pre>

Soon I plan to write a module for Drupal and plugin for WordPress based on this script.

Demo

See demo page with css, html, php, js syntax highlighted.

Download

Or you can download latest release on Github.

Changelog

Jquery Highlight 1.06, 2015-June-01
———————–
Added bash suppport, improved JS highlighting (Thanks again to owenBeresford).

Jquery Highlight 1.05, 2015-December-02
———————–
Many many many more PHP functions (Thanks again to owenBeresford).

Jquery Highlight 1.04, 2015-February-12
———————–
Added class, var, the PHP5 keywords, number formatting and others (Thanks to owenBeresford).

Jquery Highlight 1.03, 2015-February-11
———————–
Fixed incorrect comment parsing in PHP ( # )

Jquery Highlight 1.02, 2014-July-10
———————–
Added flex-* CSS keywords
//TODO Review a list of CSS properties and add missing to the plugin.

Jquery Highlight 1.1, 2013-May-23
———————–
– Added SQL highlighting (Thanks to ondrovic). Need to add nice color scheme.
– Introduced support of HTML5 syntax via valid “data-” attributes (Thanks to PieroWbmstr).

The post JQuery syntax Highlight plugin appeared first on WebCodingStudio.

Our team wrote a small WordPress Category HTML Description plugin, which solves this problem.
Plugin disables content filters and any html code you add to the category description will not be stripped out.

Installation:

1. Upload `wc_cat_description.php` to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

To show html category description use the following code in your category.php/archive.php template.

<?php if(function_exists('wc_category_html')) : ?>
	<?php wc_category_html(); ?>
<?php endif; ?>

Download

• Version 1.0

The post WordPress Category HTML Description plugin appeared first on WebCodingStudio.