HTML: id и переменные

Читать

Представляю один интересный и малоизвестный факт: если у HTML-элемента есть атрибут id, его значение можно использовать, как имя глобальной переменной, в JavaScript.

HTML:

<button id="my_button">…</button>

JavaScript:

my_button.onclick = ...

Кроме того, если у потомка элемента с id есть атрибут name, к такому элементу тоже можно обратиться в JavaScript.

HTML:

<form id="my_form"> 
  <input name="my_input"> 
</form>

JavaScript:

my_form.my_input.onclick = ...

Возможно, это не лучший способ взаимодействия с элементами интерфейса, но он работает.

#frontend #html #js

JavaScript: обратный вызов

Читать

Функции SetTimeout, setImmediate и process.nextTick очень похожи, запуская обратный вызов по завершнии текущего цикла событий (Event Loop).

SetTimeout выполняется с задержкой, длительность которой устанавливается в миллисекундах. На практике задержка может продлиться дольше, так как функция выполняется в начале следующего цикла событий, после завершения всей очереди текущего цикла событий. Если таймер установлен на 0, вызов функции происходит "немедленно" - она занимает первое место в очереди событий Event Queue) следующего цикла событий.

setImmediate очень похожа на SetTimeout и используется для прерывания длительных операций и запуска функции обратного вызова сразу после того, как браузер завершит текущий цикл событий. Обычно, выполнение этой функции происходит после SetTimeout.

Метод process.nextTick взааимодействует с циклом событий по своему сценарию, запуская функцию обратного вызова сразу после завершения текущего цикла. Можно представить, что process.nextTick встраивается между текущим и следующим циклами, хотя на самом деле он получает максимальный приоритет, отодвигая события в самом начале следующего цикла событий. process.nextTick всегда выполняется до SetTimeout и setImmediate.

function run() {
  setTimeout(() => console.log(" I am setTimeout"), 0);
  setImmediate(() => console.log("I am setImmediate"));
  process.nextTick(() => console.log("I am nextTick"));
  console.log("I am current event loop");
}

run()

Консоль:

I am current event loop
I am nextTick
I am setTimeout
I am setImmediate

#tutorial #interview #js

CSS: масштабирование элемента

Читать

Нередко во время верстки страниц возникает необходимость масштабировать элемент для комфортного просмотра на различных устройствах. В одних случаях элемент должен быть меньше исходного размера, в других - больше.

Для быстрого масштабирования элемента отлично подходит CSS-свойство zoom.

В том случае, ели значение свойства zoom будет меньше 1, элемент уменьшится.

Например, чтобы уменьшить элемент в 2 раза, нужно выбрать значение 0.5:

div {
  zoom: 0.5;
}

Для того, чтобы элемент увеличился, значение zoom должно быть больше 1.

Например, чтобы увеличить элемент в 2 раза, нужно выбрать значение 2.0:

div {
  zoom: 2;
}

#frontend #css

JavaScript: замыкание

Читать

Замыкание — это комбинация функции и лексического окружения, в котором эта функция была определена. В JavaScript замыкания создаются каждый раз во время создания функции. Способность замыканий заключается в запоминании переменных и функций, объявленных во внешней области видимости.

function showBiodata(){
  var employee = {
    name:"Rayn Dahl", 
    age:45,
    role: "Senior Programmer"
  };

  return function(){
    console.table(employee);
  }
}

var initClosure = showBiodata(); // Returns a function

initClosure(); 

В вышеприведенном коде функция showBiodata() присваивается переменной:

var initClosure = showBiodata();

После чего возвращаемая функция выполняется при вызове initClosure():

initClosure();

Результат:

1. name: 'Rayn Dahl'
2. age: 45
3. role: 'Senior Programmer'

В showBiodata() вместо уничтожения значения employee сразу после выполнения функции, они сохраняются для дальнейшего использования. По этой причине возвращающая функция initClosure() может использовать переменную, объявленную во внешней области видимости, даже после того, как функция уже выполнена.

Cпособность функции сохранять переменную для дальнейшего использования даже после ее выполнения называется замыканием.

#interview #frontend #js

Если кратко: идемпотентность

Читать

Идемпотентная операция может вызываться несколько раз без изменения результата. То есть, независимо от того, сколько раз будет повторено действие, результат не изменится - он будет соответствовать результату, который ожидался после того, как действие было осуществленно первый раз.

Простой пример идемпотентности из жизни: если нажать на кнопку лифта один раз или сто, лифт уже вызван и каждое последующие нажатие не изменит результат.

#tutorial #nutshell #есликратко

JavaScript: временная мертвая зона

Читать

Временная мертвая зона (temporal dead zone, TDZ) возникает при обращении к переменной до её инициализации при использовании ключевых слов let и const.

