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

Если кратко: интернет вещей

Читать

Интернет вещей (internet of things, IoT) можно сравнить с паутиной. Паутина — это система сложных взаимодействий между различными объектами, в которой главная роль принадлежит пауку, управляющему всеми нитями, получающему от этих нитей информацию и реагирующему на неё.

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

JavaScript: параметры по умолчанию

Читать

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

function sum(a = 1, b = 1) {
  return a + b
}

sum(); 
sum(2, 3);
sum('');
sum(null, 2);
sum(undefined, null)

Результат:

1. sum() при вызове функции аргументы не передаются, поэтому используются значения, установленные по умолчанию, 1 и 1, результат 2.
2. sum(2, 3) при вызове функции пользователь передаёт значения аргументов 2 и 3, результат 5.
3. sum('') при вызове функции пользователь передаёт пустую строку в первом аргументе, инициируя конкатенацию пустой строки и 1, результат 1.
4. sum(null, 2) при вызове функции пользователь передаёт значения null (при сложении соответствует 0) и 2, результат 2.
5. sum(undefined, null) при вызове функции пользователь передаёт значения undefined (при сложении соответствует 1) и null (при сложении соответствует 0), результат 1.

#interview #frontend #js

HTML: download

Читать

Хотите сообщить пользователю, что нажав на ссылку, он сможет скачать и сохранить файл? Атрибут download HTML-элемента a предназначен как раз для этого. В качестве значения атрибута download можно указать имя файла, под которым он будет сохранен в локальном хранилище по умолчанию.

<a href="path/to/file.pdf" download="myfile.pdf">Скачать PDF</a>

Однозначано, атрибут download значительно упрощает процедуру скачивания и сохранения файлов для пользовтелей.

#frontend #html

HTML: UUID

Читать

Если при использовании веб-приложения необходимо создать уникальный идентификатор, стоит подумать о методе crypto.randomUUID(), который создает UUID (Universally Unique Identifier) v4.

Такая возможность поддерживается всеми актуальными версиями распространённых браузеров и является частью Web Crypto API.

Почему стоит использовать crypto.randomUUID():

1. Простота: нет нужды в сторонних библиотеках или сложных алгоритмах.
2. Безопасность: используется устойчивый к взлому генератор случайных чисел.
3. Соответствие стандартам: RFC4122.

const uuid = window.crypto.randomUUID();
console.log(uuid); // e.g. "36b8f84d-df4e-4d49-b662-bcde71a8764f"

#frontend #js

JavaScript: falsy

Читать

Значения, которые в булевом контексте возвращают false называются ложноподобными (falsy). Но какие из выражений действительно относятся к falsy?

let a = 0;
let b = new Number(0);

if(!a) console.log("Hello world");
if (!b) console.log("Hello Nodejs");
else console.log("Hello Javscript");

Результат:

Hello world
Hello JavaScript

В перовм случае значение переменной a равно 0 и является ложноподобным, поэтому !a возвращает true.
Во втором случае new Number(0) возвращает объект, который в булевом контексте всегда соответствует true, поэтому значение b не является ложноподобным, я !b возвращает false.

#interview #frontend #js