Обновить
256K+

Веб-разработка *

Делаем веб лучше

348,85
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Концепции, лежащие в основе Web Audio API

Время на прочтение9 мин
Охват и читатели11K


Доброго времени суток, друзья!

В этой статье объясняются некоторые концепции из теории музыки, на основе которых работает Web Audio API (WAA). Зная эти концепции, вы сможете принимать взвешенные решения при проектировании аудио в приложении. Статья не сделает вас опытным инженером по звуку, но поможет понять, почему WAA работает так, как работает.
Читать дальше →

Клиент-серверная архитектура в картинках

Время на прочтение10 мин
Охват и читатели837K


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

На клиент-серверной архитектуре построены все сайты и интернет-сервисы. Также ее используют десктоп-программы, которые передают данные по интернету. Поэтому ИТ-специалисту нужно понимать, что это такое и как работает.

Об этом я и расскажу в статье. Объясню на пальцах, с примерами и забавными картинками =) Если вы больше любите видео-формат, можно посмотреть мой ролик на youtube на ту же тему.

Содержание


Читать дальше →

О позитивном влиянии вариативных шрифтов на производительность веб-проектов

Время на прочтение9 мин
Охват и читатели4.6K
Когда размышляют о веб-шрифтах, и о том, какое влияние они оказывают на производительность сайтов, часто обращают внимание на три следующих показателя:

  • Количество запросов на загрузку файлов шрифтов.
  • Размеры файлов шрифтов.
  • Время до первого рендеринга страницы.

Мне захотелось узнать о том, как на эти показатели влияет применение вариативных шрифтов. Поэтому я сравнила их с обычными шрифтами. Вот что у меня получилось.


Читать дальше →

Обзор 14 свежих плагинов для Фигмы, которые помогут повысить производительность пока мы все #сидимдома

Время на прочтение7 мин
Охват и читатели19K


Сегодня мы поговорим о следующих новых Figma плагинах:

  • AutoGrid — Поддержка сетки для AutoLayout.
  • Tracking – Плагин для создания аннотаций отслеживания.
  • Find and Replace Colors – Организация цветовых стилей в ваших дизайнах
  • Spacing Manager – Плагин для согласованных отступов в компонентах
  • Geometric – Создание математических фигур и кривых
  • Halftones – Плагин, позволяющий накладывать точечный или полутоновый фильтры на картинки
  • Batch Styler – Изменение нескольких стилей текста одновременно
  • Spell Inspector — Поиск и исправление орфографических ошибок
  • Sitemap – Плагин для создания карты вашего сайта
  • Style Organizer — Показывает и упорядочивает все цветовые стили
  • Focus CSS — Более удобное использование CSS в Figma
  • Flipbook – Плагин для анимации ваших дизайнов в Figma
  • SwiftUI Inspector – Плагин для улучшения рабочего процесса разработки для платформ Apple
  • Filter – Фильтрующий плагин для ретуши ваших изображений

Читать дальше →

Пишем генератор рандомных акций Мосбиржи на JavaScript

Время на прочтение3 мин
Охват и читатели7.3K
Идея появилась, после того как случайно увидел подобный генератор для американской биржи NASDAQ, где автор bash скриптом скачивает с FTP сервера сводный список американских бумаг и трансформирует его в JSON, состоящий из одних тикеров, а затем при помощи фреймворка bootstrap и чистого JavaScript выводит на экран рандомный биржевой тикер, одновременно давая ссылку на популярный ресурс Yahoo! Finance.


«Магия» платформы CodePen для Московской биржи
Читать дальше →

Blazor Client Side Интернет Магазин: Часть 4 — Добавления товара в корзину

Время на прочтение2 мин
Охват и читатели3.1K


Привет, Хабр! Продолжаю делать интернет магазин на Blazor. В этой части расскажу о том как добавил в него возможность добавления товара в корзину. За подробностями добро пожаловать под кат.
Читать дальше →

Использование современных графических форматов в веб-проектах

Время на прочтение10 мин
Охват и читатели24K
Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:

JPEG-изображение нужно декодировать, растеризовать и вывести на экран. А JS-бандл надо, если рассматривать это упрощённо, загрузить, распарсить, скомпилировать, выполнить. На самом же деле движку приходится решать и другие задачи в процессе обработки JS-кода. В целом, стоит учитывать, что на обработку JavaScript-кода, размеры которого, в байтах, сопоставимы с размерами других материалов, тратится гораздо больше системных ресурсов.

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


Читать дальше →

5 практических рекомендаций по использованию React-хуков в продакшне

