Как стать автором
Обновить
2
0

Пользователь

Отправить сообщение

React: лучшие практики

Время на прочтение19 мин
Количество просмотров78K


Разрабатываете на React или просто интересуетесь данной технологией? Тогда добро пожаловать в мой новый проект — Тотальный React.

Введение


Я работаю с React уже 5 лет, однако, когда дело касается структуры приложения или его внешнего вида (дизайна), сложно назвать какие-то универсальные подходы.

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

Данная статья представляет собой своего рода набор правил разработки React-приложений, доказавших свою эффективность для меня и команд, с которыми я работал.

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

Предлагаемые подходы не являются истинной в последней инстанции. Это всего лишь мое мнение. Существует много разных способов решения одной и той же задачи.
Читать дальше →
Всего голосов 10: ↑6 и ↓4+5
Комментарии6

Создаем приложение на Node.JS, Express и Typescript с Jest, Swagger, log4js и Routing-controllers

Время на прочтение7 мин
Количество просмотров57K
Это пошаговая инструкция создания приложение на Node.JS, с использованием typescript и express. Новое приложение создается не часто, отсюда забываются шаги по его созданию. И я решил написать некую шпаргалку, в помощь самому себе и другим разработчикам. Помимо шагов, я так же снял небольшие видео ролики для наглядности. Существуют уже готовые фреймворки для Node.JS, которые уже содержат в себе все необходимые пакеты и можно работать с ними, но это уже другой путь. Идея была в том, чтобы не зависить целиком от какого-то фреймворка и в случае необходимости менять одни пакеты на другие.
Читать дальше →
Всего голосов 4: ↑2 и ↓2+2
Комментарии14

Загрузить и сохранить: алгоритм быстрого и эффективного чтения

Время на прочтение7 мин
Количество просмотров15K

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

Читать далее
Всего голосов 11: ↑8 и ↓3+11
Комментарии21

createRef, setRef, useRef и зачем нужен current в ref

Время на прочтение9 мин
Количество просмотров48K

Привет, Хабр!

В этой статье попробуем разобрать большинство непонятных базовых принципов при взаимодействии с ref. Например чем детально отличается createRef от useRef, зачем в этих объектах отдельное свойство current и многое другое. Одним словом попытаемся открыть много черных ящиков по работе с ref, из-за которых у вас возможно накопились вопросы. (Данная статья, является расшифровкой видео)

Read more
Всего голосов 13: ↑13 и ↓0+13
Комментарии5

Не используйте фикстуры в Cypress и юнит-тесты — используйте фабричные функции

Время на прочтение7 мин
Количество просмотров4K

Юнит-тесты — это здорово… когда они надежно работают! На самом деле, есть старая поговорка, что «плохой тест — это хуже, чем вообще никакой тест». Я могу подтвердить, что недели, проведенные в погоне за случайно «ложным отрицательным» тестом, не эффективны. Вместо этого можно было использовать это время для написания рабочего кода, который поможет пользователю.

Так что поговорим об одной из этих простейших методик написания менее нестабильных тестов: тестирование фабричных данных.

Тестирование фабричных данных
Всего голосов 10: ↑7 и ↓3+5
Комментарии2

Нативная инверсия зависимостей в TypeScript и React

Время на прочтение5 мин
Количество просмотров19K

Когда я задумался о внедрении зависимостей в TypeScript, то первое, что мне посоветовали — inversify. Я посмотрел эту и другие библиотеки, реализующие паттерн Service Locator, и даже сделал свою собственную — typedin.


Но когда я работал над версией typedin 2.0, то в конце концов понял, что вообще никакой библиотеки не нужно. В TypeScript есть все необходимое.


Читать дальше →
Всего голосов 10: ↑8 и ↓2+6
Комментарии32

Строим систему для мониторинга качества frontend-проектов

Время на прочтение7 мин
Количество просмотров9.6K

Всем привет! Продолжим цикл историй про то, чем занимается Web Core команда в компании ДомКлик. В предыдущей статье мы рассказывали как мы создаем дизайн-систему. В этой статье хотелось бы поделиться историей разработки системы мониторинга качества front-end проектов - Front Radar. У нас в компании большое число проектов, которые создаются большим кол-вом команд и в связи с этим появилась потребность - проверять актуальность проектов и выявлять проблемные места, которые негативно влияют на клиентский опыт.