Например:

name = "Rayn Dahl"; // получаем ошибку ReferenceError
let name;

или

function showHi(){
  message = "Hi, there!"; // получаем ошибку ReferenceError
  let message;
}

showHi();

В коде, приведенном выше, происходит обращение к переменным до их объявления, что приводит к ошибке ReferenceError.

#interview #frontend #js

CSS: полезные однострочники

Читать

Однострочные решения для CSS есть в наборе каждого уважающего себя веб-разработчика. Конечно, "однострочники" могут быть очень специфичными, а их применение в различных проектах может быть продиктовано сугубо субъективными критериями. Тем не менее, в этой статье сделана попытка объединить наиболее популярные однострочные решения для CSS, вызывающие не только отклик в сердцах и умах программистов, но и повышающие лояльность пользователей.

Для чего нужны однострочные решения?

Однострочники на CSS помогут:

1. Ограничить ширину содержимого в области просмотра.
2. Увеличить основной текст.
3. Увеличить расстояние между строками.
4. Ограничить ширину изображений.
5. Ограничить ширину текста.
6. Сбалансированно оформить заголовки.
7. Привести цвета элементов управления форм в соответствие со стилями страницы.
8. Повысить читабельность таблиц.
9. Оптимизировать интервалы в ячейках и заголовках таблиц.
10. Убрать избыточную анимацию.

А теперь подробно и с примерами...

#frontend #css

JavaScript: rest и spread

Читать

В JavaScript rest и spread операторы имеют одинаковый синтаксис - ..., но при этом выполняют разные функции. Так чем же они отличаются?

Оператор rest забирает каждый элемент массива и создает из них новый массив. Обычно rest используют в функциях и в процессе деструктуризации.

Так rest позволяет функции принимать неопределенное количество аргументов в виде массива:

function sum(...args){
  let total = 0
  args.forEach(item=>total+=item)
  return total
}

console.log(total(1,2)); //3
console.log(total(1,2,3)); //6
console.log(total(1,2,3,4)); //10

С помощью rest, выполнив деструктуризацию, все однотипные элементы можно представить в одном массиве:

let order = ['John Doe', 1001, 4, 7, 12, 33];
let [name, id, ...items_id] = order;
console.log(name); // Pepperoni
console.log(id); // 2222
console.log(items_id); // [ 4, 7, 12, 33 ]

spread оператор или, другими словами, оператор расширения извлекает каждый элемент итерируемого объекта и погружает его в другой итерируемый объект.

К итерируемым объектам можно отнести все сущности, которые можно перебрать с помощью цикла. Обычно, в JavaScript это массивы и строки.

spread, например, позволяет перебрать элементы массива:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

или объединить два массива:

let numberStore = [1, 2];
let newNumber = [3, 4];
numberStore = [...numberStore, ...newNumber];
console.log(numberStore) // 1,2,3,4]

#interview #frontend #js

CSS: фиксируем количество строк

Читать

Порой, для улучшения читабельности контента на странце необходимо ограничить количество выводимых в блоке строк. Для этого существует очень простой метод:

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* Number of Lines */
}

#frontend #css

PHP: квиз

Читать

Как сделать квиз - страницу на которой будет представлен вопрос с несколькими типами данных для вариантов ответа (изображение, текст, файл, видео, ссылка) и результат?

Для этого необходимо выполнить всего несколько шагов с помощью HTML, jQuery, JSON, PHP и MySQL...

#backend #php

JavaScript: цикл и цикл событий

Читать

Какой результат будет получен, если воспользоваться функцией setTimeout() внутри цикла for?

function runner(){
  for(var i = 0; i < 3; i++){
    setTimeout(()=> console.log(i),0);
  }
}

runner()

Результат:

3
3
3

Благодаря setTimeout(), вывод переменной i, к которой мы обращаемся внутри цикла for, каждый раз откладывается на начало следующего цикла событий (Event Loop). Именно поэтому i сначала достигает своего максимального значения в текущем цикле событий, а уже в начале следующего цикла событий несколько раз выводится в консоль.

#interview #frontend #js

HTML: contenteditable

Читать

Знаете ли вы, что пользователю можно позволить редактировать контент элемента с помощью HTML-атрибута contenteditable? Такая возможность будет полезна для создателей CMS, интерактивноых блогов, опросников, текстовых редакторов. Атрибут contenteditable позволит сэкономить массу рабочего времени.

<div contenteditable="true">
  Этот текст можно редактировать
</div>

#frontend #html

PHP: простой калькулятор

Читать

Создадим с помощьью PHP, HTML, CSS и JavaScript простой калькулятор, выполняющий четыре действия: сложение, вычитание, умножение и деление...

