Pull to refresh
-1
0
Иван @Fanatos

User

Send message

Как добавить кэширование в ваше React приложение

Reading time7 min
Views2K

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

Кэширование позволяет значительно сократить время загрузки и уменьшить нагрузку на сервер, сохраняя часто используемые данные в local storage. В данной статье мы рассмотрим один из способов кэширования в React‑приложениях — используя хуки.

Читать далее
Total votes 2: ↑2 and ↓0+4
Comments3

Как сделать Infinite Scroll на хуках в React приложении

Reading time4 min
Views4.1K

Infinite Scrolling - это популярный метод загрузки данных по мере необходимости (on-demand quests). При начальном рендере приложение запрашивает только часть контента (только ту, которую он сможет увидеть) и динамически подгружает следующие части по мере прокрутки страницы пользователем, обеспечивая бесшовный user experience.

В этой статье описан самый простой способ реализации - на хуках.

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

Организация структуры папок и файлов в React/Next по MVC-архитектуре

Level of difficultyEasy
Reading time9 min
Views5K

В этой статье я делюсь своим способом упорядочивания папок и файлов для проектов на React/Next. Я fullstack разработчик с 10+ лет опыта коммерческой разработки, множество стартапов разработал в различных командах, и несколько стартапов разработал в одиночку, в т.ч. своих собственных.

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

Читать
Total votes 8: ↑7 and ↓1+6
Comments11

Next.js. Технология современной веб-разработки

Level of difficultyMedium
Reading time16 min
Views31K

Современная веб-разработка требует эффективных инструментов, способных справляться с высокими стандартами производительности и пользовательского опыта. В этой статье мы рассмотрим Next.js, мощный JavaScript-фреймворк и новаторское решение для создания современных веб-приложений на основе React, созданный компанией Vercel. Узнаем, как он помогает разработчикам создавать высокопроизводительные, масштабируемые и SEO-дружественные веб-приложения. Мы также глубоко погрузимся в его функциональность, рассмотрим особенности, такие как серверный рендеринг и генерация статических сайтов, и предоставим примеры использования. Давайте разберем, как Next.js становится ключевым инструментом в современной веб-разработке, обеспечивая идеальный баланс между разнообразием функций и оптимальной производительностью.

Читать далее
Total votes 8: ↑5 and ↓3+3
Comments5

Zustand.js: современный, невесомый, производительный и очень гибкий state manager

Level of difficultyEasy
Reading time9 min
Views11K

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

В статье я расскажу:

о простом интерфейсе Zustand

о его внутреннем устройстве

о производительности без усилий: 3 простых способа оптимизаций

о производительности на максималках: не всегда нужно использовать длинный цикл рендера React, чтобы достичь максимальной производительности - Zustand может быстрее!

о применении на практике: советы и рекомендации по интеграции Zustand в ваши проекты для достижения масштабируемости и удобства поддержки.

Начните активно использовать Zustand в своих проектах - вы будете приятно удивлены простотой и удобством работы с ним.

Читать далее
Total votes 18: ↑13 and ↓5+8
Comments53

Как я проектирую интерфейсы

Reading time13 min
Views22K

Привет, я Егор Камелев, проектировщик интерфейсов (UX-дизайнер). За последние 20 лет я поработал с командами десятков агентств, IT-отделов, действующих проектов и продуктов, стартапов (и запущенных, и незавершённых). Я знаком с сотней команд, не меньше. И среди них не нашлось и двух, использующих одинаковые подходы к работе. Верно говорят: «У каждого додика — своя методика!».

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

Поэтому в этой статье я не буду заявлять, что мой подход к работе — единственно верный. Он один из тысяч и в моём случае прекрасно работает: клиенты не заваливают меня правками, платят 100% предоплату и рекомендуют окружающим. Я распишу во всех деталях свой процесс предоставления услуги проектирования (создания интерактивного прототипа информационной системы на заказ). Уверен, что многим пригодятся мои знания. Погнали!

Читать далее
Total votes 24: ↑20 and ↓4+21
Comments20

Как начать тестировать frontend: гайд для новичков

Level of difficultyMedium
Reading time13 min
Views12K

Хабр, привет. Меня зовут Рамиль Шайбаков, я фронтенд‑разработчик в СберЗдоровье. Последние несколько лет я часто собеседую кандидатов на позицию frontend‑разработчика в нашу компанию и заметил одну закономерность — у большинства специалистов нет опыта в тестировании. Причем знаниями о unit/интеграционных/e2e‑тестах, пирамиде тестирования, красно‑зелёном рефакторинге, TDD и BDD, скриншот‑тестировании и других техниках не могут похвастаться как новоиспеченные фронтенды, так и специалисты уровня Senior. Причины и аргументы у всех разные, но итог один — фронтенды часто не делают тесты.

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

