softsprint menu Order

OOP in prototype style in JavaScript

January 25, 2017 in 7:35 pm | wiki

As we know, there are two kinds of inheritance in JavaScript:
– OOP in the functional style;
– OOP in the prototype style;

Prototype style is more popular because it has the main advantage – methods in prototype are automatically available everywhere and always. Why? Methods are written in object, which is linked in a special prototype property. This property has every function – it refers to the object with a single property constructor:

1
2
3
4
function F() {};
F.prototype = {
  constructor: F
};

Objects-prototypes are used in native constructors (Object.prototype, Array.prototype etc) – built-in methods are saved there, for example, toString, join, others.

We can also add our own methods in the object constructor, for example:

1
2
Object.prototype.countSomething = function() {...}
F.prototype.countSomething = function() {...}

And these methods will be available to the new object, which will be created by constructor F:

1
2
3
4
function F() {};
F.prototype.countSomething = function() {...};
var f = new F();
f.countSomething(); // will work!

How?
F.prototype property literally means that when you run function F it will create the new object that will receive f.__ proto__ reference to the object-prototype with all its methods:

object proto

It turns out that:

1
2
3
alert(f.__proro__ == F.prototype) // true;
alert(f.countSomething == F.prototype.countSomething); // true
alert(f.__proro__. countSomething == F.prototype.countSomething); // true

Note the last two strings: if the method countSomething() was not found in the object f, created by constructor F, the search continues in its object-prototype (f.__ proro__).

Let’s go ahead and look at the constructors inheritance one from another. Let we have 2 constructors: Second will inherit from First:

1
2
3
4
5
function First() {...};
First.prototype = {...}; // здесь общие методы в объекте-прототипе
function Second() {...};
Second.prototype = {...}; // здесь конкретные методы в объекте-прототипе
var obj = new Second();

The inheritance algorithm is this: if the desired method is not found in the object obj, we are looking for it in Second.prototype (prototype object constructor, which has created our obj); if the desired method is not there, we will look for it in First.prototype:
obj> Second.prototype> First.prototype

As we already know, when you create a new object obj, it automatically obtains a reference to the object-prototype: obj.__ proto__ == Second.prototype. And how to force the Second.prototype to inherit from >First.prototype?

Of course, you can code such a structure: Second.prototype.__ proto__ = First.prototype, but in fact there is a special technique:

1
Second.prototype = Object.create(First.prototype);

It creates a new empty object with reference to the prototype object First.prototype. Next, we can safely add the needed methods to Second.prototype. The final sequence of the inheritance:

1
2
3
4
5
6
function First() {...}; // объявили общий конструктор 
First.prototype = {...}; // добавили методы в его объект-прототип
function Second() {...}; // объявили конкретный конструктор
Second.prototype = Object.create(First.prototype); // создали пустой объект с ссылкой на прототип First.prototype
Second.prototype = {...}; // добавили методы в его объект-прототип
var obj = new Second(); // запустили конструктор

What is this in JavaScript?

January 18, 2017 in 1:44 pm | wiki

What is this in JavaScript? We will try to answer in our own words:
This – is a reference to the current object, in which it is mentioned;
This – is a reference to the object mentioned before the point in property or method;
This – is a reference to the new object created by the constructor (class).

Let’s look at the example of a constructor that creates a new object, adding methods in it:

1
2
3
4
5
6
7
8
9
10
11
12
13
"use strict"
function Machine(power) {
	this.power = power;
	this.hi = function () {alert("result for THIS: " + this.power)}; // (1)
	var self = this; 
	function priv() {alert ("result for SELF: " + self.power)}; // (2)
	this.hello = function () {
		priv()
	};   
}; 
var machine = new Machine(10);
machine.hi();
machine.hello();

Machine is a constructor that creates an object and adds a reference to it in the variable machine. The method hi displays a message with the value of the property power in the line (1).

The power property and hi method have the same this – a reference to the new object, which will be created by constructor Machine.

Everything is clear here, therefore let`s looks at the line (2): we specified self.power instead of this.power in the priv() function. What for?

In fact at the time of priv() function initialization in the lines (2) its this value is not defined (for “use strict” mode) or it`s equal window (without “use strict”) and it is also undefined! To this end, we deliberately created a variable self and recorded in it the reference to the current object which will be created by constructor. Now everything is OK – function priv() displays the value of the power in the required context.

Of course, instead of used self, we could use the methods of call / apply / bind for strict binding of context, for example priv.call (this). However, using of self is more simple solution!

