Обновить
512K+

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

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

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

T-shape во фронтенде. Опыт Sportmaster Lab

Время на прочтение7 мин
Охват и читатели3.9K
Что должен уметь фронтенд-разработчик в известной компании, которая предлагает своим покупателям широкий спектр товаров: от спортивного инвентаря и специализированной одежды до мячиков-антистресс? Знать стандартные решения и немного DevOps, использовать весь свой наработанный опыт, внимательно вести документацию. Как придумываются велосипеды в IT-подразделении «Спортмастера» во время конференции «Frontend Live 2020» рассказал фронтендер Sportmaster Lab Сергей Чумак.

image

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

Есть ли перспективы у монолитных web-приложений?

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

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

В фокусе моих интересов не гигантские web-приложения типа Gmail, Facebook, Twitter, а web-приложения, созданные на базе таких платформ, как Wordpress, Drupal, Joomla, Django, Magento и им подобным. Под катом мои субъективные мысли на этот счёт. Ничего нового - всё те же 33 буквы кириллицы и 26 букв латиницы вперемешку.

Читать далее

React — Используйте стандартные пропсы для потока данных

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


Давайте поговорим про поток данных React приложения состоящего из набора форм.

Предполагается, что читатель знаком с react, react-хуками, функциональными компонентами, мемоизацией хорошо знает javascript и не пугается spread операторов (три точки которые).
Update 1: Извините, но примеры написаны без использования Typescript и встречается Redux.

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

Узнать какие

Mathematics Driven Design: размеры и отступы

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

Здравствуйте, меня зовут Дмитрий Карловский и я… дизайнер. Дизайнер от слова design (проектирование), а не от слова style (дизайн). Я разрабатываю высокоуровневый фреймворк $mol. Одна из основных концепций которого — Лего. То есть это набор очень маленьких кирпичиков с простым и универсальным интерфейсом коммуникации. Комбинируя эти кирпичики в разных комбинациях можно строить приложения любой сложности.


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


Поэтому, мы разработали математически выверенный концепт дизайна, суть которого можно уловить из следующей шпаргалки:



Далее я расскажу, почему всё именно так, и никак иначе...

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

Не храните в базах данных HTML

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели6.8K

Часто информация, которая отображается пользователю и имеет свойства разметки, хранится в базе данных и сразу в формате HTML. Я уверен, что те, кто хоть раз создавал свой блог, Хабр или что-то подобное, скажут: «Да, было». Но что, если я предложу другой подход? Использовать JSON.


Давайте вместе разберёмся в преимуществах и недостатках такого подхода к хранению данных.


Ирония создания новых стандартов: попытка объединить стандарты приводит к их увеличению

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

Готовим console.log() правильно

Время на прочтение7 мин
Охват и читатели22K
Специально к старту нового потока курса «Frontend-разработчик» делимся с вами полезным переводом. Автор рассказывает, как использует методы логирования в производственной среде собственного проекта и в чём именно они помогают. Кроме того, нас знакомят с платформой AppSignal, созданной, чтобы напрямую уведомлять разработчика о возникающих у пользователя исключениях в приложении. Подробности под катом.

Приятного чтения!

Таблицы и CSS-свойство float в современной веб-разработке

Время на прочтение4 мин
Охват и читатели13K
Больше двадцати лет тому назад таблицы были основным HTML-средством для оформления веб-страниц. Таблицы давали веб-мастерам стабильный механизм для создания сайтов, имеющих некие признаки «дизайна». Содержимое страниц больше не должно было идти строго сверху вниз. Материалы можно было размещать в ячейках таблиц, располагавшихся слева направо и сверху вниз. В те времена это казалось большим достижением.

Таблицы, правда, никогда не предназначались для создания макетов страниц. А тот, кто использует таблицы в таком качестве сегодня, сталкивается с самыми разными проблемами. Таблицы были удобным «хаком», но лишь в своё время. Они могли принести много пользы, особенно тому, кто пытался создать какой-нибудь необычный макет, который, используя то, чем пользовались до таблиц, создать было нельзя.