Время на прочтение8 мин
Охват и читатели15K
Автор статьи, перевод которой мы сегодня публикуем, говорит, что в компании commercetools приняли на вооружение хуки React в начале 2019 года — в момент их появления в React 16.8.0. С тех пор программисты компании постоянно перерабатывают свой код, переводя его на хуки. Хуки React позволяют, не используя классы, работать с состоянием компонентов и пользоваться другими возможностями React. Используя хуки, можно, работая с функциональными компонентами, «подключаться» к событиям жизненного цикла компонентов и реагировать на изменения их состояния.


Читать дальше →

Пишем сложный, но интересный слайдер на JavaScript

Время на прочтение5 мин
Охват и читатели6.4K


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

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

Для регистрации жестов (касаний) и перемещения (перетаскивания) используется hammer.js. Данная библиотека позволяет обнаруживать как клики мышью, так и касания пальцем.

Итак, поехали.

Blazor Client Side Интернет Магазин: Часть 3 — Витрина товаров

Время на прочтение9 мин
Охват и читатели3.4K


Привет, Хабр! Продолжаю делать интернет магазин на Blazor. В этой части расскажу о том как добавил в него витрину товаров и сделал свои компоненты. За подробностями добро пожаловать под кат.
Читать дальше →

Пришло время бесплатных сайтов

Время на прочтение3 мин
Охват и читатели202K

Привет, %username%!




Сегодня многие начинающие веб-разработчики делают большую ошибку, и не одну. Они что-нибудь сверстают, а потом покупают хостинг. Далее покупают домен. Регистрируют и подключают SSL-сертификат. Я, спасаясь от минус-кармы, просто расскажу как не тратить деньги на свои тестовые проекты.
Читать дальше →

Разработчики Perekrestok.ru. Что мы делаем и кого ищем в команды

Время на прочтение10 мин
Охват и читатели7.2K
Сегодня мы хотим поговорить о найме людей в IT-команды онлайн-супермаркета Perekrestok.ru и о том, как устроена наша работа «внутри». Ритейл – отрасль со своей интересной спецификой, а сейчас в том числе и от нашей работы зависит, будут ли тысячи людей каждый день обеспечены продуктами. В этом посте мы даем слово нашим тимлидам, они рассказывают о проектах Perekrestok.ru, методах работы, а также о том, как можно попасть в команду и что могут спросить на собеседовании.


Читать дальше →

Всё о ключевом слове auto в CSS

Время на прочтение13 мин
Охват и читатели54K
В CSS есть ключевое слово auto, которое можно использовать при работе с различными свойствами элементов. Это — свойства, влияющие на позицию, высоту, ширину элементов. Это — свойства, предназначенные для настройки отступов элементов и других их характеристик. У меня появилось желание где-нибудь записать всё то, что я знаю об auto. Например — оформить это всё в виде материала, который мог бы стать справочником для тех, кто интересуется тонкостями использования этого ключевого слова.

Ключевое слово auto имеет особый смысл при использовании его с различными CSS-свойствами. Мы разберём особенности auto, касающиеся применения этого значения к различным свойствам.



Здесь, в первую очередь, нас будут интересовать технические детали работы auto. Поговорим мы и о том, как извлечь максимум пользы из применения этого свойства. Тут вы найдёте и заметки о сценариях использования auto, и примеры.
Читать дальше →

Ближайшие события

Алгоритмы быстрой обработки HTTP-строк

Время на прочтение22 мин
Охват и читатели11K
В HTTP/2 появилась компрессия стандартных заголовков, но тело URI, Cookie, значения User-Agent по-прежнему могут составлять десятки килобайт и требуют токенизации, поиска и сравнения подстрок. Задача становится критичной, если HTTP-парсер должен обрабатывать интенсивный злонамеренный трафик. Стандартные библиотеки предоставляют обширный инструментарий обработки строк, но у HTTP-строки есть своя специфика. Именно для этой специфики разработан HTTP-парсер Tempesta FW. Его производительность в несколько раз выше по сравнению с современными Open Source решениями и превосходит быстрейшие из них.


Александр Крижановский (krizhanovsky) основатель и системный архитектор Tempesta Technologies, эксперт в области высокопроизводительных вычислений в Linux/x86-64. Александр расскажет об особенностях структуры HTTP-строк, объяснит, почему стандартные библиотеки плохо подходят для их обработки, и представит решение Tempesta FW.

Под катом: как HTTP Flood превращает ваш HTTP-парсер в узкое место, проблемы x86-64 с branch mispredictions, кэшированием и не выровненной памятью на типичных задачах HTTP-парсера, сравнение FSM с прямыми переходами, оптимизация GCC, автовекторизация, strspn()- и strcasecmp()-like алгоритмы для HTTP-строк, SSE, AVX2 и фильтрация инъекционных атак с использованием AVX2.

