Pull to refresh
0
0
Igor Ermakov @iexx

Программист

Send message

CSS: работа с текстом на изображениях

Reading time7 min
Views22K

Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам. Написать эту статью меня вдохновил твит от Эдди Османи, работающего над Google Chrome.

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

Приятного чтения
Total votes 6: ↑6 and ↓0+6
Comments1

Проектирование архитектуры хранилища Vuex для больших приложений на Vue.js

Reading time7 min
Views7.5K
Перевод статьи подготовлен в преддверии старта курса «Vue.js-разработчик».




В основе масштабного приложения на Vue.js лежит хранилище, в котором находятся все данные. Хранилище Vuex в приложении на Vue.js служит единым источником истины, который обеспечивает отличную производительность и реактивность из коробки. По мере того, как обрастает кодом ваше приложение, количество данных в хранилище Vuex также растет, и управлять ими становится труднее. Проектирование управления состоянием вашего приложения на основе лучших практик поможет решить большинство проблем, которые появляются по мере усложнения приложения.

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

  1. Структурирование хранилища
  2. Разделение хранилища на модули
  3. Автоматический импорт модулей хранилища
  4. Сброс состояния модуля
  5. Глобальный сброс состояния модуля
Читать дальше →
Total votes 3: ↑3 and ↓0+3
Comments2

Vue для самых маленьких a.k.a небольшой блог по всем канонам

Reading time15 min
Views27K


Всем привет! В данной статье рассмотрим разработку фронта простенького блога на Vue с использованием всех прелестей Vue включая Vuex и Router. А также поговорим про структуру приложения и работу с контейнером и роутером.
Читать дальше →
Total votes 10: ↑9 and ↓1+8
Comments29

Учебный курс по React, часть 4: родительские и дочерние компоненты

Reading time8 min
Views25K
Публикуем очередную часть перевода учебного курса по React. Нашей сегодняшней темой будут взаимоотношения родительских и дочерних компонентов.

image

Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
Часть 2: функциональные компоненты
Часть 3: файлы компонентов, структура проектов
Часть 4: родительские и дочерние компоненты
Часть 5: начало работы над TODO-приложением, основы стилизации
Часть 6: о некоторых особенностях курса, JSX и JavaScript
Часть 7: встроенные стили
Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
Часть 9: свойства компонентов
Часть 10: практикум по работе со свойствами компонентов и стилизации
Часть 11: динамическое формирование разметки и метод массивов map
Часть 12: практикум, третий этап работы над TODO-приложением
Часть 13: компоненты, основанные на классах
Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
Часть 15: практикумы по работе с состоянием компонентов
Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
Часть 18: шестой этап работы над TODO-приложением
Часть 19: методы жизненного цикла компонентов
Часть 20: первое занятие по условному рендерингу
Часть 21: второе занятие и практикум по условному рендерингу
Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
Часть 23: первое занятие по работе с формами
Часть 24: второе занятие по работе с формами
Часть 25: практикум по работе с формами
Часть 26: архитектура приложений, паттерн Container/Component
Часть 27: курсовой проект
Читать дальше →
Total votes 33: ↑31 and ↓2+29
Comments2

Fastify.js — не только самый быстрый веб-фреймворк для node.js

Reading time8 min
Views34K
Последние 10 лет среди веб-фреймворков для node.js самой большой популярностью пользуется Express.js. Всем, кто с ним работал, известно, что сложные приложения на Express.js бывает сложно структурировать. Но, как говорится, привычка — вторая натура. От Express.js бывает сложно отказаться. Как, например, сложно бросить курить. Кажется, что нам непременно нужна эта бесконечная цепь middleware, и если у нас забрать возможность создавать их по любому поводу и без повода — проект остановится.

Отрадно, что сейчас, наконец, появился достойный претендент на место главного веб-фреймворка всех и вся — я имею в виду не Fastify.js, а, конечно же, Nest.js. Хотя по количественным показателям популярности, до Express.js ему очень и очень далеко.