Поехали
Total votes 7: ↑6 and ↓1+6
Comments0

Я стал зарабатывать вдвое больше, когда начал писать техническую документацию

Reading time8 min
Views26K

Речь идёт о функциональных спецификациях к сайтам, приложениям и прочим информационным системам.

В начале карьеры UX-дизайнера я просто делал интерактивные прототипы, а документацию предпочитал не писать. Почему так:

Во-первых, сложно. Этому навыку никто не обучал, а написать 100 и более страниц текста по проекту — это как диссертацию накатать. Поэтому я говорил клиентам, что, мол, и так справитесь.

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

Продавать это было легко. Достаточно было рассказать о том, как я, заплатив несколько десятков тысяч за документ, экономил несколько сотен тысяч на разработке. И подкрепить рассказ конкретными цифрами и примерами. Чаще всего я рассказываю о том, как пожалел 50к на функциональную спецификацию на участок собственного проекта, и разработчики делали его два с половиной месяца вместо привычного одного. А месяц их работы обходился моей казне почти в 300к рублей. И если бы я не сэкономил на функциональной спецификации, то задача обошлась бы на 400к рублей дешевле.

Читать далее
Total votes 11: ↑8 and ↓3+8
Comments8

Обзор книги «README. Суровые реалии разработчиков»

Reading time9 min
Views11K
Недавно я прочитал книгу «README. Суровые реалии разработчиков» Криса Риккомини и Дмитрия Рябого. Я сам в чем-то похож на новичка, поэтому решил попробовать. Эта книга полна хороших советов для разработчиков, начинающих свою карьеру и серьезно об этом задумывающихся. Каждая глава полна примеров поведения и практики. У авторов есть большой опыт, которым они делятся с инженерами.

Эта книга на самом деле имеет довольно глубокий смысл, и я тоже кое-что почерпнул из нее. Несмотря на более чем 15 лет работы в этой отрасли. Если вы только начинаете, это определенно книга для вас. Неважно, какой язык или технологию вы выбрали. Книга применима к любой платформе. Кроме того, каждое предложение имеет значение. Даже на короткое время книга не показалась мне раздутой.

Поэтому вместо обычной рецензии я поделюсь несколькими яркими моментами. Это цитаты, которые показались мне особенно интересными, с моими комментариями. Короче говоря, я жалею, что эта книга не существовала, когда я начинал. Очень рекомендую!
Читать дальше →
Total votes 15: ↑13 and ↓2+16
Comments0

Полностью отзывчивый дизайн — это больше, чем просто медиа-запросы

Reading time4 min
Views14K


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

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

Пять вещей, о которых онлайн-покупателям следовало знать еще летом

Reading time5 min
Views27K
3 июля 2016 года были подписаны  поправки к закону «О применении контрольно-кассовой техники». Для каждого продавца это – важнейший документ, норм которого следует неукоснительно придерживаться. С 1 июля 2017 года содержащиеся в них требования к расчетам при помощи контрольно кассовой техники стали обязательными для всех участников рынка. И главное в них для покупателя – получение чека сразу после оплаты, а не, например, через курьера, который, ко всему прочему, часто является лишь платежным агентом для магазина.

Какие еще вещи стоит знать о новой редакции 54-ФЗ – под катом.


Читать дальше →
Total votes 28: ↑23 and ↓5+18
Comments31

11 правил визуализации данных

Reading time6 min
Views87K
Ольга Базалева, создатель Data Vis и автор блога, написала статью специально для Нетологии о самых важных принципах визуализации. Статья участвует в конкурсе блога.

Хотите выделяться на фоне конкурентов? Чтобы ваши статьи, отчеты, презентации или посты в социальных сетях были профессиональными, интересными и доступными широкой аудитории? Используйте визуализацию данных!

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



Сегодня визуализация особенно важна, так как люди теряются в обилии окружающей информации и на ее восприятие тратится слишком много времени. Поэтому скучные непонятные тексты часто остаются без внимания. Читатель не будет тратить время, чтобы в них разобраться.
Читать дальше →
Total votes 39: ↑31 and ↓8+23
Comments19

Где перспективно и адекватно использовать Python

Reading time6 min
Views129K
В прошлой статье мы уже обсудили с вами причины, по которой Python нельзя назвать идеальным языком для новичков, хотя на том же Хабре бытует мнение, что Python – это выбор номер один и вообще топчик.

В этой статье мы с вами обсудим тот перечень направлений Питона, который я выделяю наиболее перспективными для приложения своих сил и времени для молодых специалистов. Данный вывод делается на основе моего анализа – изучение областей и инструментов питона и сравнивать их эффективность с аналогами на других платформах.
image
Читать дальше →
Total votes 71: ↑57 and ↓14+43
Comments255

Перевод и озвучка фильма дома — Indie Game: The Movie Special Edition

