Привет, меня зовут Артём и я Frontend Team Lead в Surf. Я очень люблю две вещи: геймификацию и графики. Сейчас я работаю с людьми больше, чем с кодом, поэтому читаю много тематических статей. Вот так, тихим вечером, в одной из них я натолкнулся на идею объединения Moving Motivators и лепестковой диаграммы.
Разработка веб-сайтов *
Делаем веб лучше
Новости
Joomla-дайджест. 1-е полугодие 2023 года
Все главные новости из мира Joomla с момента выхода предыдущего дайджеста 24 января 2023 года в одной статье. Традиционно наш дайджест обозревает новости, расширения, шаблоны и статьи из мира Joomla. Прошлый выпуск вы можете прочитать здесь.
Joomla 4 и Joomla 5. Релизы безопасности, новости 45 популярных расширений, 16 статей и видео-подборок как для начинающих, так и для профессиональных разработчиков. Конференции и жизнь Joomla-сообщества.
От идеи к развертыванию: искусство современной разработки программного обеспечения
Только мировые Best-Practice's. Примеры.
Делюсь опытом о процессе разработки программного обеспечения используя Agile, начиная со сбора требований и заканчивая развертыванием.
Без бумажки ты…или истории наших факапов с заказчиками при разработке сайтов
Поднимите руки те, кто никогда в жизни не косячил. Лес рук. Вот именно. Каждый из нас хоть раз делал что-то не так, в том числе и мы с агентством: неправильный договор, работа с доисторической книгой, неучтенки…и это лишь малая часть. А потому мы не стесняемся об этом открыто говорить. Подробнее о каждом факапе ‒ внутри.
Истории
Как мы внедряли пуш-уведомления в мессенджер — от базовой отправки до проработки условий
С точки зрения пользователя уведомления — это «всплывашка» или обновление счетчика новых сообщений в окне чата. Для нашей команды — логическая головоломка, которую предстояло решить.
Как предпроектная аналитика помогает не загубить проект
Привет. На связи Александр Комбаров — исполнительный директор Pyrobyte. Сегодня расскажу, как не слить проектные деньги в унитаз.
Бывает так, что подрядчик не проводит аналитику — и получается красивый и приятный продукт в целом, но нерелевантный и непонятный своей аудитории. Рассказываем, как этого избежать.
Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров
После подробного изучения темы скелетонов, я решил создать очень простое, гибкое, переиспользуемое, настраиваемое и легкое решение, которое подойдет для большинства случаев использования. В этой статье я опишу процесс создания этого решения и превращения его в библиотеку, а также трудности, с которыми я столкнулся при работе над ним.
Swipe sidebar — отдельный Typescript сервис и обработка touch событий на Vue
Приветствую, друзья технологии!
Сегодня в мире постоянно меняющихся технологий и уникальных разработок смартфонов, планшетов и других устройств, оказаться "в тренде" - это как настоящее искусство. Каждый из нас хочет использовать устройства, которые позволяют нам легко и интуитивно взаимодействовать с миром цифровых возможностей. Одной из фантастических новинок, которая взрывает сознание пользователей и разработчиков, является свайп-сайдбар – это гениальное решение для эффективной навигации и управления контентом!
Вам, наверняка, приходилось сталкиваться с ситуацией, когда приложение или веб-сайт предлагают свернутый сайдбар, который появляется с одного края экрана после легкого свайпа пальцем. Это действительно захватывающий опыт, который добавляет удобство и стиль в нашу повседневную жизнь.
В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов!
Конфигурируемая типизация NPM пакетов. Типизация может быть строже, чем вы думаете
В этой статье я бы хотел показать, как можно создавать NPM пакеты так, чтобы пользователь вашей библиотеки мог конфигурировать типизацию вашего пакета. А так же я опишу, зачем и кому это может быть интересно.
25000 лучших фильмов, или еще один сервис для кино поиска
В прошлой статье я описывал, как безуспешно пытался применить алгоритмы коллаборативной фильтрации для практически ценной рекомендации фильмов. Однако в процессе экспериментов обнаружилось, что простое усреднение оценок фильма пользователями сервиса (рейтинг IMDB, Кинопоиска и т.д.) является очень неплохим предсказателем оценки фильма новым зрителем, что было продемонстрировано математически. Это, в частности, объясняет, почему все знают рейтинг Кинопоиска, а о рекомендациях Кинопоиска никто не слышал, хотя такой сервис у них есть.
Как вырасти из джуна в мидлы во фронтенде
Количество фреймворков и технологий пугает, кажется, что нужно учиться сразу всему. А рассказы про невероятные, практически демонические алгоритмические задачи на собеседованиях добавляют фрустрации. Но если чётко видеть цель, то пройти путь легче.
Меня зовут Лёша Руденко, во фронтенде уже более семи лет, сейчас работаю в финтехе. А ещё я ментор на курсе «Мидл фронтенд-разработчик» в Яндекс Практикуме. Как наставник я помогаю студентам совершить карьерный переход из джуниор-разработчика в мидлы. Точнее так: моя задача в том, чтобы начинающий разработчик не утонул в огромном количестве советов, рекомендаций, статей и видео и сам пришёл к заветной цели.
В этой статье поделюсь тем, что я понимаю под «мидл фронтенд-разработчиком», и покажу путь развития в профессии.
Шпаргалка по структурам данных в Java
К каждому собеседованию важно готовиться и проще всего это делать, когда перед глазами есть готовый материал. В данной публикации я хочу поделиться с вами своей шпаргалкой, которую использую перед собеседованиями для повторения структур данных в Java.
Разбираем HTTP/2 по байтам
Откройте любую статью с обзором HTTP/1.1. Скорее всего, там найдётся хотя бы один пример запроса и ответа, допустим, такие:
GET / HTTP/1.1
Host: localhost
HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Content-Length: 38
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<h1>Привет!</h1>
Теперь откройте статью с обзором HTTP/2 или HTTP/3. Вы узнаете о мультиплексировании запросов, о сжатии заголовков, о поддержке push-технологий, но вряд ли увидите хоть одно конкретное сообщение. Ясно, почему так: HTTP/1.1 — текстовый протокол, тогда как сиквелы к нему бинарные. Это очевидное изменение открывает дорогу ко множеству оптимизаций, но упраздняет возможность просто и доступно записать сообщения.
Поэтому в этой статье предлагаю покопаться в кишках у HTTP/2: разобрать алгоритмы установки соединения, формат кадров, примеры взаимодействия клиента с сервером.
Как автоматизировать переводы во Frontend приложении
В текущем мире очень многие сайты имеют поддержку многих языков, в большинстве случаев это происходит с помощью i18n npm пакета. Чаще всего переводы хранятся в .js, .json файлах и очень часто есть языки для которых в компании нет переводчика, либо же он не предполагался в целом, и в таком случае приходит на помощь разработчик с переводчиком. И вот однажды я столкнулся с тем, что на проекте оказалось очень много текстов и все их нужно было переводить вручную, что занимало достаточно много времени и я задумался о том, как это можно автоматизировать.
Моя идея была в том, чтобы написать функцию, в которую можно было бы передать языковой код и json объект с текстом на исходном языке, а на выходе получить переведенный json/js file. С помощью этой функции я мог бы в ci/cd Pipeline переводить все текста на проекте, в исходных текстах которых были изменения, либо же следить за текстами в рантайме и на лету переводить текста.
И я нашел два относительно простых и бесплатных метода, для того чтобы это сделать.
Делай так, и твой адаптив болеть не будет
Сегодня обсудим адаптив - довольно важную тему в мире Frontend-разработки. Ведь как бы ни было хорошо оптимизировано приложение, чудесно написана серверная часть, и какой разнообразный и прекрасный внутренний мир не таило бы оно в себе, а первое, с чем столкнется пользователь, это внешний вид.
Даже до первого клика по кнопке, до первого скролла или любого другого действия на странице пользователь увидит обложку, дизайн этой страницы. Если говорить об экране компьютера или ноутбука, то сделать что-то не так со страницей сложно: нет никаких ограничений, пространства на странице очень много, чтобы сделать и красиво, и удобно. Однако думать только о пользователях, предпочитающих десктопные решения во всех их проявлениях — значит лишать себя большей части аудитории.
ChatGPT уже не тот? Тестируем 10 плагинов для чтения URL и грустим
Пользователи новой социальной сети Х говорят, что ChatGPT в последнее время сошёлся с инженером-химиком чудовщино поглупел, теряет пользователей и больше никому не нужен. Это правда так?
Мы во фронтендерском подкасте «Про код» тоже случайно затронули этот вопрос, но в необычном ключе. Обсуждали пользу alt-текстов для SEO и между делом вспомнили про плагины, с помощью которых ChatGPT умеет читать веб-страницы, а не только постоянно вспоминать свой 2021 и жаловаться.
Идея простая — если нейросети всерьёз пытаются заменить поисковики, то и искать они должны по всему, а не только по тому, что видно глазами. Ведь иногда то, что нарисовано на картинке, не описывается в тексте.
Так что мы решили провести простой тест — скормить нейросети специально сконструированную страницу с alt-текстом и посмотреть, что будет. А так как у ChatGPT вышла масса плагинов для чтения сайтов, то заодно и их протестировать. Спойлер: всё хуже, можно было предположить, но лучик надежды брезжит.
Чем отличается реализация non-keyed от keyed в javascript фреймворках?
Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.
Холодная и горячая последовательность RxJS
Доброго времени суток, дорогие читатели!
В данной статье я буду рассказывать про холодную и горячую последовательность на примере такой задачи:
Пользователь заходит на сайт и начинается внутренняя прослушка (какой либо запрос на сервер с получением данных, в нашем же случае будет обычный sleepAsync - функция с таймаутом и остается только его подхватить и обработать). Режимов прослушки два - оптимизированный (будем называть горячим) и константный (будем называть холодным). При условии активности пользователя на вкладке, включаем оптимизированный метод, если же пользователь покинул вкладку, включаем константный. Также нужно показывать количество времени, которое занимала прослушка.
Как работает Zustand
Hello world!
Zustand (читается как "цуштанд", что переводится с немецкого как "состояние") — это, на мой взгляд, один из лучших на сегодняшний день инструментов для управления состоянием приложений, написанных на React.
В этой статье я немного расскажу о том, как он работает.
Давайте начнем с примера использования zustand
для реализации функционала отображения/скрытия модального окна.
Прекратите превращать программирование в религию (восклицательный знак)
Как вы меня задолбали, священники, святые отцы и монахи с кадилами. Сколько можно это терпеть? Я учился в университете, чтобы получить диплом по специальности, но вместо этого я получил пропуск в какую-то конспирологическую теоретическую секту.
Не верите?