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

PHP: погода

Читать

Взяв за основу API реализуем метеоприложение с помощью PHP, HTML, CSS, Bootstrap, jQuery и AJAX...

#backend #php

Python: большие целые числа

Читать

Знаете ли вы, что в Python можно выполнять вычисления с очень большими целыми числами:

print(999 ** 999)

не вызовет ошибку, так как Python автоматически использует для чисел тип "bignum": Однако, существует ограничение, которое применяется к количеству цифровых символов во входной или выходной строке. Подчеркивания и знаки при этом не учитываются. Когда операция превышает лимит по количеству цифровых символов, возникает ошибка ValueError. По умолчанию ограничение устанавливается в sys.int_info.default_max_str_digits и составляет 4300 цифр.

#backend #python

HTML: srcset и sizes

Читать

Если Вы хотите, чтобы страницы сайта загружались быстрее, а сам веб-ресурс соответствовал принципам адаптивной вёрстки, используйте атрибуты srcset и sizes для HTML-элемента img.

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

<img src="image-small.jpg"
 srcset="image-medium.jpg 768w, image-large.jpg 1200w"
 sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
 alt="Responsive Image">

Картинки, соответствующие устройству, сокращают время загрузки веб-страницы и повышают лояльность пользователей.

#frontend #html

PHP: блог

Читать

Реализуем базовый функционал блога, в котором пользователь сможет создавать, редактировать и удалять статьи с помощью PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS, и MySQL.

#backend #php

JavaScript: перестановка переменных

Читать

Во время написания программного кода в JavaScript довольно часто возникает необходимость в обмене переменных значениями. Существует несколько способов сделать это, не прибегая к созданию дополнительных сущностей.

Рассмотрим один из самых простых вариантов:

let a = 10, b = 20;
[a, b] = [b, a];
console.log(a, b);

Результат:

Деструктуризация массива позволяет найти решение в одной элегантной и короткой строке:

20 10

#interview #frontend #js

HTML: placeholder

Читать

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

<input type="email" placeholder="you@example.com">

Таким образом, форма не загромождается текстом, а пользователь понимает, что именно от него ожидается в поле ввода.

#frontend #html

PHP: галерея

Читать

Реализуем простую, но полнофункциональную галерею с возможностью загрузки собственных файлов изображений с помощью PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS, и MySQL...

#backend #php

JavaScript: map и parseInt

Читать

В JavaScript результат вызова функции ['1', '5', '11'].map(parseInt) может сильно озадачить.

console.log(['1', '5', '11'].map(parseInt))

Результат:

[1, NaN, 3]

Чтобы понять, почему происходит именно так, необходимо погрузиться в особенности взаимодействия map и parseInt...

#interview #frontend #js

dr.Brain quiz js

Узнай, насколько ты хорош в JS, решая тесты.

Викторина с подробными описаниями правильных ответов - отличный способ подготовиться к собеседованию

HTML: video

Читать

Знаете ли вы, что можно забыть про фреймы с youtube, встраиваемые в контент страницы каждый раз, когда необходимо добавить видео. HTML-элемент video позволяет реализовать медиаплеер и добавить все необходимые атрибуты, такие как width, height, autoplay, loop, controls и другие.

<video autoplay="" loop="" controls="" width="640" height="480">
  <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video>

А ещё с помощью video можно оргнизовать стрим с помощью getUserMedia или WebRTC

#frontend #html

Python: qr код в 7 строк

Читать

Всего 7 строк кода на питоне нужно для того, чтобы сгенерировать и сохранить на компьютере картинку с qr-кодом...

#backend #python

HTML: progress

Читать

HTML-элемент progress отражает ход выполнения задачи. обычно отображается в виде прогресс-бара (индикатора выполнения).

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

<progress value="63" max="100">
</progress>

#frontend #html