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

JavaScript: переменная без директивы

Читать

Давайте разберемся, что получится, если присвоить переменной значение, забыв предварительно ёё объявить с помощью одной из директив: let, var или const?

Например:

myObject = {};
console.log(myObject);

Если оздается пустой объект в глобальном объекте. интерпретатор JS видит:

global.myObject = {} // в Node.js

window.myObject = {} // в браузерах
frames.myObject = {} // в браузерах
self.myObject = {} // в браузерах

self.myObject = {} // в веб-воркерах

globalThis.myObject = {} // во всех окружениях

{} // пустой объект в консоли

Чтобы избежать такого поведения нужно использовать "use strict". Эта запись поможет быть уверенным в том, что переменная была определена перед тем как ей присвоили значение.

#interview #frontend #js

HTML: translate

Читать

Атрибут translate используется для того, чтобы сообщить браузеру, следует ли переводить контент или нет.

<footer>
  <small>© 2024 <span translate="no">MyBrand</span></small>
</footer>

Хотя не все браузеры распознают атрибут translate, он автоматическими определяется различными системами перевода, такими как Google Translate, а также прикладными инстурментами, используемыми людьми-переводчиками. Поэтому важно указывать этот атрибут со значением no для обозначения контента, который не следует переводить.

#frontend #html

UI/UX дизайн: цветовые схемы

Читать

Руководство по цветовым паттернам в UI/UX-дизайне: методы и лучшие практики...

#design

Tailwind: адаптивный дизайн

Читать

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

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

#frontend #css #tailwind

JavaScript: пустой массив

Читать

Давайте сравним в JavaScript пустой массив [] с его логическим антиподом ![].

console.log([] == ![])

Думаете, что в результате будет false?

Обратимся к логике языка программирования.

1. Начнем с того, что JavaScript является слабо типизированным языком программирования и не требует явного указания типа данных для переменной.
2. Также не будем забывать, что оператор логического отрицания ! меняет значение операнда с истины на ложь и наоборот.
3. Наконец, запомним, что пустой массив [] является истинноподобным (truthy) значением.

Обогатившись знаниями, вернемся к нестрогому сравнению пустого массива и его противоположности:

1. Выражение ![] соответствует !true и вернет false.
2. Оператор == при сравнении приводит операнды к числам, а значит false соответствует 0, и [] тоже равен 0.
3. Очевидно, что сравнение двух 0 дает true

Результат: true

#interview #frontend #js

Tailwind: персонализация

Читать

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

#frontend #css #tailwind

HTML: poster

Читать

Атрибут poster используется для того, чтобы демонстрировать пользователю заставку, пока загружается видео или пока пользователь не запустит воспроизведение.

<video src="videofile.ogg" autoplay poster="posterimage.jpg">

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

#frontend #html

HTML: noscript

Читать

HTML-элемент noscript определяет ту часть кода страницы, которая будет выполняться, когда в браузере пользователя отсутствует JavaScript или отключена его поддержка.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
Таким образом noscript обеспечивает резервный механизм для компонентов, которые не работают без JavaScript.

#frontend #html