GreenComet - Notes from a web programmer

The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){ ...

In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre...

Often on sites that sell something you can find a countdown timer to a certain date. Such a script is usually required for landing pages and online stores. JS (() => { let finishDate = new Date(2017, 8, 30); // set the final date let compareDate = finishDate.getTime(); let timer = setInterval(function () { timeBetweenDates(compareDate); }, 1000); function timeBetweenDates(toDate) { let difference = toDate - Date.now(); if (difference <= 0) { // if the date has passed, the timer stops clearInterval(timer); } else { let seconds = Math.floor(difference / 1000), minutes = Math.floor(seconds / 60), hours = Math.floor(minutes / 60), days = Math.floor(hours / 24); hours %= 24; minutes %= 60; seconds %= 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0...

Consider a few examples of working with AJAX with native JavaScript. Functions are written with ECMAScript-2015 syntax The function for the GET method: let ajaxGet = (url, callback) => { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4){ if(xhr.status == 200){ alert( xhr.responseText ); callback(); } else { // if error alert(xhr.statusText); } } }; xhr.open('GET', url, true); xhr.send(null); }; The function for the POST method. The data to be sent to the server accepts both the string and the object. let ajaxPost = options => { /* an example * options = { * data: 'a=1&b=word&c=name', * url: 'test.php', * cb: function(){ * alert('test'); * } * } */ let sendstr = ''...

We will send form data without reloading the page using jQuery. We will not consider processing the server part. Sample form: <form id="test_ajax_form" method="post" action="test_handler_form.php"> <input type="text" name="name" placeholder="Name"> <textarea name="message" placeholder="Message"></textarea> <input type="submit" value="Send" name="submit"> </form> JS $(function(){ $('#test_ajax_form').on('submit', function(e){ e.preventDefault(); let data = $(this).serialize(), url = $(this).attr('action'); $.ajax({ method: "POST", url: url, data: data }).done(function(){ alert('Success!'); }).fail(function(){ alert('Error!'); }); }); });

For cloning objects in JS there is no specially provided method. You can copy an object in different ways. Since objects are passed by reference, we cannot clone simply by assigning a value to a variable. Objects With Spread let originalObject = {a: 1}; let clone = {...originalObject}; With Object.assign() let originalObject = {a: 1}; let clone = Object.assign({}, originalObject); With a loop let clone = {}; for (let key in originalObject) { if(originalObject.hasOwnProperty(key)){ clone[key] = originalObject[key]; } } With jQuery let clone = jQuery.extend(true, {}, originalObject); With lodash let clone = _.clone(value); let cloneDeep = _.cloneDeep(value); With JSON object let clone = JSON.parse(JSON.stringify(originalObject)); Arrays With Spread let clone = [...originalArray]; With Slice let clone = originalArray.slice(); Lodash can also be used for array cloning

The examples are very abstract, since the cycles exist. You must select all the elements of the array for a given attribute. There are several solutions. The most appropriate option in PHP is to use the built-in function array_filter() . Imagine that it does not exist either. We write our using recursion. On PHP, the function looks like this: function getArrayElements ( $arr , $pattern ) { static $i = 0 ; static $arrayResult = [] ; if ( preg_match ( $pattern , $arr [ $i ] ) ) { $arrayResult [ ] = $arr [ $i ] ; } $i ++ ; if ( count ( $arr ) == $i ) { return ; } else { getArrayElements ( $arr , $pattern ) ; } return $arrayResult ; } Example: $arr = array ( 'a' , 'xd' , 'w' , 1 , 'y' , 'x' ) ; $pattern = '/^x/' ; print_r ( getArrayElements ( $arr , $pattern ) ) ; // Array ( [0] => xd [1] => x ) Now let's look at the same ...

 There are several ways. All of them are somewhat similar. The first option is the most relevant. Option 1 HTML < html > < body > < div class = " content " > </ div > < footer > </ footer > </ body > </ html > CSS body, html { height : 100% ; } body { display : flex ; flex-direction : column ; justify-content : space-between ; } Option 2 A footer height must be fixed HTML < html > < body > < div class = " content " > < main class = " main " > </ main > </ div > < footer class = " footer " > </ footer > </ body > </ html > CSS html,body { height : 100% ; } .content { min-height : 100% ; } .main { padding-bottom : 200px ; } .footer { height : 200px ; margin-top : -200px ; } Option 3 A footer hei...

There are several ways of vertical alignment. In different situations, different ways are suitable. Consider some of them. 1. With display: flex It's the most convenient and modern way .parent { display : flex ; align-items : center ; } 2. With table-cell In table cells, vertical-align applies to any content. .parent { display : table ; } .child { display : table-cell ; vertical-align : middle ; } 3. With position: absolute и top It is suitable for cases with a known height of the child block. The principle of operation lies in top: 50% (half of the parent block) and a negative indent from above into half of the child block. In the same way, you can center the block horizontally, using only left: 50% and a negative margin on the left. .parent { position : relative ; } .child { position : absolute ; height : 50px ; top : 50% ; margin-top : -25px ; } 4. With position: absolute and margin There is another way...