Как стать автором
Обновить
1
0
Yuriy Faiozv @To4KaXD

Frontend

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

Как стать VPN провайдером за один вечер

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров60K

Рассказываю о своём опыте использования Xray (с протоколом VLESS-Reality) - одного из лучших решений для преодоления интернет-цензуры на сегодняшний день. Я потратил много времени на то, чтобы разобраться с ним - теперь вам достаточно одного вечера, чтобы поднять свой сервер на несколько десятков пользователей, c xray на борту!

скрипт ex.sh для простой настройки и установки; есть поддержка Docker

легко добавлять пользователей; клиентские конфиги в форме url-ссылок

правильные конфиги: скрытность + удобство

трафик популярных российских сайтов идёт напрямую, a не через сервер

для xray есть приложения под все популярные ОС - делюсь инструкциями

только https, нет udp; торренты через сервер блокируются по возможности

мой проект на гитхабе: easy-xray

Интересны детали? Добро пожаловать под кат
Всего голосов 71: ↑70 и ↓1+69
Комментарии142

Любимая задачка на знание React

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров20K

Всем привет! Меня зовут Олег и я fullstack-программист в компании Тензор. Опыт в разработке, без малого, 20 лет (как-то раз батя спаял на кухне ZX Spectrum и все заверте..., сам не понял как так вышло). В данный момент являюсь тимлидом собственной команды разработчиков, которая периодически нуждается в пополнении толковыми программистами.

Как и многие руководители, я активно принимаю участие в подборе сотрудников для себя и помогаю на собесах коллегам соседних отделов.

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

Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью :)

Итак, задачка...
Всего голосов 23: ↑23 и ↓0+23
Комментарии56

Pet-проекты — это зло. Вредные советы для фронтендеров

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

Привет, Хабр! Меня зовут Александр Водолазских. Я руковожу направлением разработки интерфейсов в СберМаркете и после работы люблю посидеть за кодом, разрабатывая собственные пет проекты. 

Чего я только не кодил по вечерам: писал смарт контракты на Solidity, копался с разными фреймворками и библиотеками, пилил свой убийцу Twitter на react.js... В какой-то момент фронтенд мне поднадоел, и яначал изучать разработку под node, nest, после - на go. А после - начал экспериментировать с мобильной разработкой на Swift.

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

Мой сегодняшний текст — о том, как, мне кажется, нужно и нельзя вести пет-проекты. 

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

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

Неочевидные моменты TypeScript и способы их решения

Уровень сложностиСложный
Время на прочтение7 мин
Количество просмотров15K

Разрабатывая на TypeScript, можно столкнуться с ситуациями, в которых код будет работать не так, как ожидается. В статье разберем несколько таких моментов. Часть просто придется иметь ввиду, часть решается обновлением, а часть исправляется – обо всем по порядку.

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

Читать далее
Всего голосов 16: ↑14 и ↓2+12
Комментарии11

Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript

Уровень сложностиСложный
Время на прочтение13 мин
Количество просмотров17K

Одной из самых интересных грядущих новинок JavaScript и TypeScript для меня является явное управление ресурсами. Новый синтаксис using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий какими-либо ресурсами.

В этой статье я хочу на примерах разобрать эту фичу — в том виде, в котором она сейчас доступна в TypeScript 5.2.0-beta с полифиллом disposablestack. Я рассмотрю синхронные и асинхронные ресурсы, DisposableStack/AsyncDisposableStack, а также приведу пример неочевидного бага, в который попался я сам. По пути я также коснусь нескольких других нововведений Node.js, про которые, возможно, ещё знают не все. Весь код доступен в репозитории.
Читать дальше →
Всего голосов 65: ↑65 и ↓0+65
Комментарии6

«Уехал, и что дальше?» — подборка для планирования жизни за границей

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

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

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

Читать скорее!
Всего голосов 103: ↑91 и ↓12+79
Комментарии234

Перегрузка функций в TypeScript

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

Перегрузка функций — это та область TS, которая находится в невидимой зоне для разработчиков, которые изучали JS, а потом на работе «на ходу» начали осваивать TS. Особенно, если изучение JS не было связано с университетом или любым другим фундаментальным образованием. Если вы изучали JS на курсах, то вы никогда не услышите там про перегрузку функций, просто потому что в JS этого функционала нет. А когда вы сами начнете изучать TS, то вы не наткнетесь на перегрузку функций, просто потому что даже не подозреваете о ней. Если, прочитав вступление, вы задались вопросом «Что за перегрузка такая?», то эта статья для вас.

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

