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

HTML: meter

Читать

Для измерения данных в заданном диапазоне (датчик) в HTML существует элемент meter.

Для того чтобы установить диапазон можно использовать атрибуты минимальных min и максимальных max значений:

<meter value="2" min="0" max="10">2 out of 10</meter>

Также можно указать значение value в процентах (долях единицы):

<meter value="0.6">60%</meter>

#frontend #html

CSS: откажись от margin-top

Читать

Вот и настало время для переосмысления подхода к верстке макетов. Давайте поговорим о CSS-свойстве margin-top. Уже много лет margin-top - один из основных элементов в наборе инструментов верстальщика. Но важно знать, что есть и более интересные способы управления пространством между блоками, позволяющие создавать понятный и удобный для дальнейшей работы код: margin-bottom и gap...

#frontend #css

HTML: map

Читать

Для определения интерактивной карты изображений существует HTML-тег map.

Интерактивной картой является изображение с кликабельными областями. Все что нужно сделать - это указать координаты в атрибуте coords дочерних элментов area:

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

В приведенном выше примере создаётся карта солнечной системы, определяются области для каждой планеты и после клика на соответствующей области карты посетитель перенаправляется на отдельную для каждой планеты страницу.

#frontend #html

PHP: конвертер курсов валют

Читать

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

#backend #php