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

Every day sensory devices are being introduced into our lives. These devices have specific events, unlike the desktop. One of these events is the swipe . Especially often have to deal with it when developing a mobile version of the site. Code: (() => { let initialPoint; let finalPoint; document.addEventListener('touchstart', function(event) { initialPoint=event.changedTouches[0]; }, false); document.addEventListener('touchend', function(event) { finalPoint=event.changedTouches[0]; let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX); let yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); if (xAbs > 20 || yAbs > 20) { if (xAbs > yAbs) { if (finalPoint.pageX < initialPoint.pageX){ // to left } else{ // to right } } else { if (final

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!'); }); }); });

A short note about finding the maximum value in a JavaScript array with numeric values. The Array object in JS does not have its own max method. But we can add it. Array.prototype.max = function () { return Math.max.apply(null, this); } We borrowed the method we are interested in from the Math object. It will work like this: let arr = [3, 5, 6, 1, 10, '12', 0]; arr.max(); //12 If the array contains string values that cannot be cast to a number, the method returns NaN . You can do without modifying the global Array object. let arr = [3, 5, 6, 1, 10, '12', 56, 0]; Math.max.apply(null, arr); //56 And according to the syntax of ES6 you can write even easier let arr = [3, 5, 6, 1, 10, '12', 56, 0]; Math.max(...arr); //56

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

An accordion on the site on the site has to be used very often. The easiest option is to write in several lines based on slideToogle() . This option is no exception. For convenience, it was wrapped in a jQuery plugin. The jQuery library must be linked above the accordion script. HTML <!--Installation--> < head > < script src = " /jquery.js " > </ script > < script src = " /simpleAccordion.js " > </ script > </ head > <!-- //--> < div class = " accordion-block " > < div class = " title-acc " > Caption 1 </ div > < div class = " content-acc " > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati. </ div > < div class = " title-acc " > Caption 2

The cheat sheet on version control system - Git to see commits git log --pretty=oneline to see remote URL repositories git remote -v to clone into a non-empty directory git init git remote add origin https://name@bitbucket.org/name/rep.git git fetch git checkout -t origin/master an event log git reflog to change a repository git remote set-url origin https://some@bitbucket.org/some/some_st.git a new repository git remote add origin https://some@bitbucket.org/some/test.git git push -u origin master to delete a branch locally git branch -d fix-protobaz to delete a branch on the server git push --delete origin fix-protobaz to remove a file from the index git rm --cached --ignore-unmatch path/file.js to create a new branch git branch some_branch to create a new branch and immediately switch to it git checkout -b some_branch to switch to another branch git checkout some_branch to edit last commit comment git commit --amend -m "new comment" discard last

 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