Дженерики в TypeScript

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

Привет, я Сергей Вахрамов, занимаюсь фронтенд-разработкой на Angular в компании Тинькофф. Во фронтенд-разработку вошел напрямую с тайпскрипта, просто перечитав всю документацию. С того момента и спецификация ECMAScript расширилась, и TypeScript сильно подрос. Казалось бы, почему разработчики могут бояться дженериков, ведь бояться там нечего? Мой опыт общения с джуниор-разработчиками говорит, что во многом ребята не используют обобщенные типы просто потому, что кто-то пустил легенду об их сложности.

Эта статья для тех, кто не использует generic-типы в TypeScript: не знают о них, боятся использовать или используют вместо реальных типов — any.

Перестать везде использовать тип "any"
Всего голосов 54: ↑53 и ↓1+52
Комментарии16

Как я монетизировал гнездо аистов

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

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

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

Читать далее
Всего голосов 245: ↑244 и ↓1+243
Комментарии73

Что можно положить в тег <head>

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

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

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

Реализация архитектуры Redux на MobX. Часть 1: «Проблемные места Redux»

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

Эта часть статьи будет об осмыслении составляющих Redux. Так ли они необходимы, что является их аналогом. Также будет предложена более удобная альтернатива хука useReducer.

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

В этой части статьи я хочу показать, что:

— редьюсеры - это аналог обычных чистых функции для получения нового состояния.

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

— dispatch + action + action creators - это аналог обычных вызовов функций, и разбиение на dispatch, action, action creators является зачастую ненужным и используются не к месту.

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

Тотальный JavaScript: изучаем JS с акцентом на практической составляющей

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


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

Когда речь заходит об изучении JavaScript, будь то первое знакомство с языком или углубление имеющихся знаний, найти в «интернетах» теоретические материалы не составляет особого труда. Мой топ-5:


Однако, когда дело касается практических аспектов JavaScript, информацию приходится собирать буквально по крупицам. Собственно, этим я и занимался на протяжении последних 4-5 месяцев.

Предлагаю вашему вниманию «Тотальный JavaScript».

Вот что вы найдете в этом репозитории:
Читать дальше →
Всего голосов 7: ↑6 и ↓1+5
Комментарии3

Кому с Redux жить хорошо

Время на прочтение20 мин
Количество просмотров9.7K
Приветствую всех любителей хорошей инженерки! Меня зовут Евгений Иваха, я фронтенд-разработчик в команде, занимающейся дев-программой в ManyChat. В рамках дев-программы мы разрабатываем инструменты, позволяющие расширять функциональность ManyChat за счет интеграции со сторонними системами.

Существует мнение, что разработка через тестирование, или по канонам Test Driven Development (TDD) для фронтенда не применима. В данной статье я постараюсь развенчать этот миф и покажу, что это не только возможно, но и очень удобно и приятно.

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


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

10 сервисов для организации списка дел и повышения продуктивности в 2021 году

Время на прочтение14 мин
Количество просмотров275K
Сейчас самое время навести порядок в своем списке дел и завести новый онлайн-планировщик, органайзер или календарь, чтобы в этом году уж наверняка стать более эффективным и продуктивным.

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



Что такое продуктивность?

Всего голосов 9: ↑8 и ↓1+7
Комментарии38

Как понять свойство clip-path в CSS

Время на прочтение7 мин
Количество просмотров59K
В те далёкие времена, когда я впервые столкнулся со свойством CSS clip-path, мне потребовалось больше времени, чем я ожидал, и я изо всех сил старался запомнить, как работает свойство. Не знаю точно, почему так получилось, но, может быть, потому, что я не пользовался им часто? Во всяком случае, я изучу его снова вместе с вами. В этой статье я стремлюсь дать чёткое, детальное объяснение того, как работает clip-path, когда его использовать и как вы можете воспользоваться им в своих проектах веб-разработки. Вы готовы?


Тогда ныряем!
Всего голосов 15: ↑13 и ↓2+11
Комментарии2

Почему контекст не является «инструментом для управления состоянием»

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


TL;DR


Context и Redux — это одно и тоже?

