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

Homebrew: обзор

Читать

Homebrew — это пакетный менеджер для MacOS, который позволяет устанавливать программы и утилиты командной строки.

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

#dev #tutorial

HTML: theme-color

Читать

При посещении некоторых популярных сайтов с мобильных устройств строка меню в Chrome волшебным образом меняет свой цвет, чтобы соответствовать основному цвету пользовательского интерфейса.

Это не магия: такого эфффекта можно добиться с помощью атрибута name="theme-color" HTML-элемента meta из раздела head. Именно этот атрибут предлагает браузеру использовать укзанный цвет вместо предустановленного.

<meta name="theme-color" content="#4285f4">

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

#frontend #html

Homebrew: терминология

Читать

Работая с Homebrew можно либо полюбить, либо возненавидить "пивную" терминологию этого пакетного менеджера. В любом случае погрузиться в пивную экосистему придётся...

#dev #tutorial #homebrew

HTML: output

Читать

С помощью элемента output можно выводить результат выполнения скрипта:

<form oninput="r.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)">
  <input type="number" id="a" value="100">
  +<input type="number" id="b" value="50">
  +<input type="number" id="c" value="50">
  =<output name="r" for="a b c"></output>
</form>

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

#frontend #html

Tailwind: темный режим

Читать

Давайте рассмотрим, как реализовать в Tailwind CSS темный режим (dark mode). Темный режим на протяжении уже многих лет сохраняет свою актуальность и популярность, так как действительно обеспечивает комфортные условия работы пользователей с контентом в условиях слабого освещения, уменьшая дискомфорт и снижая нагрузку на глаза.

Для создания и поддержки темного режима в Tailwind предусмотрены встроенные утилиты...

#frontend #css #tailwind

CSS: управлением фоном элемента

Читать

Свойство z-index позиционирует элементы по оси Z, то есть определяет, в какой последовательности происходит наложение элементов. Так, иногда для дочернего элемента можно установить значение свойства z-index меньше чем для родительского, в результате дочерний элемент скроется за родительским элементом. Избежать такого эффекта позволяет создание нового контекста наложения (stacking context) для родительского элемента. Сделать это можно, например, добавив родителю CSS-свойство isolation: isolate.

Технику создания нового контекста наложения можно использовать для создания эффекта наведения, при котором меняется фон кнопки:

button.join-now {
    cursor: pointer;
    border: none;
    outline: none;
    padding: 10px 15px;
    position: relative;
    background-color: #5dbea3;
    isolation: isolate; /* без этого свойство дочерний элемент скроется за родительским */
}

button.join-now::before {
    content: "";
    position: absolute;
    background-color: #33b249;
    top: 0;
    left: 100%;
    right: 0;
    bottom: 0;
    transition: left 500ms ease-out;
    z-index: -1;
}

button.join-now:hover::before {
    left: 0;
}

Так при наведении будет изменяться фон элемента button, не мешая тексту на переднем плане.

#frontend #css

Xcode: обзор

Читать

Сразу замечу, что в большинстве случаев для эффективной работы не нужно устанавливать весь пакет Xcode. Для создания программного обеспечения на Mac достаточно иметь в своем распоряжении Xcode Command Line Tools.

А теперь по порядку...

#dev #xcode #macos

CSS: кнопка в форме таблетки

Читать

Сделать кнопку в форме таблетки или пилюли (кнопку со скругленными краями) можно, установив элементу button очень большое значение для свойства border-radius, которое, несомненно, должно быть больше высоты кнопки:

button.btn {
    border-radius: 80px; /* значение должно значительно превышать высоту кнопки */
    padding: 20px 30px;
    background-color: #fdd835;
    border: none;
    color: black;
    font-size: 20px;
}

Не стоит забывать, что высота кнопки может увеличиваться при изменении дизайна. Поэтому, в большинсте случаев, для разработчика будет удобно устанавливать border-radius с очень большим значением, чтобы ваш CSS-эффект продолжал работать независимо от того, насколько увеличится высота кнопки.

#frontend #css

CSS: текст с многоточием

Читать

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

p.intro {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Для того, чтобы результат соответствовал ожиданиям, должны быть соблюдены следующие правила:

1. для элемента с текстом указывается явная ширина width,
2. чтобы предотвратить автоматический перенос текста на следующую строку нужно указать свойство white-space: nowrap;,
3. текст, выходящий за пределы блока нужно обрезать overflow: hidden;,
4. конец обрезанной строки дополняется многоточием text-overflow: ellipsis;.

#frontend #css