Translation of WordPress themes: _e function and .mo, .po files

December 5, 2016 in 12:56 pm | wiki

This article is dedicated to the translation of WordPress themes without having to connect plugins like qTranslate X.

Quick algorithm is as follows:

1) PHP files have to use this type of function (for example h1 tag):

1
<h1><?php _e('title', 'softsprint'); ?></h1>

‘title’ – this is the text that we aim to translate. It will appear in the tag h1 of our theme.
‘softsprint’ – the name of the theme folder which has to be translated. In our case, the folder is named ‘softsprint’.
More about _e function can be read here:
https://codex.wordpress.org/Function_Reference/_e
http://wp-kama.ru/function/_e

2) Pulling the values for the translation from the PHP files using the online services like http://www.icanlocalize.com/tools/php_scanner and then getting .po file

3) Open the created .po file in Poedit and define the translations for each value. There you have also to define the locale: for example, ru_RU:
poedit-ru_ru

4) Save our .po file and compile it into a .mo file. Compiled .mo file has to be renamed into ru_RU.mo (according to our language).
The list of languages and countries:
http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Language-Codes
http://www.gnu.org/software/gettext/manual/html_chapter/gettext_16.html#Country-Codes

5) Put ru_RU.mo file to the languages, folder in our theme folder (in our case – softsprint). It is not necessary to place .po file in the folder, but save it for yourself – possibly you will need to edit / add new translations in the future;

6) Add the next code in the functions.php file (located in our theme folder):