Для современного веб-дизайнера совершенно очевидно то, что макеты страниц, основанные на таблицах, кроют в себе массу неприятностей. Одна из них, очень серьёзная, связана с доступностью материалов. Применение элементов <table>, <th>, <tr> и <td> не способствует созданию доступных страниц. Особенно — в случаях, когда с их помощью создают сложных структуры из глубоко вложенных друг в друга таблиц. Средства для чтения текстов с экрана, которые, помимо их прямого предназначения, обычно используют как инструмент для оценки доступности контента, испытывают сложности с формированием связного текста на основе материалов, оформленных в виде таблиц. Это не говорит о том, что таблицы — это плохо. Речь идёт лишь о том, что они не предназначены для создания макетов.
Читать дальше →

RubyGems Digest 2020·10

Время на прочтение5 мин
Охват и читатели2.3K
Большая подборка информации о библиотеках языка Ruby за октябрь 2020 года. Новости, включая русскоязычные источники. А также полезные мнения и опыт разработки.


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

20 небольших, но вдохновляющих вызовов веб-разработчику

Время на прочтение7 мин
Охват и читатели22K
Специально к старту нового потока курса «Frontend-разработчик» делимся переводом подборки с 20 проектами для освоения фронтенда. Эта подборка хорошо подходит, если вы хорошо знакомы с какой-то областью разработки ПО и хотите глубже копнуть во фронтенд. Также она прекрасно подходит людям, которые не хотят начинать знакомство с фронтендом со стандартных проектов. Проекты довольно небольшие, и у каждого указан уровень сложности. С помощью этих проектов вы ознакомитесь с Tone.js — обёрткой над Web Audio, освоите необычно мягкую смену темы со светлой на темную, и наоборот, а почти в конце ждёт самое вкусное — управляемая голосом векторная графика SVG.


Приятного чтения!

Как мы создавали первый онлайн-сервис Автокредит

Время на прочтение6 мин
Охват и читатели6.9K
В начале 2018 года на рынке кредитования наметился тренд по активному созданию банками онлайн-решений для клиентов. Появились онлайн-сервисы, облегчающие процесс получения кредитов в таких сегментах, как потребительские товары и ипотека. А вот онлайн-решения для автокредитования еще не было.

Поскольку Русфинанс Банк специализируется на автокредитовании, необходимо было как можно скорее разработать digital-стратегию и запустить удобный сервис, позволяющий клиенту подавать заявку и получать одобрение по кредиту, не выходя из дома.

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

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


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

Сравнение скорости генераторов статических сайтов

Время на прочтение10 мин
Охват и читатели7.6K
Существует огромное количество генераторов статических сайтов (Static Site Generator, SSG). Очень сложно принять решение о том, какой именно выбрать. Существует множество полезных статей, которые могут помочь сориентироваться в (популярных) SSG. Правда, чтение подобных материалов не упростит, неким волшебным образом, принятие вышеозначенного решения.

Я решил помочь тем, кто занят выбором SSG. Мой коллега составил список вопросов, призванный упростить подбор генератора статических сайтов. К этому списку прилагается сводка по популярным SSG. Там не хватает лишь оценки того, как разные SSG показывают себя в деле.



Все SSG объединяет то, как именно организована схема их работы. А именно, они принимают некие данные на вход и пропускают эти данные через шаблонизатор. На выходе оказываются HTML-файлы. Обычно этот процесс называют сборкой проекта (build).

Для того чтобы получить сравнимые данные о производительности различных SSG, нужно учесть множество нюансов. Нужно обратить внимание на особенности проектов, на факторы, замедляющие или ускоряющие сборку. Отсюда и начинается наше исследование производительности популярных SSG.

При этом наша цель — не просто найти самый быстрый SSG. Репутация «самого быстрого» уже закрепилась за Hugo. Я имею в виду то, что на сайте проекта сказано, что Hugo — это самый быстрый в мире фреймворк для создания сайтов. А значит — так оно и есть.

