Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

JS: Отличие переменных с $ вначале и без него?

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

Почему программисты используют $?


Префикс $ чаще всего используется для соблюдения соглашения о стиле кодирования и улучшения читаемости кода. Вот несколько распространённых причин, почему разработчики добавляют $ к именам переменных:
  1. DOM-объекты: Традиционно переменные, содержащие ссылки на элементы DOM (Document Object Model), называют с префиксом $, чтобы подчеркнуть, что они ссылаются на DOM-объекты.

    Пример: 
    const $header = document.querySelector('header');
const $button = document.getElementById('submit-btn');
  2. Обозначения jQuery-оберток: В jQuery традиционно переменные, содержащие обернутые элементы jQuery, обозначаются с префиксом $, чтобы напомнить, что переменная содержит jQuery-коллекцию.

    Пример: 
    const $btn = $('#submit-btn');
  3. Чистая конвенция: Иногда префикс $ используется просто как
...

Gulp

Gulp — это мощный и гибкий инструмент автоматизации задач (task runner) для фронтенд-разработки, написанный на JavaScript и работающий на платформе Node.js. Gulp позволяет автоматизировать рутинные задачи, такие как сборка проектов, минификация и оптимизация кода, оптимизация изображений, конкатенация файлов, компиляция препроцессоров CSS (Sass, Less) и многое другое.

Основные преимущества Gulp


  • Простота и удобство: задачи в Gulp описаны простыми JavaScript-функциями, что делает их легкими для понимания и модификации.
  • Гибкость: возможность комбинировать плагины и настраивать конвейеры обработки файлов.
  • Экосистема плагинов: огромная экосистема плагинов, позволяющая решать любые задачи фронтенд-разработки.
  • Производительность: асинхронное выполнение задач, параллельное выполнение заданий и кэширование предыдущих процессов.

Как работает Gulp


  1. Установка: установить Gulp и зависимые пакеты через npm (Node Package Manager).
  2. Конфигурация: создать файл gulpfile.js, в котором будут описаны задачи и
...

Gulp: Плагин "gulp-imagemin"

gulp-imagemin — это мощный плагин для Gulp, предназначенный для автоматической оптимизации изображений, уменьшая их размер без ощутимой потери качества. Он поддерживает множество форматов изображений, таких как JPEG, PNG, GIF и SVG, и позволяет значительно сократить размер файлов, улучшая производительность веб-сайта.

Основные возможности gulp-imagemin


  • Автоматическое сжатие изображений: уменьшается размер файлов за счет удаления ненужных метаданных и оптимизации внутренних данных.
  • Поддержка популярных форматов: оптимизирует изображения в форматах JPEG, PNG, GIF и SVG.
  • Простота интеграции: легко интегрируется в конвейер сборки Gulp.
  • Масштабируемость: может оптимизировать сотни изображений за один прогон.

Установка gulp-imagemin


Для начала нужно установить Gulp и сам плагин: 
npm install --save-dev gulp gulp-imagemin

Пример использования


Пример простого Gulp-таска для оптимизации изображений: 
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

// Задача для оптимизации
...

Работа с изображениями на сайте

Графика
Изображения занимают центральное место в оформлении веб-страниц, они привлекают внимание, увеличивают вовлеченность и положительно влияют на восприятие контента. Однако неумелое использование изображений способно замедлить загрузку сайта и негативно сказаться на пользовательском опыте. В этой статье мы рассмотрим лучшие практики работы с изображениями на сайте.



Форматы изображений


Выбор правильного формата изображения напрямую влияет на скорость загрузки страницы и качество отображения.

Основные форматы:
  • GIF: Формат, поддерживающий анимацию и прозрачность. Несмотря на невысокое качество и большие размеры файлов, GIF по-прежнему популярен для создания анимированных баннеров и мемов.
  • JPG / JPEG: хорошо сжимает фотографии, сохраняя приемлемое качество. Подходит для фотографий и сложных изображений.
  • PNG: сохраняет прозрачность и поддерживает прозрачный фон. Лучше всего использовать для иконок, логотипов и графических элементов.
  • SVG: векторный формат, идеально подходит для иконок и рисунков,
...

Адаптация сайта под мобильные устройства

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



Зачем нужна адаптация сайта под мобильные устройства?


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

Преимущества адаптивной версии:
  • Улучшается юзабилити и UX (опыт взаимодействия).
  • Рост показателя вовлечённости пользователей.
  • Положительное влияние на ранжирование в поисковиках (Google Mobile-Friendly Update).
  • Возможность выгодно выделиться среди конкурентов.

Методы адаптации сайта под мобильные устройства


Существует несколько подходов, которые позволяют адаптировать сайт под мобильные устройства:

Резиновая (responsive) верстка
Это...
Реклама