Нет. Это разные инструменты, делающие разные вещи и используемые в разных целях.

Является ли контекст инструментом «управления состоянием»?

Нет. Контекст — это форма внедрения зависимостей (dependency injection). Это транспортный механизм, который ничем не управляет. Любое «управление состоянием» осуществляется вручную, как правило, с помощью хуков useState()/useReducer().

Являются ли Context и useReducer() заменой Redux?

Нет. Они в чем-то похожи и частично пересекаются, но сильно отличаются в плане возможностей.

Когда следует использовать контекст?

Когда вы хотите сделать некоторые данные доступными для нескольких компонентов, но не хотите передавать эти данные в виде пропов на каждом уровне дерева компонентов.

Когда следует использовать Context и useReducer()?

Когда вам требуется управление состоянием умеренно сложного компонента в определенной части приложения.

Когда следует использовать Redux?

Redux наиболее полезен в следующих случаях:

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

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

Интересные книги в жанре «науч-поп»

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

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

Профессиональное выгорание знакомо едва ли не каждому крутому специалисту. Можно выгореть из-за овертаймов, окружения, по причине профессиональной стагнации… Но! Оказывается, можно и не выгорать вообще.

Под катом — про личный опыт сотрудников Deutsche Telekom IT Solutions. И опыт профессионального выгорания, последующего восстановления и в результате «отлитых в граните» принципов. И абсолютное недоумение по этому поводу вплоть до хлёсткого эпитета «непрофессиональное выгорание».
На чьей вы стороне?
Всего голосов 36: ↑33 и ↓3+30
Комментарии14

8 бесплатных инструментов для создания интерактивных визуализаций данных без необходимости написания кода

Время на прочтение8 мин
Количество просмотров72K
Когда тот, кто работает в сфере Data Science, собирается показать результаты своей деятельности другим людям, оказывается, что таблиц и отчётов, полных текстов, недостаточно для того чтобы представить всё наглядно и понятно. Именно в таких ситуациях возникает нужда в визуализации данных, в такой их обработке, которая позволит всем желающим в них разобраться и ухватить суть тех сложных процессов, которые они описывают.

В этом материале я расскажу о лучших бесплатных инструментах, позволяющих без особых сложностей создавать впечатляющие визуальные представления данных. При этом тут я не буду говорить о сложных системах вроде Power BI и Google Studio. Я выбрал те 8 инструментов, о которых пойдёт речь, из-за того, что ими легко пользоваться, из-за их приятного внешнего вида, из-за того, что работать с ними можно, не написав ни единой строчки программного кода и из-за того, что они бесплатны. Кроме того, они позволяют создавать интерактивные визуализации. А это значит, что графики, представляющие некие данные, могут содержать в себе больше сведений об этих данных, чем обычные изображения. Да и работать с такими графиками интереснее.



Так как инструменты для визуализации данных то появляются, то исчезают, я включил в этот материал только те из них, которые, вероятнее всего, ещё долго будут пребывать в добром здравии. А это значит, что вполне разумным шагом будет вложение некоторого времени в их изучение. Как уже было сказано, пользоваться этими инструментам можно без написания кода. Но если вас интересует визуализация данных именно через код — взгляните на этот материал.
Читать дальше →
Всего голосов 37: ↑36 и ↓1+35
Комментарии8

Искусство компонентов. Пишем карточку контакта Facebook Messenger

Время на прочтение12 мин
Количество просмотров8.7K
Вполне возможно оценить компонент и сказать, что он легко пишется на HTML и CSS. Соглашусь, это легко, когда вы работаете, только чтобы практиковаться, но в реальном проекте всё по-другому. Идеальный адаптивный компонент, который вы только что создали, быстро перестаёт работать, когда сталкивается с реальным контентом настоящего проекта. Почему? Потому, что, пока вы рассуждаете о разработке компонента, вы можете упустить крайние случаи. Сегодня, специально к старту нового потока нашего курса по веб-разработке, поделюсь переводом статьи, в которой показан простой на первый взгляд компонент, за которым стоит огромная работа. Ради реалистичности это будет пример прямо из Facebook Messenger.


Приятного чтения!
Всего голосов 25: ↑23 и ↓2+21
Комментарии7
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Набережные Челны, Татарстан, Россия
Дата рождения
Зарегистрирован
Активность