• Пишем мессенджер на Vue в облаке Amazon

    Разберем как использовать облачный сервис Amazon для создания мессенджера Chatty многопользовательского чат-приложения в реальном времени с одной комнатой с помощью фреймворка Vue и AWS Amplify. Настроим регистрацию пользователей и хранение данных.

    Читать далее
    • +15
    • 8,6k
    • 2
  • CSS: о выводе коротких и длинных текстов

    • Перевод
    Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко понимает то, как обрабатывать различные тексты, выводимые на странице, если он соответствующим образом спроектировал макет, это способно избавить его от множества неприятных неожиданностей.



    Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.
    Читать дальше →
    • +30
    • 8,6k
    • 6
  • Разработка сервера для многопользовательской игры с помощью nodejs и magx

    Многие разработчики начинают разработку многопользовательского онлайн сервера на основе библиотеки socket.io. Эта библиотека позволяет очень просто реализовать обмен данными между клиентом и сервером в реальном времени, но продумать и реализовать всю логику и интерфейс взаимодействия сервера с клиентами, а также архитектуру масштабирования и оптимизацию трафика все равно придется.


    Я хочу рассказать про библиотеку magx, используя которую можно не задумываться о сетевой составляющей (коммуникации сервера и клиентов), a сразу сконцентрироваться на разработке логики игры и клиентского UI.

    Читать дальше →
  • Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году

    • Перевод
    Профессия «фронтенд-разработчик», без сомнения, будет одной из самых востребованных в 2021 году.

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

    В последние несколько лет мир увидел замечательные новые библиотеки и фреймворки, основанные на JavaScript и составляющие сегодня основу практически любого веб-проекта. Это, например, React, Vue, Svelte.



    В этом материале я хочу дать всем желающим советы о том, на освоение чего нужно обратить внимание уже сегодня для того чтобы достойно встретить 2021 год. Эта статья рассчитана на широкий круг веб-разработчиков — от тех, кто только начинает свой профессиональный путь, до тех, кто уже кое-что умеет.
    Читать дальше →
  • Забыли Total.js?



    Эта публикация для ознакомительных целей, так как хочется поддержать фреймворк, который по моему мнению недооценен в СНГ и нуждается во внимании. Первое что я пытался выяснить насколько он производителен по сравнению с основными конкурентами koa.js, express.js и т.п. Прочитав некоторые статьи и форумы стало выясняться, что total быстрее и это трудно отрицать сделав подобные тесты.



    image

    Total.js стал целой платформой к тому же бесплатной и теперь воспользовавшись этими инструментами запустить своё приложение станет ещё проще и быстрее.

    Расскажу о основном стеке, которым и сам пользуюсь.
    Читать дальше →
  • Отслеживаем ресайзинг элемента без setTimeout и фреймов

    image
    Наверно каждый WEB-разработчик когда-либо сталкивался с проблемой отслеживания события resize на странице. И если для window это сделать сможет любой новичок, то для остальных элементов эта задача принесет немало головной боли. Если вы относитесь к этой категории людей, то добро пожаловать под кат.
    Читать дальше →
    • +23
    • 11,7k
    • 9
  • 5 библиотек для Vue.js, без которых мне не обойтись

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



    Хотя со мной такое случалось довольно часто, у меня, всё же, есть небольшой список любимых библиотек, которые я использовал во множестве проектов, и которые за долгое время доказали свою крайнюю полезность. Я испытал множество подходов к решению тех задач, которые решают эти библиотеки. На мой выбор повлияло удобство работы с библиотекой, разнообразие её возможностей, хороший внешний вид того, что получается при её применении. В итоге у меня и появился тот список, которым я хочу с вами поделиться.
    Читать дальше →
  • Создание кастомного плагина для October CMS

    • Перевод
    Мы продолжаем рассматривать October CMS и её особенности. Мы в LOVATA уже 6 лет работаем с этой системой и за это время убедились в том, что её растущая популярность абсолютно заслуженная.

    Сегодня мы подготовили перевод еще одной статьи, на этот раз авторства Andriy Haydash. Данная статья посвящена созданию кастомной функциональности через плагины. Предыдущую статью, посвященную сравнению October CMS и WordPress, вы можете найти здесь.


    Читать дальше →
  • Детальное сравнение WordPress и October CMS

    • Перевод
    Меня зовут Павел Ловцевич, я сооснователь и CTO веб-студии LOVATA. Одной из основных платформ, на которой мы разрабатываем проекты для наших заказчиков, является October CMS, с которой мы работаем уже почти 6 лет.

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

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


    Читать дальше →
  • Тернистый путь к продажам на Themeforest.net — Часть 1

      Наверняка многие задумываются над тем, чтобы попробовать продавать свои шаблоны на известном маркетплейсе Envato.com, а некоторые уже успешно этим занимаются. В данной статье я хочу поделиться своим опытом разработки и продажи шаблонов на Themeforest.net



      Информации в сети о заветном маркетплейсе Envato.com достаточно много, но детально расписанный процесс подготовки проектов попадается очень редко. Я сам не раз обращался к успешным авторам, продающим на Themeforest.net, за советом и помощью. Благо есть люди готовые помочь безвозмездно. Я надеюсь, моя статья также будет полезна начинающим авторам или тем, кто собирается стать автором. Ну или, по крайней мере, прольет немного света на темопроизводство.




      Как все начиналось


      Как я рассказывал в своих предыдущих публикациях, уже несколько лет моя небольшая студия занимается диджитал продакшеном: разработкой web сайтов и мобильных приложений. А разработкой шаблонов мы занялись по рекомендации моего товарища. Однажды он сказал, что это отличный дополнительный заработок для небольшой студии, и, мол, усилий требуется совсем немного для этого. Идея иметь дополнительный заработок, используя ресурс студии, который не загружен по текущим проектам, мне понравилась. Но тогда я еще даже не представлял какое количество времени мы потратим до того момента, как в продаже на Themeforest.net появится наш первый шаблон. Нам для старта продаж понадобилось более полутора лет. Однако, это случай частный и не стоит на него ориентироваться. Я знаю примеры и более стремительного успеха. Но хочу более детально рассказать, почему мы так долго к этому шли и с какими трудностями столкнулись в процессе.

      Читать дальше
    • Пишем плагин для October CMS

      На Хабре уже была публикация о выходе бета-версии OctoberCMS, на этом все закончилось. Русскоязычных материалов по этой CMS мало, поэтому я решил внести свой вклад.

      Сегодня мы с вами напишем плагин каталога для сайта.

      Подробнее о том, что эта CMS из себя представляет можно прочитать на официальном сайте. Скажу лишь, что CMS основана на фреймворке Laravel, поэтому у нас есть инструменты для командной строки artisan, Eloquent ORM, миграции, что значительно упрощает разработку.
      Читать дальше →
    • Почему налоговая не верит в айтишников-индивидуальных предпринимателей?

      Сколько может зарабатывать айтишник на ИП? У ФНС свое мнение


      Когда один человек много зарабатывает и честно платит налоги, налоговики смотрят со стороны и думают: «Как такое возможно? Наверняка у него масса помощников! Пусть и за них налоги заплатит!»

      Рассказываем, как при наличии электронной подписи в пару кликов забыть о подобных притязаниях налоговой.
      Читать дальше →
    • The Clean Architecture на TypeScript и React. Часть 1: Основы



        Добрый день, уважаемые читатели. В этой статье мы поговорим об архитектуре программного обеспечения в веб-разработке. Довольно долгое время я и мои коллеги используем вариацию The Clean Architecture для построения архитектуры в своих проектах Frontend проектах. Изначально я взял ее на вооружение с переходом на TypeScript, так как не нашел других подходящих общепринятых архитектурных подходов в мире разработки на React (а пришел я из Android-разработки, где давным-давно, еще до Kotlin, наделала шумихи статья от Fernando Cejas, на которую я до сих пор иногда ссылаюсь).

        В данной статье я хочу рассказать вам о нашем опыте применения The Clean Architecture в React-приложениях с использованием TypeScript. Зачем я это рассказываю? — Иногда мне приходится разъяснять и обосновывать ее использование разработчикам, которые еще не знакомы с таким подходом. Поэтому здесь я сделаю детальный разбор с наглядными пояснениями на которое я смогу ссылаться в будущем.
        Читать дальше →
      • Создаем 2D платформер при помощи Unreal Engine 4. Часть 1 — Игровой персонаж, движение

        Не так давно компания Epic Games сделала невероятно щедрый подарок всем желающим — движок UE4 с исходным кодом всего за $20/мес, считай даром! Воспользуемся их щедростью и великодушием и попробуем создать что-нибудь не очень сложное, но, по крайней мере, более-менее играбельное — 2D платформер.
        Под катом множество картинок...
      • TARS, сделай уровень frontend-рутины 0%

          image

          Frontend с каждым днём становится сложнее. Задачи — объёмнее, пользовательский интерфейс — насыщеннее, HTML, CSS и Javascript — огромнее, а сон фронтендера — короче и беспокойнее. Необходимо грамотно структурировать код, выполнять множество рутинных задач (компиляция css- и js-препроцессоров, сборка спрайтов, подготовка и оптимизация изображений, минификация файлов и др). Если вы работаете в команде — это автоматически увеличивает сложность разработки. Чтобы решить эти проблемы, я создал TARS — сборщик html-вёрстки, основанный на gulpjs.
          Уменьшить рутину
        • Отправляем магические ссылки с помощью Node.js

          • Перевод
          Перевод статьи подготовлен в преддверии старта курса «Разработчик Node.js».




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

          1. Пользователь посещает приложение, где есть форма для ввода адреса электронной почты;
          2. Пользователь вводит адрес электронной почты и нажимает кнопку подтверждения;
          3. Магическая ссылка для входа в систему отправляется на электронную почту пользователя;
          4. Пользователь нажимает на ссылку и его перенаправляют в приложение, где он уже вошел в систему.

          После этого магическая ссылка более недействительна.

          Ниже мы рассмотрим некоторые основные моменты реализации беспарольной авторизации на Node.js.
          Читать дальше →
        • 5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика

          • Перевод
          Автор статьи, перевод которой мы сегодня публикуем, говорит, что один из способов разумной организации труда разработчика заключается в использовании инструментов, позволяющих достигать большего, прикладывая меньше усилий. Здесь он хочет рассказать о 5 замечательных инструментах, которые позволят любому разработчику повысить производительность своего труда. Вот видео, в котором сделан обзор этих инструментов.


          Читать дальше →
        • 5 JavaScript-библиотек для работы со строками

          • Перевод
          Работа со строками может оказаться непростым делом из-за того, что она подразумевает решение множества разноплановых задач. Например, для простого приведения строки к «верблюжьему» стилю понадобится несколько строк кода:

          function camelize(str) {
            return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
              if (+match === 0) re
          turn ""; // или if (/\s+/.test(match)) для пробелов
              return index === 0 ? match.toLowerCase() : match.toUpperCase();
            });
          }
          

          Этот фрагмент кода, кстати, в роли ответа на вопрос о приведении строк к «верблюжьему» стилю, собрал больше всего голосов на Stack Overflow. Но даже он не в состоянии правильно обработать, например, такую строку:

          ---Foo---bAr---
          


          Результат обработки строки ---Foo---bAr---

          А как быть, если такие строки, всё же, нужно обрабатывать? Можно подправить этот пример, а можно прибегнуть к помощи специализированных библиотек. Они упрощают реализацию сложных алгоритмов и, кроме того, дают программисту инструменты, обладающие куда большей гибкостью и универсальностью, чем, скажем, вышеприведённый пример. Это вполне может означать, что для решения некоей непростой задачи понадобится вызвать всего один метод.

          Поговорим о нескольких JavaScript-библиотеках, предназначенных для работы со строками.
          Читать дальше →
          • +39
          • 7,2k
          • 9
        • 23 непростых вопроса для JavaScript-собеседования

          • Перевод
          Хотите подготовиться к собеседованию по JavaScript и ищете вопросы, на которых можно попрактиковаться? Если так — считайте, что ваши поиски окончены. Автор материала, перевод которого мы сегодня публикуем, говорит, что собрал более двух десятков вопросов по JavaScript, предназначенных для тех, кто хочет превратиться из джуниора в сеньора, для тех, кто стремится успешно пройти собеседование в сфере фронтенд-разработки и получить интересное предложение от работодателя.


          Читать дальше →
        • Способы синхронизации вкладок браузера



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

            Ниже опишу различные способы решения подобных задач.
            Читать дальше →