Pull to refresh
5
0
Владимир Проскурин @Vlad_IT

Front-end

Send message

Продуктовый подход к pet-проекту или как я разработал музыкальное веб-приложение

Level of difficulty Medium
Reading time 9 min
Views 2.7K

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

Читать далее
Total votes 24: ↑24 and ↓0 +24
Comments 20

Анонимная P2P-сеть внутри централизованного HTTPS-сервера: вшиваем паразитный трафик всеми правдами и неправдами

Level of difficulty Hard
Reading time 25 min
Views 10K

Государственная цензура есть многогранный монстр, закрывающий путь не только к зарубежной информации посредством блокировки ресурсов и их методов обхода, в лице Proxy, VPN, Tor, но также и постоянно пытающийся подавлять неподконтрольные безопасные и анонимные коммуникации внутри самого себя. Гос.структуры ради этого готовы пойти буквально на любые ухищрения и запугивания, включая штрафы (дело Threema, отказ передачи ключей шифрования), уголовные преследования (дело Дмитрия Богатова, дело по VIPole), регулирование неконтролируемой криптографии (история запретов до 2016, запрет шифрования доменных имён), а также возможные бэкдоры в собственных криптоалгоритмах (Кузнечик и Стрибог). Рэкет становится для государства нормой жизни.

Читать далее
Total votes 42: ↑42 and ↓0 +42
Comments 6

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

Level of difficulty Medium
Reading time 7 min
Views 8.9K


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


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


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


Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display

Читать дальше →
Total votes 55: ↑55 and ↓0 +55
Comments 9

Кеширование next.js. Дар или проклятие

Reading time 7 min
Views 2.6K

В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.

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

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

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

Как совмещать основную работу и проекты на стороне

Level of difficulty Easy
Reading time 5 min
Views 44K

У многих из нас остается достаточно свободного времени в сутках. А почему бы не монетизировать это время, думает начинающий IT левак? Если работать по три часа в день в будние, брать по 2 тысячи за час, то получится 120 тысяч дополнительного дохода в месяц. Звучит отлично!

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

Читать далее
Total votes 109: ↑107 and ↓2 +105
Comments 47

Шпаргалка для алгособеса — алгоритмическая сложность, структуры данных, методы сортировки и Дейкстра

Level of difficulty Medium
Reading time 33 min
Views 88K

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

Так уж повелось, что любой уважающий себя работодатель перенимает передовые^✻ методики FAANG — по этой причине практически во всех IT-собесах есть она: секция алгоритмов. Кто-то ей рад, кто-то не очень, но секция есть и уходить пока не планирует. Поэтому нужно закатать рукава и достойно встретить суровую реальность.

Читать далее
Total votes 216: ↑214 and ↓2 +212
Comments 77

Как создать Мету, которая затянет играть сутками

Level of difficulty Medium
Reading time 10 min
Views 19K

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

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

Читать далее
Total votes 27: ↑18 and ↓9 +9
Comments 12

Лазерный DIY или как с помощью дешевого гравера делать качественные платы

Level of difficulty Easy
Reading time 5 min
Views 29K


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

В этой статье хочу поделиться своей историей, как спонтанная покупка на местном маркетплейсе упростила процесс изготовления прототипов печатных плат в домашних условиях, сэкономив время, при этом повысив качество. Интересно? Тогда добро пожаловать под кат!
Читать дальше →
Total votes 93: ↑92 and ↓1 +91
Comments 94

Дни генеративных ИИ сочтены? Инструмент для «отравления» датасетов добился неожиданной популярности

Reading time 3 min
Views 21K

Бесплатный инструмент Nightshade, созданный исследователями из Чикагского университета, скачали 250 000 раз за первые 5 дней его существования. Программа предназначена для цифровых художников, которые не хотят допустить использования своих изображений генеративными ИИ. Похоже, если инструмент будет настолько успешен, разработка следующих моделей может быть сильно усложнена.

Читать далее
Total votes 53: ↑49 and ↓4 +45
Comments 48

Топ-10 способов развития мышления ИТ-профессионала

Level of difficulty Easy
Reading time 3 min
Views 16K

Если вы стремитесь не ограничиваться выполнением только рутинных задач и желаете расширить свои возможности для роста, то как это можно сделать?

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

Читать далее
Total votes 16: ↑10 and ↓6 +4
Comments 13

Это один из лучших подходов к изучению английского, что я видел за последние годы — коллокации

Reading time 7 min
Views 115K

Значение слова – это его использование в языке
Людвиг Витгенштейн (сурс) 

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

