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

HTML: datalist

Читать

Заполнение поля ввода input type="text" можно значительно облегчить, добавив ему атрибут list с уникальным идентификатором и набор подсказок datalist (с дочерними HTML-элементами option).

<input type="text" list="planets">
<datalist id="planets">
    <option value="Меркурий"></option>
    <option value="Венера"></option>
    <option value="Земля"></option>
    <option value="Марс"></option>
    <option value="Юпитер"></option>
    <option value="Сатурн"></option>
    <option value="Уран"></option>
    <option value="Нептун"></option>
</datalist>

#frontend #html

CSS: Bootstrap vs. Tailwind CSS

Читать

Сегодня мы погрузимся в мир CSS-фреймворков и сравним Bootstrap и Tailwind CSS . Независимо от того, являетесь ли вы опытным разработчиком или только начинаете изучение HTML-верстки, выбор правильного фреймворка существенно влияет на организацию рабочего процесса и визаульное представление готовых проектов. Чтобы принять взвешенное и объективное решение, нужно рассмотреть основные различия между Bootstrap и Tailwind CSS...

#frontend #css #bootsprap #tailwind #opinion

Tailwind: введение

Читать

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

#frontend #css #tailwind