В этом материале приведено сравнение производительности популярных SSG. А именно, речь идёт о времени сборки проектов. Но самое важное здесь — это глубокий анализ того, почему те или иные инструменты показывают определённые результаты. Ошибкой будет, не обращая внимания ни на что, кроме времени сборки проектов, выбрать «самый быстрый SSG» или сразу отказаться от «самого медленного». Давайте поговорим о том, почему это так.
Читать дальше →

Фаззинг тестирование веб-интерфейса. Расшифровка доклада

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


В начале этого года Тензор проводил митап в городе Иваново, на котором я выступил с докладом про эксперименты с фаззинг-тестированием интерфейса. Тут расшифровка этого доклада.

Когда обезьяны заменят всех QA? Можно ли отказаться от ручного тестирования и UI автотестов, заменив их фаззингом? Как будет выглядеть полная диаграмма состояний и переходов для простого TODO приложения? Пример реализации и о том, как работает такой фаззинг далее под катом.
Читать дальше →

Новый сайт для популярного медиа за 2 месяца

Время на прочтение8 мин
Охват и читатели7.9K
Давным-давно в далекой-далекой галактике появился проект The Bell, построенный на WordPress. Постепенно проект рос и развивался, добавлялись всевозможные галочки и тоглеры, накручивались фичи. Технический долг копился и тащил The Bell на тёмную сторону, а новые хотелки уже выходили за рамки возможностей CMS и превращали проект в колесо с костыликами вместо спиц. И тут редакция задумала обновить сайт и сделать редизайн новостной ленты.

«Что в этом сложного?» — видимо, подумали люди, не очень знакомые с техническими тонкостями, и обратились к нам за разработкой. Для нас же это поначалу напоминало анекдот: есть статичный макет, который совершенно неизвестно как должен меняться в зависимости от разных условий, и заказчик, который хочет увидеть новый сайт в работе меньше, чем через два месяца.

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


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

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

Пример практического использования модулей

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


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

ES6-модули, использующие синтаксис «import/export», являются довольно мощным инструментом и достойным конкурентом компонентам популярных фреймворков.

Позвольте мне продемонстрировать это на примере рисования различных фигур на холсте.

Источник вдохновения — этот раздел руководства по JavaScript от MDN.

Вот какой функционал будет реализован в нашем небольшом приложении:

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

В процессе создания приложения мы уделим особое внимание дефолтному и именованному экспорту/импорту, а также статическому и динамическому импорту. Большая часть приложения будет написана с использованием синтаксиса классов.
Читать дальше →

Производительность приложений, работающих с Video и Audio

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


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


  1. Как работать с Video и Audio с максимальной точностью.
  2. Как оптимально обрабатывать данные с такой скоростью.
  3. Как оптимально обрабатывать данные, приходящие по websocket.

Перед рассмотрением каждого вопроса, хочу дать немного контекста.

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

Автоматическое обновление скриптов после деплоя

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

Пролог



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


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


Конечно, все решается нажатием на F5, но в данной статье я покажу, как можно автоматизировать это действие, избавить пользователя от головной боли и сделать это красиво.


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

Как анимировать элемент «details» с помощью WAAPI

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


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

В данной статье я покажу, как можно анимировать нативный элемент «details» с помощью Web Animations API.

Графики в Vuejs

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


Я доволен экосистемой Vue. Как и положено, ты не городишь велосипеды, а пользуешься готовыми плагинами, которые за тебя написали умные дядьки. Когда твоя задача слишком мелкая и локальная, чтобы под неё написали плагин — ты идёшь и ищешь готовые компоненты, и только если не находишь ничего подходящего, чешешь репу и садишься писать своё решение. Таков порядок вещей, и я изрядно удивился, когда за вечер тестов не смог нормально отобразить ни одного подходящего мне графика. Пришлось немного подумать и переписать все примеры с Chart.js, чтобы разобраться с графиками раз и навсегда. Результаты ниже.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №440 (2 — 8 ноября 2020)

Время на прочтение3 мин
Охват и читатели8.5K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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