Таблица. Показатели популярности пакетов по данным npmjs.org, github.com
Пакет Количество загрузок Количество «звезд»
1 connect 4 373 963 9 100
2 express 16 492 569 52 900
3 koa 844 877 31 100
4 nestjs 624 603 36 700
5 hapi 389 530 13 200
6 fastify 216 240 18 600
7 restify 93 665 10 100
8 polka 71 394 4 700
9 loopback 28 501 13 300
10 Adonis.js 3 825 10 100


Express.js по-прежнему работает в более чем в 2/3 веб-приложений для node.js. Более того, 2/3 наиболее популярных веб-фреймворков для node.js используют подходы Express.js. (Точнее было бы сказать, подходы библиотеки Connect.js, на которой до версии 4 базировался Express.js).

В предлагаемом сообщении обсуждаются особенности основных веб-фреймворков для node.js, и что делает Fastify.js фреймворком другого уровня, что позволяет выбрать его как фреймворк для разработки Вашего следующего проекта.
Читать дальше →
Total votes 21: ↑21 and ↓0+21
Comments32

Практика по Котлину: Создание веб приложений на React и Kotlin/JS

Reading time38 min
Views24K

От переводчика.


Привет! Про Kotlin есть стереотип, будто бы это язык для разработки только под Android. На самом деле, это совсем не так: язык официально поддерживает несколько платформ (JVM, JS, Native), а также умеет работать с библиотеками для этих платформ, написанных на других языках. Такая поддержка "мультиплатформенности" позволяет не только писать всевозможные проекты на одном языке в единой форме, но и переиспользовать код при написании одного проекта под разные платформы.


В этой статье я перевожу официальный туториал Kotlin Hands-On о создании веб сайтов на Котлине. Мы рассмотрим многие аспекты программирования на Kotlin/JS и поймем, как работать не только с чистым DOM. В основном будем говорить о React JS, но также коснемся системы сборки Gradle, использования зависимостей из NPM, обращения к REST API, деплоя на Heroku, и в итоге сделаем приложение-видеоплеер.


Текст ориентирован на тех, кто немного знает Котлин и не знает или почти не знает Реакт. Если вы более опытны по этим вопросам, то части туториала могут показаться вам чрезмерно разжеванными.


kotlin-react

Читать дальше →
Total votes 8: ↑7 and ↓1+6
Comments7

[ В закладки ] CSS: использование внутренних и внешних отступов

Reading time18 min
Views85K
Если несколько элементов веб-страницы расположены близко друг к другу, то у пользователей возникает такое ощущение, что у этих элементов есть что-то общее. Группировка элементов помогает пользователю понять их взаимосвязь благодаря оценке расстояния между ними. Если бы все элементы были бы расположены на одинаковом расстоянии друг от друга, пользователю сложно было бы, просматривая страницу, узнать о том, какие из них связаны друг с другом, а какие — нет.


Эта статья посвящена всему, что нужно знать о настройке расстояний между элементами и о настройке внутренних пространств элементов. В частности, речь пойдёт о том, в каких ситуациях стоит использовать внутренние отступы (padding), а в каких — внешние (margin).
Читать дальше →
Total votes 34: ↑31 and ↓3+28
Comments6

Opium.Fill — стандартизация цветовой схемы глазами программиста

Reading time11 min
Views14K
Синее лицо, из глаз растут грибы

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

В общем, попробую объяснить, как дизайнеры используют цвет в UI и как всё это можно «типизировать», не вгоняя дизайнеров в жёсткие рамки. Приведу примеры реализации на React JS (для разработчика) и в Figma (для дизайнера). Привязки к React и Figma у схемы нет, просто мне в них привычнее.

В схеме нет ничего хитрого и уникального (может, только название). Все идеи висят в воздухе. Можно воспринимать её как мой best practice по работе с цветом в приложениях. Opium.Fill — это общие принципы, совмещённые с любовью давать всему подряд имена.

Систему можно использовать совместно с Material Design.

Статья написана для front-end разработчика и немного для дизайнера.
Читать дальше →
Total votes 16: ↑16 and ↓0+16
Comments10

Уничтожение комаров

Reading time5 min
Views85K
Наступило лето и, пришла комариная пора. Конечно, готовиться к их уничтожению уже поздновато, но лучше поздно, чем никогда.