1
2
3
4
<?php function my_theme_setup(){
	load_theme_textdomain('softsprint', get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'my_theme_setup');?>

‘softsprint’ – the name of our theme folder;
‘/languages’ – the folder where the ru_RU.mo file was placed.

More details about the function load_theme_textdomain are described here: http://wp-kama.ru/function/load_theme_textdomain
The result is a concise code in the PHP files without extra plugins (eg, qTranslate X) and constructions of such kind:

1
<li><?php _e('Google Analytics и счётчики'); ?></li>

In addition, the translation editing is centralized (with a .po file) and does not need to open and edit every php file separately.

CSS3 animation in Google Web Designer

October 17, 2016 in 2:28 pm | wiki

Flash is going to the past being replaced with the HTML5 and new features of CSS3. Mostly this transition is obliged to the stop of flash support on Apple devices (iPhone, iPad). In this article we will look through how to create CSS3 animations in free Google Web Designer software (version 1.6.1.0726 at the time of writing the post). It is clear that the description of CSS3 animation manually is a waste of time, that`s why such products from Google and Adobe (Adobe Edge Animate CC) and are gaining the popularity.

We will touch only the minimum required functionality of Google Web Designer in this article. Internet provides sufficient lessons and material for the detailed study – google it))

Thus, the size of the field of animation is defined here:

google web designer area

You can easily add an image in the created region – just drag the desired image from the folder on your PC into this area. In case you want to place the image in the top left corner of the working are it`s enough to specify 0 (zero) in the following fields:

google web-designer position

The animation logic consists of the shots adding with the certain time intervals – keyframes, which correspond to the properties of the animation in CSS (@keyframes). While creating a frame object its properties are determined automatically, for example, the size or position, and other effects. The collection of frames defines animation.

google-web-designer-animation

It is possible to specify the number of animation repetitions by clicking the right mouse button:

google web-designer loop

More complex are the events which you can describe manually by using JavaScript, but why? Google Web Designer has a user-friendly functionality of certain events. Let’s look at the example: we need to stop the endless animations while moving the mouse on object and start it and when moving out the mouse from it again. Right-mouse click on the animated object and choose “add event”.

google-web-designer-add-event

Next, select the type of event, for example, move on the target object “mousemove”:

google-web-designer-mousmove
Select the object for mousemove property we need and add the appropriate CSS-style:

google-web-designer-css

google-web-designer-event

Added feature animation-play-state: paused;
It just means that you need to pause the animation when you hover over the required object.

Other Google Web Designer possibilities you can try by yourself, but listed above is enough to make the animation shown below. It works on all types of devices (browsers), it is the most lightweight and responds well to the set up (changing animation speed of individual elements and their properties, etc.), because its source code is a valid CSS. We can always edit this CSS-code manually in any editor if need. So, look:













FOR SALE

SOLD

Contact form for WordPress with reCaptcha

August 22, 2016 in 2:57 pm | wiki

There are many contact forms for WordPress websites: from the scratch-developed simple solutions to the advanced plugins with the form constructors, for example, Contact Form 7. Having the great popularity, Contact Form 7 plugin has the open question about its safety and security … google it, plz!

So when we had the task of contact form integrating in the custom WordPress theme, our selection criteria were very simple:

As the result, our choice has stopped on “AntiRobot Contact Form” – https://wordpress.org/plugins/antirobot-contact-form/
We have customized plugin according to the client needs:

Contact form could be added via short code

acording to the plugin instructions. In our case the theme required the following code implementation:

1
<?php echo do_shortcode('[antirobot_contact_form]'); ?>

Modified plugin can be downloaded here

contact form

Thumbnails (featured images) import – WordPress move to new domain

July 29, 2016 in 1:58 pm | wiki

This is a brief note about the transfer of content from one WordPress website to another domain or transfer WordPress website to another hosting without domain change. There are many solutions, for example, to dump the database of WordPress site and FTP files, move everything to the new hosting, indicate necessary settings in the wp-config.php file then making database import, etc.

We are interested in the easiest way to transfer content – import / export posts, pages, custom wordpress elements (taxonomy), etc.

For the export just go to the section: Tools> Export. As a result, you load an XML file.
To import content you will need the default plug-in “WordPress Importer“, which will be installed automatically when you select Tools> Import> WordPress.

If you check the checkbox “Import Attachments“, then the folder wp-content/uploads/ will load all the images linked in the XML-file import. These images will be displayed at the same time and in the section: Media> Library admin WordPress and will be stored in the database.

import wordpress

It’s simple at first glance, but there is a problem: it is impossible to import posts and pages thumbnails (featured images or thumbnails) in such a way. You have to do the next steps to solve this task:

Thus, the problem with the import of thumbnails is solved almost with the help of standard WordPress tools.

Smooth scrolling WordPress Script

July 9, 2016 in 6:05 pm | wiki

Hello!

Recently, I faced with the common for the WordPress sites task – it was necessary to make a smooth scroll to the target element on the page when you click on a link in the site menu. Actually, it is – the standard functionality of any modern Landing. In our case, the problem was to use pure JavaScript without connecting any frameworks like jQuery.
The network knows many WordPress plugins for smooth scrolling, for example: https://ru.wordpress.org/plugins/tags/smooth-scroll
But all of us know that the installation of any additional plugin in our site reduces its hacking security. In most cases, WordPress sites are hacked through the plugins – make conclusions!
So, the following code is written for a slow (smooth) scrolling on the page:

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
document.addEventListener("click", function (event) {
	var target = event.target;
	if (event.target.getAttribute("href")) {
		var targetHref = event.target.getAttribute("href")
	} else return false;
	if (targetHref.indexOf("#") >= 0) {
		var pos = targetHref.indexOf("#") + 1;
		var elemHref = document.getElementById(targetHref.slice(pos));
		moveScroll(elemHref);
		event.preventDefault()
	};
});
function moveScroll(elem) {
	var travel = 40;
	var time = 10;
	if (Math.abs(elem.getBoundingClientRect().top) < 1) return false;
	if (elem.getBoundingClientRect().top < 0) {
		if (Math.abs(elem.getBoundingClientRect().top) < travel) {
			window.scrollBy(0,-1);
			setTimeout(moveScroll,time/5,elem);
			} else {
			window.scrollBy(0,-travel);
			setTimeout(moveScroll,time,elem);
		}
	};
	if (elem.getBoundingClientRect().top > 0) {
		if (Math.abs(elem.getBoundingClientRect().top) < travel) {
			window.scrollBy(0,1);
			setTimeout(moveScroll,time/5,elem);
			} else {
			window.scrollBy(0,travel);
			setTimeout(moveScroll,time,elem);
		}
	}	
};

Scroll function recursively runs at intervals: time = 10 ms.
travel = 40 – the vertical scroll move at each recursive function call.
Presented script works for such kind of links:

1
<a href="http://softsprint.net/en/#about">About us</a>

The script is checking whether there is a link address to the element ID to which our page will be scrolled.

Thanks for the reading of our notes!

Иконка домика вместо текста “Домой” в меню WordPress

July 13, 2015 in 6:55 pm | wiki

more >

softsprint adoptive design

Проверка сайта на адаптивность google

June 5, 2015 in 6:40 pm | wiki

more >

Как установить WooCommerce на свою тему WordPress?

March 15, 2015 in 6:24 pm | wiki

more >

Let`s discuss

softsprint heart

Our contacts

Lviv, Ukraine
моб: +380 97 551 44 55
skype: softsprint.net

Say hello!