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

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