Вводные.

  1. Комар типичный русский может летать на 100 метров, а отдельные виды летают на запах до 5 километров, что акула. Это значит, что для того, чтоб у вас не было комаров, комаров не должно быть в радиусе 100 метров.
  2. Комар плодится каждые 5 дней. Поэтому, если в сутки уничтожается менее 1/5 популяции комаров, то методы будут бесполезны.
  3. Комарам нужно много воды. Они живут возле заболоченых мест, либо там где вода. На участках они обычно вылетают вечером после жаркого дня, когда выпадает роса — чтоб напиться.

Методики уничтожения комаров


Читать дальше →
Total votes 144: ↑143 and ↓1+142
Comments269

История кондиционирования воздуха. Принцип работы кондиционера

Reading time5 min
Views18K

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

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

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

Читать далее
Total votes 12: ↑12 and ↓0+12
Comments24

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

Reading time11 min
Views12K

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

Читать далее
Total votes 17: ↑16 and ↓1+15
Comments2

Автоматизация ручных действий с GitHub Actions

Reading time10 min
Views16K

GitHub Actions — инструмент для автоматизации рутинных действий вашего пакета на GitHub.

Из личного опыта расскажу, как без опыта и знаний о настройке CI, я научился автоматизировать рутину в своем Open Source проекте всего за день и что на самом деле это действительно не так страшно и сложно, как многие думают.

GitHub предоставляет действительно удобные и рабочие инструменты для этого.

Читать далее
Total votes 19: ↑19 and ↓0+19
Comments4

Best practices для клиент-серверного проекта PoC

Reading time21 min
Views9.9K
image

Типичный клиент-серверный проект PoC (Proof of Concept) для веба состоит из клиента с GUI, сервера c бизнес логикой и API между ними. Также используется база данных, хранящая оперативную информацию и данные пользователей. Во многих случаях необходима связь с внешними системами со своим API.

Когда у меня возникла необходимость в создании проекта PoC, и я начал разбираться в деталях, то оказалось, что порог вхождения в веб-программирование весьма высок. В крупных проектах для каждого компонента есть выделенные специалисты: front-end, back-end разработчики, UX/UI дизайнеры, архитекторы баз данных, специалисты по API и информационной безопасности, системные администраторы. В небольшом PoC надо самому во всем разобраться, выбрать подходящее техническое решение, реализовать и развернуть. Ситуацию ухудшает тот факт, что из обучающих материалов не всегда понятно, почему предлагается сделать именно так, а не иначе, есть ли альтернативы, является ли решение best practice или это частное мнение автора. Поэтому я разработал заготовку под названием «Common Test DB», отвечающую лучшим практикам. Ее можно использовать для начала любого проекта, остается только наполнить функциональным смыслом.

В статье я подробно опишу примененные best practices, расскажу про имеющиеся альтернативы и в конце размещу ссылки на исходники и работающий в сети пример.
Читать дальше →
Total votes 9: ↑8 and ↓1+7
Comments26

Устройство ленивой загрузки в популярных фронтенд-фреймворках

Reading time9 min
Views16K
Snail steampunk by Avi-li

Команда Mail.ru Cloud Solutions перевела статью о том, что означает ленивая загрузка в трех фронтенд-фреймворках: Angular, React и Vue.js. Далее текст от лица автора.

Один из моих любимых терминов на сегодняшний день — «ленивая загрузка». Честно говоря, когда несколько лет назад я его услышал, то улыбнулся. В этой статье рассмотрю, что именно означает этот термин применительно к трем наиболее часто используемым фронтенд-фреймворкам: Angular, React и Vue.js.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments3

Асинхронный PHP и история одного велосипеда

Reading time12 min
Views29K

После выхода PHP7 появилась возможность сравнительно небольшой ценой писать долгоживущие приложения. Для программистов стали доступны такие проекты, как prooph, broadway, tactician, messenger, авторы которых берут на себя решение наиболее частых проблем. Но что если сделать небольшой шаг вперёд, углубившись в вопрос?


Попробуем разобрать судьбу ещё одного велосипеда, который позволяет реализовать Publish/Subscribe приложение.

Читать дальше →
Total votes 36: ↑35 and ↓1+34
Comments44

Чистая Архитектура для веб-приложений