А что если я скажу, что они улучшают сразу и вашу способность органично говорить, и канонично писать, и что совсем удивительно воспринимать английский от носителей языка на слух? И главный вопрос, который меня мучает – почему я узнал об этой технике изучения языка только полгода назад? (Рассказ об этой подготовке здесь.) 

Внимательно посмотрите на пример с картинки. Как только собеседник начал(а) произносить “pitch d…” ваш мозг, зная нужные коллокации, подскажет, что там должно быть “dark”. Даже если вы плохо расслышали эту часть. Это один из механизмов, через который коллокации позволяют лучше воспринимать язык на слух.

Подробнее о том, как их учить и использовать и будет эта статья.

Disclaimer: если у вас филологическое образование, то вам наверное будет смешно, что кто-то открыл для себя коллокации и их использование для изучения иностранного языка в 202N году, а вот если вы, как и я, когда-то читали “randomize” как “рандомизе”, то возможно эта статья будет вам полезной.

Добро пожаловать под кат
Total votes 97: ↑96 and ↓1 +95
Comments 116

Разбираем самый маленький PNG в мире

Level of difficulty Easy
Reading time 9 min
Views 35K

Самый миниатюрный PNG в мире весит 67 байт и представляет собой один чёрный пиксель. Выше вы видите его в 200-кратном увеличении.

Красота, не так ли?

Состоит этот файл из четырёх частей:

  1. Сигнатура PNG, одинаковая во всех файлах этого формата: 8 байт.
  2. Метаданные изображения, включая его размеры: 25 байт.
  3. Данные пикселя: 22 байта.
  4. Маркер «конец изображения»: 12 байт.

Далее я опишу этот файл подробнее и постараюсь объяснить принцип работы формата PNG.

В качестве небольшой затравки скажу, что в конце предстоит неожиданный поворот. Хотя, надеюсь, вам и без того интересно побольше узнать о PNG.
Читать дальше →
Total votes 140: ↑132 and ↓8 +124
Comments 112

Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево

Level of difficulty Hard
Reading time 19 min
Views 16K

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

На момент написания статьи, последняя стабильная версия React 18.2.0. За 10 лет разработчики Facebook проделали колосальный объем работы, было реализовано много фич и сделано не мало оптимизаций. За эти годы, так же, происходили и кардинальные архитектурные изменения. Очевидно, одной статьи мало, чтобы покрыть всю механику React, поэтому, данная публикация станет первой в серии статей о внутреннем устройстве React. Здесь мы познакомимся с основными сущностями и архитектурными решениями.

Читать далее
Total votes 18: ↑16 and ↓2 +14
Comments 9

Понимание критического пути рендеринга

Reading time 5 min
Views 64K

Браузеру предстоит пройти много шагов, прежде чем HTML-ответ от сервера будет преобразован в пиксели на экране. Последовательность этих шагов, необходимая для первого отображения страницы, называется «Критический путь рендеринга» (ориг. Critical Rendering Path).


Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Comments 11

YAML из Ада

Reading time 9 min
Views 59K

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

Данный пост является нытьём и он более субъективен, чем мои обычные статьи.
Читать дальше →
Total votes 221: ↑218 and ↓3 +215
Comments 186

Продвинутые техники извлечения данных для достижения максимальной производительности

Reading time 12 min
Views 2K

Cегодня мы поговорим на тему оптимизации производительности для масштабируемых систем.

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

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

Читать далее
Total votes 19: ↑17 and ↓2 +15
Comments 0

IT и высокая зарплата: Мифы, реальность, подводные камни

Level of difficulty Easy
Reading time 7 min
Views 33K

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

Читать далее
Total votes 47: ↑23 and ↓24 -1
Comments 121

Clickhouse, Grafana и 3000 графиков. Как построить систему быстрых дашбордов

Reading time 17 min
Views 27K

Меня зовут Валя Борисов, и я — аналитик в команде Ozon. Задача нашей команды — создавать инструменты для мониторинга и анализа скорости. 

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

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

Читать далее
Total votes 41: ↑41 and ↓0 +41
Comments 25

Путешествие JavaScript-кода через движок V8

Level of difficulty Easy
Reading time 3 min
Views 11K

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

Читать далее
Total votes 16: ↑10 and ↓6 +4
Comments 11

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

Reading time 4 min
Views 27K

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

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

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

Ну что, поехали!

Читать далее
Total votes 16: ↑15 and ↓1 +14
Comments 19

Information

Rating
5,073-rd
Location
Москва, Москва и Московская обл., Россия
Registered
Activity