#backend #php

JavaScript: сложение чисел с плавающей запятой

Читать

Какой результат будет получен, если вывести в консоль результаты сравнения операций сложений некоторых нецелых чисел с ожидаемым результатом:

console.log(0.1 + 0.2 === 0.3)
console.log(0.1 + 0.7 === 0.8)
console.log(0.1 + 0.2 - 0.2 === 0.1)
console.log(0.1 + 0.4 === 0.5)

Результат:

false 
false
false
true

Следует знать, что JavaScript использует не десятичную, а двоичную систему счисления. Для человека число 0.1 в привычной десятичной системе счисления выглядит именно как 0.1. В двоичной системе счисления, это число имеет бесконечную двоичную дробную часть и выглядит как 0.000110011001100110011…. JavaScript складывает двоичные представления чисел, а затем конвертирует результат обратно в десятичную систему счисления. К примеру, представления чисел 0.1 и 0.2 в двоичной системе не точны, поэтому результат их сложения будет равен приблизительно 0.30000000000000004.

#interview #frontend #js

HTML: пользовательские данные

Читать

Для хранения пользовательских данных в HTML-элементе существуют пользовательские атрибуты данных или data-* атрибуты.

<div id="user-profile" data-user-id="42" data-role="admin">
  <!-- какие-то данные -->
</div>

Это data-* атрибуты, которые позволяют добавлять дополнительную информацию. Доступ к пользовательским атрибутам и их значениям можно получить как в JavaScript (c помощью метода getAttribute() или объекта dataset), так и в CSS (с помощью функции attr()).

#frontend #html

PHP: список дел

Читать

Реализуем список дел (to do list) с помощью PHP, HTML, CSS, jQuery и AJAX. Пользователь сможет бесшовно создавать, редактировать и удалять задчи, не перезагружая страницу. Этот несложный проект превосходно демонстрирует реализацию CRUD в веб-приложении...

#backend #php

JavaScript: return

Читать

Что произойдет, если в JavaScript возвращаемое функцией выражение записать на следующей строке после return?

function runner()
{
    return 
    {
        name: "Rayn Dahl"
    }
}

console.log(runner().name)

Результат:

Uncaught TypeError: Cannot read properties of undefined

Оператор return безусловно завершает выполнение функции и возвращает её значение. Код, смысловое начало которого приходится на следующую строку игнорируется. Правильный синтатксис для данной задачи:

function runner(){
    return {
        name: "Rayn Dahl"
    }
}
console.log(runner().name)

приводит к ответу Rayn Dahl

#interview #frontend #js

HTML: hidden

Читать

Знаете ли Вы, что можно больше не вспоминать про CSS-cвойство display: none;? Элемент можно скрыть с помощью HTML-атрибута hidden. Этот метод выглядит более элегантно и поддерживает порядок в HTML-структуре страницы.

Использование атрибута hidden в JavaScript позволяет динамически выводить на экран устройства или скрывать содержимое элемента, не прибегая к CSS.

<p>Эту строку Вы видите.</p>
<p hidden>Эту строку Вы не видите.</p>

#frontend #html

PHP: гостевая книга

Читать

Реализуем гостевую книгу (книгу записей, guestbook) с помощью PHP, HTML, CSS, JavaScript и AJAX.

#backend #php

JavaScript: область видимости

Читать

Какой результат будет получен, если вывести в консоль значение переменной, которую переименовали внутри функции замыкания?

let name = "Rayn";

(function showName() {
    if (name === "Rayn") {
        let name = "Rayn Dahl";
        console.log(name);
    }
    console.log(name);
})();

console.log(name);

Результат:

Функция замыкания showName получает переменную name из внешней области видимости. А в конструкцииif ()... с помощью директивы let создается новая переменная name c другим значением и ограниченной областью видимости. Поэтому первый console.log(name) выводит значение Rayn Dahl, а второй console.log(name) показывает Rayn, обращаясь к значению переменной из внешней области видимости.

Rayn Dahl
Rayn

#interview #frontend #js

HTML: группируем элементы управления

Читать

Для того, чтобы пользователи не путались при заполнении веб-форм и наслаждались их визуальным представлением, существуют HTML-элементы fieldset и legend.

fieldset позволяет группировать несколько связанных элементов управления формы, а legend создает заголовки для таких групп, представляя в результате пользователю четкую и понятную структуру данных. Это особенно важно в тех случаях, когда для работы с формами приходится использовать инструменты экранного чтения (скринридеры).

<fieldset>
  <legend>Personal Information</legend>
  <label for="firstname">First Name:</label>
  <input type="text" id="firstname" name="firstname">
</fieldset>

#frontend #html