Reading time36 min
Views103K
Хочу поделиться с вами подходом который я уже много лет использую в разработке приложений, в том числе и веб-приложений. Многим разработчикам настольных, серверных и мобильных приложений этот подход хорошо знаком, т.к. является фундаментальным при построении таких приложений, однако в вебе он представлен очень скудно, хотя желающие использовать такой подход однозначно есть. Кроме того на таком подходе написан редактор VS Code.

Чистая Архитектура

В результате применения этого подхода вы отвяжетесь от конкретного фреймворка. Сможете легко переключать библиотеку представления внутри вашего приложения, например React, Preact, Vue, Mithril без переписывания бизнес логики, а в большинстве случаев даже вьюхи. Если у вас есть приложение на Angular 1, вы без проблем сможете перевести его на Angular 2+, React, Svelte, WebComponents или даже свою библиотеку представления. Если у вас есть приложение на Angular 2+, но нету специалистов для него, то вы без проблем сможете перевести приложение на более популярную библиотеку без переписывания бизнес логики. А в итоге вообще забыть про проблему миграции с фремворка на фреймворк. Что же это за магия такая?
Читать дальше →
Total votes 24: ↑20 and ↓4+16
Comments80

10 лучших игр по программированию, которые улучшат ваши навыки

Reading time7 min
Views94K

Вы помните далёкие дни из детства, когда вы, проводили целый день, а иногда даже не ели целый день, чтобы поиграть в игры на Nintendo? (Ах, дни Mario и Contra!!!)

С того времени игры претерпели гигантские преобразования и сфера стала более обширной. Это уже не просто хобби. Сейчас в Интернете доступно множество игр, связанных с программированием, и вы можете использовать их чтобы изучить и отточить свои скилы в увлекательной форме. Более того, эти игры могут помочь вам улучшить навыки решения задач, поскольку вам нужно будет решать задачи различной сложности, а также соревноваться с другими опытными программистами по всему миру. Специально к старту новых потоков курсов Fullstack-разработчик на Python, разработка на C# и разработка на Java, в этой статье мы отобрали несколько таких игр, играя в которые можно параллельно качать и себя самого.

Start game
Total votes 21: ↑18 and ↓3+15
Comments12

Spiral: высокопроизводительный PHP/Go фреймворк

Reading time8 min
Views18K


Привет, Хабр. Меня зовут Антон Титов, CTO компании Spiral Scout. Сегодня я хотел бы рассказать вам про нашего PHP-слона. А точнее про вторую версию опен-сорсного full-stack PHP/Go фреймворка — Spiral.

Spiral — это компонентный full-stack фреймворк, разрабатываемый нашей компанией более одиннадцати лет и обслуживающий под сотню реальных проектов. Программный пакет основан на множестве открытых и собственных библиотек, включая RoadRunner и Cycle ORM.

Фреймворк совместим с большинством PSR рекомендаций, поддерживает MVC и работает в 5-10 раз быстрее Laravel/Symfony.

Если вы никогда не слышали о Spiral и гадаете, что такое PHP/Go фреймворк и куда делась первая версия — добро пожаловать под кат.
Читать дальше →
Total votes 34: ↑33 and ↓1+32
Comments61

JSON API – работаем по спецификации

Reading time23 min
Views160K
В последнее время веб-разработка разделилась. Теперь мы все не full-stack программисты — мы фронтендеры и бэкендеры. А самое сложное в этом, как и везде, это проблема взаимодействия и интеграции.

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

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


Total votes 71: ↑68 and ↓3+65
Comments110

Всё, о чём должен знать разработчик Телеграм-ботов

Reading time15 min
Views601K

Вы вряд ли найдете в интернете что-то про разработку ботов, кроме документаций к библиотекам, историй "как я создал такого-то бота" и туториалов вроде "как создать бота, который будет говорить hello world". При этом многие неочевидные моменты просто нигде не описаны.

Как вообще устроены боты? Как они взаимодействуют с пользователями? Что с их помощью можно реализовать, а что нельзя?

Подробный гайд о том, как работать с ботами — под катом.

Читать далее
Total votes 127: ↑127 and ↓0+127
Comments73

Information

Rating
Does not participate
Location
Гомельская обл., Беларусь
Date of birth
Registered
Activity