Reading time13 min
Views14K
В августе 2014 года мы с моим другом решили, что было бы круто попробовать озвучить какой-нибудь фильм, которого ещё нет на русском. Выбор пал на продолжение документального фильма про разработчиков очень популярных в своё время инди-игр (Super Meat Boy, FEZ, Braid) — «Indie Game: The Movie Special Edition». 19 роликов суммарной длиной 01:46:55. В наличии были только английские субтитры.

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

image
Total votes 26: ↑26 and ↓0+26
Comments14

Расширение аналитических возможностей метода линейного программирования средствами Python

Reading time6 min
Views7.1K

Введение


По линейному программированию средствами Python мною в статье [1] было рассмотрено решение задачи оптимизации с функцией цели альтернативной к основной. Как было показано в статье приём с введением новых функций цели при рассмотрении одной общей задачи оптимизации значительно расширяет аналитические возможности метода. Поэтому логично выбрать и рассмотреть такой пример, в котором при решении общей задачи оптимизации можно сформулировать несколько альтернативных функций цели.

Постановка задачи


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

Формирование целевой функции и начальных условий для минимизации стоимости диеты


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

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


Читать дальше →
Total votes 10: ↑9 and ↓1+8
Comments0

О выборе структур данных для начинающих

Reading time18 min
Views175K
image

Часть 1. Линейные структуры


Массив


Когда вам нужен один объект, вы создаёте один объект. Когда нужно несколько объектов, тогда есть несколько вариантов на выбор. Я видел, как многие новички в коде пишут что-то типа такого:

// Таблица рекордов
int score1 = 0;
int score2 = 0;
int score3 = 0;
int score4 = 0;
int score5 = 0;

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

// Таблица рекордов
const int NUM_HIGH_SCORES = 5;
int highScore[NUM_HIGH_SCORES] = {0};

Будет создан буфер из 5 элементов, вот такой:



Заметьте, что индекс массива начинается с нуля. Если в массиве пять элементов, то они будут иметь индексы от нуля до четырёх.
Читать дальше →
Total votes 42: ↑40 and ↓2+38
Comments32

Как научить свою нейросеть анализировать морфологию

Reading time8 min
Views19K

Недавно мы рассказывали про генератор стихов. Одной из особенностей языковой модели, лежащей в его основе, было использование морфологической разметки для получения лучшей согласованности между словами. Однако же у использованной морфоразметки был один фатальный недостаток: она была получена с помощью “закрытой” модели, недоступной для общего использования. Если точнее, выборка, на которой мы обучались, была размечена моделью, созданной для Диалога-2017 и основанной на закрытых технологиях и словарях ABBYY.


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


Вместо морфологического движка ABBYY я использовал широко известный pymorphy2. Что в итоге получилось? Спойлер — получилось неплохо.

Читать дальше →
Total votes 33: ↑31 and ↓2+29
Comments18

AMA. Avito. Backend

Reading time2 min
Views26K

Привет! Как и обещали, сегодня мы готовы отвечать на вопросы про бэкенд в Avito, разработку серверной части в целом и про высокие нагрузки в частности. Как работается с сайтом, на который ежемесячно заходит почти четверть населения России? Спросите у нас! Отвечать будем с 12 до 19 часов по московскому времени. Под катом я представляю шесть моих коллег, которые сегодня будут с вами на связи и напоминаю о возможных темах диалога.


AMA!
UPD, 19:03 мск: Спасибо всем за вопросы!
Официально мы завершаем АМА и прощаемся, но по возможности будем отвечать на комментарии.


Читать дальше →
Total votes 70: ↑67 and ↓3+64
Comments122

Существует ли идеальный планировщик личных задач? Разработка модульного планировщика

Reading time5 min
Views19K

Некоторое время назад, я, как активный пользователь планировщиков личных задач, открыл для себя один значительный недостаток – несмотря на их несчётное количество, невозможно найти «тот самый», который удовлетворял бы тебя по всем пунктам.


Нет, само по себе это абсолютно нормально, так как программу разрабатывал один или несколько разработчиков, которые в итоге пришли к своему пониманию того, “как пользователю будет лучше”. Да и к тому же, невозможно в одной программе уместить всё, что теоретически может захотеть сферический пользователь в вакууме. Или возможно?




Читать дальше →
Total votes 19: ↑18 and ↓1+17
Comments54

Jupyter Widgets для реализации UI машины Тьюринга

Reading time5 min
Views8.3K

Привет, Хабр! Хочу поделиться опытом в быстром создание интерфейса в Jupyter Notebook. Если у тебя есть какая-то задача, для которой нужен простой UI, и ты почему-то захотел сделать её в Юпитере, то добро пожаловать под кат.


Читать дальше →
Total votes 10: ↑8 and ↓2+6
Comments0
1
23 ...

Information

Rating
Does not participate
Registered
Activity