Читать далее
Всего голосов 25: ↑25 и ↓0+25
Комментарии8

Эффективное создание компонентов с помощью styled system

Время на прочтение4 мин
Количество просмотров15K
image

Для стилизации react компонентов наша команда использует styled-components.

О styled-components уже есть статьи на Хабре, поэтому подробно останавливаться на этом не будем.

Знакомство с Styled components
Лучше, быстрее, мощнее: styled-components v4

Написав много компонентов мы обнаружили, что почти в каждом компоненте мы копируем повторяющиеся свойства.
Читать дальше →
Всего голосов 15: ↑15 и ↓0+15
Комментарии12

Нет серверным веб-приложениям

Время на прочтение5 мин
Количество просмотров29K
В 1993 году, когда появилась Всемирная паутина, World-Wide-Web, веб-страницы были представлены статическими HTML-файлами, содержащими ссылки на другие такие же файлы. Но вскоре, благодаря таким технологиям, как CGI, Perl и Python, веб-сайты стали оснащать динамическим функционалом, который серьёзно расширил их возможности.

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

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


Прекратите писать серверные веб-приложения
Читать дальше →
Всего голосов 44: ↑18 и ↓26+3
Комментарии187

Автоматизация публикации приложения в Google Play при помощи Jenkins

Время на прочтение6 мин
Количество просмотров3.7K

Для этого нам понадобится

1) Действующий account Google Play Developer

2) Сервер Linux с предустановленным Docker, в моём случае это Ubuntu 16.04

3) Установленный Android SDK

4) Jenkins - в данном случае развернём его при помощи Docker

5) Gitea - Удобная служба для собственного Git-репозитория (это не обязательно можно использовать и GItHub) её мы подымем также на базе Docker контейнера

Читать далее
Всего голосов 4: ↑3 и ↓1+4
Комментарии4

Большой отчёт об изменениях в веб-доступности

Время на прочтение23 мин
Количество просмотров4K


В 2020 году, как никогда раньше, стала очевидна необходимость сделать цифровое пространство инклюзивным и доступным для всех. Из-за продолжающейся пандемии, которая осложнила личный доступ к услугам и перевела целые отрасли в онлайн, особенно сильно страдают люди с ограниченными возможностями. К тому же их количество с растет из-за долгосрочных последствий пандемии.
Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Комментарии1

Webtor.io и в чем его отличия от обычного сидбокса

Время на прочтение4 мин
Количество просмотров11K

Сегодня я вам расскажу вам о сервисе webtor.io для проигрывания торрентов онлайн. О том что он умеет, зачем нужен, а также с какими трудностями пришлось столкнуться в процессе разработки читаем далее...

Читать далее
Всего голосов 7: ↑5 и ↓2+6
Комментарии9

Почему вы никогда не должны соглашаться на собеседования с программированием

Время на прочтение5 мин
Количество просмотров75K
Собеседование инженера программиста сегодня часто включает в себя некий тест или упражнение на программирование, и я думаю, что это очень плохая вещь. Вот почему.


Приятного чтения!
Всего голосов 74: ↑53 и ↓21+52
Комментарии283

Как удалить «неудаляемые» приложения со смартфона

Время на прочтение5 мин
Количество просмотров260K


Чтобы увеличить привлекательность смартфонов, производители ставят на них как можно больше разных программ. Это понятно. Просто берём и удаляем ненужное… Стоп.

Оказывается, некоторые программы невозможно удалить. Например, на отдельных моделях Samsung невозможно удалить Facebook (есть только опция 'disable'). Говорят, на Samsung S9 вдобавок предустановлены «неудаляемые» приложения Microsoft.

Эти смартфоны приведены для примера. Такая же проблема и на других моделях. На многих есть неудаляемые программы от самого производителя.

Всё это надо зачистить.
Читать дальше →
Всего голосов 156: ↑145 и ↓11+168
Комментарии203

Гайд по тестированию локализации и интернационализации, а также большой и полезный checklist

