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

HTML: проверка орфографии

Читать

Хотите уменьшить количество опечаток и ошибок, совершаемых пользователями при взаимодействии с сайтом? Именно для этих целей существует атрибут spellcheck, который включает проверку содержимого элемента на наличие орфографических ошибок.

spellcheck применим для полей вводи textarea и input, а также для HTML-элементов с включённым атрибутом contenteditable.

<textarea spellcheck="true">Этот текст проверяется на наличие ошибок</textarea>

Атрибут spellcheck позволяет избегать неловких опечаток при заполнении веб-форм, повышая таким образом лояльность пользователей.

#frontend #html

Если кратко: big O нотация

Читать

Big O нотация указывает, насколько быстро будет выполнен алгоритм при увеличении объема данных. Big O нотация используется для сравнения различных алгоритмов и выбора наиболее эффективного. Так код, который выполняется за доли секунд при трёх одновременных соединениях, может выполняться несколько часов, если количество одновременных подключений достигнет ста. Почему так происходит?

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

JavaScript: свойства объекта

Читать

Что увидим в консоли, если обратимся к свойствам объекта JavaScript?

let { fullname: name, age, dept: department = "CSE", designation: role = "developer" } = { fullname: "Rayn Dahl", age: 45, dept: "IT" };

console.log(name);
console.log(age);
console.log(department);
console.log(role)

Результат:

Rayn Dahl
45
IT
developer

Свойство объекта соответствует приведенным ниже правилам:

1. Свойства объекта можно извлечь и присвоить переменной с другим именем.
2. Свойству объекта можно присвоить значение по умолчанию, если значение свойства экземпляра объекта не определено.

#frontend #interview #js

HTML: inputmode

Не стоит забывать, что жизнь пользователей, заполняющих поля данных веб-форм с мобильных устройств, можно значительно облегчить, указав раскладку виртуальной клавиатуры с помощью атрибута inputmode. Атрибут inputmode указывает, ввод какого типа данных ожидается и определяет соответствующие настройки виртуальной клавиатуры:

<input type="text" inputmode="numeric" placeholder="Enter your phone number">

Подходящая раскладка виртуальной клавиатуры значительно снижает количество ошибок при вводе данных на мобильных версиях сайтов и повышает лояльность пользователей.

Подробно

#frontend #html

Если Вам понравился материал, проголосуйте за канал. Это важно для его дальнейшего развития

PHP: контактная информация

Читать

Реализуем простую форму с контактной информацией (contact form) с помощью PHP, HTML, CSS, Bootstrap, jQuery и AJAX. Пользователь сможет заполнить контактные данные и отправить их на email владельца сайта...

#backend #php

Если Вам понравился материал, проголосуйте за канал. Это важно для его дальнейшего развития

JavaScript: директивы в цикле и цикле событий

Читать

В статье "JavaScript: цикл и цикл событий" мы разобрали, какой результат будет получен, если воспользоваться функцией setTimeout() внутри цикла for, для которого счетчик i объявлен, как глобальная переменная с помощью директивы var. Но, что получится, если вместо var использовать let?

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

runner()

Результат:

0
1
2

Так как счетчик i определён директивой let, область видимости для него ограничивается пределами одного блока.

Блок это что угодно между { }

Для setTimeout() цикл событий (Event loop) в данном случае будет находиться в пределах одной итерации цикла for..., поэтому каждый раз при выводе в консоль i будет иметь новое значение, замкнутое внутри своей области видимости.

#interview #frontend #js

Если Вам понравился материал, проголосуйте за канал. Это важно для его дальнейшего развития

HTML: details и summary

Читать

Для того, чтобы создать аккордеон (контент, который можно "развернуть" и "свернуть") необязательно использовать CSS и JavaScript. Для быстрого и эффективного решения этой задачи отлично подойдут HTML-элементы details и summary. details позволяет развернуть скрытую информацию, а его первый дочерний элемент summary является меткой для такого виджета скрытия и раскрытия.

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It's the foundation of the web!</p>
</details>

Это решение подходит, например, для ответов на часто задаваемые вопросы (FAQ) и многоуровневых меню.

#frontend #html

Если Вам понравился материал, проголосуйте за канал. Это важно для его дальнейшего развития

JavaScript: let и var

Читать

Что получится, если попробвать вывести в консоль значения переменных до их объявления. Рассмотрим такие примеры для переменных, созданных с помощью директив let и var.

function showMe() {
  console.log(name);
  console.log(age);
  var name = "Ivan";
  let age = 25;
}

showMe();

Результат:

undefined
ReferenceError

Переменная name объявлена директивой var. Это означает, что для неё нет временной мертвой зоны (DMZ, той части кода, которая находится до объявления перменной). Поэтому при обращении к name будет выведено её значение по умолчанию undefined, которое будет существовать до тех пора пока исполнение кода не дойдет до строчки, где определяется переменная.

Переменная age объявлена директивой let. Это означает, что у нее есть временная мертвая зона. Доступ к такой переменной до её инициализации завершится ошибкой. JavaScript выбросит исключение ReferenceError.

#interview #frontend #js

Если Вам понравился материал, проголосуйте за канал. Это важно для его дальнейшего развития

HTML: draggable

Читать

Атрибут draggable позволяет пертаскивать HTML-элемент. Это очевидный и несложный метод реализации интерактивных возможностей без обращения к внешним библиотекам.

<img src="image.jpg" alt="Draggable Image" draggable="true">

Для создания своих неповторимых интерфейсов с drag-and-drop функциями используйте атрибут draggable в сочетании с JavaScript.

#frontend #html

Что нам готовит код-ревью?

Читать

Если Вы не считаете, что код-ревью является критически важным этапом разработки программного продукта, прочитайте эту статью. Она создана для Вас...

#dev #opinion

CSS: вращение

Читать

Вращение (hover-rotate) картинки при наведении добавляет веб-странице интерактивности и делает её более привлекательной для пользователей. Рассмотрим, как с помощью HTML и CSS реализовать поворот изображения по оси...

#frontend #css

HTML: выбор даты

Читать

Вместо привычного JavaScript попробуйте использовать type="date" для HTML-атрибута input. Так в большинстве современных браузеров открывается встроенный выбор даты, облегчая пользователям заполнение форм на веб-страницах.

<input type="date" name="birthday">

Атрибут type со значение date создаёт поле ввода для даты, не требующее подключения дополнительных внешних библиотек.

#frontend #html