Моя шпаргалка по pandas

Время на прочтение8 мин
Охват и читатели982K
Один преподаватель как-то сказал мне, что если поискать аналог программиста в мире книг, то окажется, что программисты похожи не на учебники, а на оглавления учебников: они не помнят всего, но знают, как быстро найти то, что им нужно.

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



Нельзя сказать, что это — исчерпывающий список возможностей pandas, но сюда входят функции, которыми я пользуюсь чаще всего, примеры и мои пояснения по поводу ситуаций, в которых эти функции особенно полезны.
Читать дальше →

Почему пора перестать использовать JavaScript IIFE

Время на прочтение3 мин
Охват и читатели55K
Немедленно вызываемая функция (Immediately Invoked Function Expression — IIFE) в JavaScript — это конструкция, позволяющая вызывать функцию непосредственно после ее определения.

image

В этой статье мы разберемся, почему стоит отказаться от использования IIFE, несмотря на ее былые заслуги.
Читать дальше →

Как устроена контент-система Турбо-страниц: схемы, факты и немного истории

Время на прочтение7 мин
Охват и читатели7.8K


По данным TelecomDaily, почти 30% пользователей мобильного интернета в России ежедневно сталкиваются с проблемами при загрузке сайтов. Однако причина может быть не только в неравномерном покрытии, но и в слишком большом «весе» страницы.

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

Как работает эта магия? Какой путь проходят данные, прежде чем стать полноценной Турбо-страницей? Меня зовут Стас Макеев, я руковожу разработкой технологии Турбо-страниц. Сейчас попробую всё объяснить.
Читать дальше →

Intersection Observer API: примеры использования

Время на прочтение7 мин
Охват и читатели118K


Доброго времени суток, друзья!

Обзор


Intersection Observer API (IOA) позволяет приложению асинхронно наблюдать за пересечением элемента (target) с его родителем (root) или областью просмотра (viewport). Другими словами, этот API обеспечивает вызов определенной функции каждый раз при пересечении целевого элемента с root или viewport.

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

  • «ленивая» или отложенная загрузка изображений
  • бесконечная прокрутка страницы
  • получение информации о видимости рекламы для целей расчета стоимости показов
  • запуск процесса или анимации, находящихся в поле зрения пользователя

Читать дальше →

Использование возможностей TypeScript в JavaScript без написания TypeScript-кода

Время на прочтение5 мин
Охват и читатели14K
Я — большой любитель TypeScript. По возможности я стараюсь использовать этот язык в своих проектах. TypeScript даёт разработчику отчёты об ошибках и проверку типов в JavaScript и TypeScript-коде. Кроме того, тот, кто пишет на TypeScript, может пользоваться удобными возможностями по автозавершению кода, может, быстро и надёжно, выполнять рефакторинг. TypeScript — это первая линия обороны от ошибок в коде. Ещё одна сильная сторона этого языка заключается в том, что он позволяет, при написании программ, пользоваться самыми свежими возможностями JavaScript. При этом то, что получается при преобразовании TypeScript-кода в JavaScript, будет поддерживаться всеми браузерами. Это очень приятно.



Правда, не все фронтенд-проекты предусматривают применение TypeScript. Что если можно было бы пользоваться возможностями TypeScript, но при этом не переводить на него весь проект (и всю команду), и не добавлять в конвейер сборки проекта новый инструмент? Это возможно благодаря VS Code и JSDoc.
Читать дальше →

Как сервис Estimate помогает автоматизировать процесс оценки и узнать стоимость IT-проекта

Время на прочтение6 мин
Охват и читатели13K
Как для бизнеса, так и для IT-компании оценка – один из самых важных этапов в начале работы над проектом. Бизнес готов сотрудничать с тем подрядчиком, который назовет стоимость объективно и быстро, кроме того, заказчикам нужна максимальная прозрачность оценки.

При этом на рынке существует значительный разброс цен: например, одна IT-компания оценивает работу в 300 тысяч рублей, а другая – в 900 тысяч. Стоимость зависит от множества факторов: способа реализации, опыта экспертов, глубины оценки и т.д.

Мы в SimbirSoft уже пять лет используем собственный сервис для автоматизации процесса оценки – Estimate. Мы создали его для того, чтобы упростить работу специалистов, которые занимались оценкой вручную – потому что количество запросов на разработку постоянно росло, а опытные эксперты одновременно были нужны и в оценке, и в проектной работе. Мы постепенно улучшали Estimate и в результате получили инструмент, который учитывает особенности разработки IT-систем любой сложности. В статье расскажем, как вы можете с его помощью ускорить оценку и учесть возможные риски.

Читать дальше →