Время на прочтение23 мин
Количество просмотров50K

Привет, хабровчане. Сегодня я хочу осветить и обсудить тему локализации (L10N) и интернационализации (I18N). В интернете и, в том числе и на Хабре уже есть полезные и интересные статьи, но часто они дают более-менее общую информацию о подходах, без углубленной информации о том, что и как можно проверить. Я бы хотел с вами поделиться своим опытом, просуммировать кое что из статей, которые вы можете найти в интернете, а также постараюсь описать большой checklist с самыми распространёнными кейсами как для локализации, так и для интернационализации. В чеклистах я буду стараться упоминать только те проверки, которые вы можете сделать сами, без (глубоких) знаний языка новой для вас локали.


image

Читать дальше →
Всего голосов 5: ↑5 и ↓0+5
Комментарии6

Будущее JavaScript: декораторы

Время на прочтение12 мин
Количество просмотров18K


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

Представляю вашему вниманию адаптированный перевод нового варианта предложения (сентябрь 2020 г.), касающегося использования декораторов в JavaScript, с небольшими пояснениями относительно характера происходящего.

Впервые данное предложение прозвучало около 5 лет назад и с тех пор претерпело несколько значительных изменений. В настоящее время оно (по-прежнему) находится на второй стадии рассмотрения.

Если вы раньше не слышали о декораторах или хотите освежить свои знания, рекомендую ознакомиться со следующими статьями:


Итак, что такое декоратор? Декоратор (decorator) — это функция, вызываемая на элементе класса (поле или методе) или на самом классе в процессе его определения, оборачивающая или заменяющая элемент (или класс) новым значением (возвращаемым декоратором).

Декорированное поле класса обрабатывается как обертка из геттера/сеттера, позволяющая извлекать/присваивать (изменять) значение этому полю.

Декораторы также могут аннотировать элемент класса метаданными (metadata). Метаданные — это коллекция простых свойств объекта, добавленных декораторами. Они доступны как набор вложенных объектов в свойстве [Symbol.metadata].
Читать дальше →
Всего голосов 14: ↑12 и ↓2+17
Комментарии4

Учимся писать информативные комментарии к GIT-коммитам используя общепринятую семантику

Время на прочтение5 мин
Количество просмотров38K

Когда я только знакомился с системами контроля версий (особенно с git), я рассматривал их только как приложения, которые помогают мне хранить историю изменений моего кода. Т.е. когда случается что-то нехорошее, я могу просмотреть историю коммитов и вернуться к последнему «хорошему» состоянию кода в моем репозитории.

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

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

Читать далее
Всего голосов 17: ↑14 и ↓3+17
Комментарии35

Что выбрать в качестве библиотеки компонентов для React-проекта

Время на прочтение19 мин
Количество просмотров20K

Меня зовут Ксюша Луговая. В СберКорусе я занимаюсь поддержкой библиотеки React-компонентов Korus-UI. 

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

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

Читать далее
Всего голосов 12: ↑11 и ↓1+22
Комментарии34

Практика использования спецификации CSS Scroll Snap

Время на прочтение11 мин
Количество просмотров32K
Часто ли у вас возникало желание воспользоваться какой-нибудь возможностью CSS, позволяющей, без лишних усилий, создать элемент-контейнер, поддерживающий прокрутку? CSS, что очень хорошо, даёт нам такую возможность. Я, когда только начинал заниматься фронтенд-разработкой, пользовался для создания прокручиваемых элементов JavaScript-плагинами. Но иногда нужно что-то такое, что позволяет создавать подобные элементы просто и быстро, без привлечения JavaScript. Сделать это можно, воспользовавшись спецификацией CSS Scroll Snap.



Здесь я хочу раскрыть основы практического использования этой спецификации. Я сам только недавно разобрался с CSS Scroll Snap, поэтому рассказывать всё это буду, так сказать, «по горячим следам».
Читать дальше →
Всего голосов 39: ↑39 и ↓0+39
Комментарии6

React.js — формошлепство или работа с формами при помощи пользовательских хуков

Время на прочтение11 мин
Количество просмотров23K


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

Читать дальше →
Всего голосов 7: ↑7 и ↓0+7
Комментарии9

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность