Pull to refresh
27
0
Алексей Сплитфейс @splitface

User

Send message

3D Блокчейн. Доказательство на лицо (PoF)

Reading time14 min
Views11K

Моя склонность — всё подвергать сомнению и блокчейн[1] не оказался исключением. Давайте взглянем на Цикл зрелости технологии (Gartner Hype Cycles). Где по Вашему находится Блокчейн? Естественно каждый для себя определит своё нахождение на том или ином цикле, которое свойственно проекту на каком-то из стадий разработки. Кто-то во всю развивает бизнес приложение и видит будущие горизонты, а кто-то только начинает знакомство. Но если взглянуть шире? Блокчейн неоспоримо засел в мысли и показал большой потенциал по трансформации многих сегментов взаимоотношения людей. Но у меня остаётся доля сомнения в отношении некоторых текущих принципов его работы. В итоге, я вижу эту стадию где-то на уровне пика завышенных ожиданий (Peak of inflated expectations) — общественный ажиотаж с чрезмерным энтузиазмом и нереалистичными ожиданиями. Что означает, впереди ещё ждать такие циклы как: Избавление от иллюзий, Преодоление недостатков, Плато продуктивности.


Поэтому, если Вам интересна критика и предположение иного подхода в определении консенсуса, то добро пожаловать под кат.

Читать дальше →
Total votes 17: ↑15 and ↓2+13
Comments40

Архитектурный паттерн Dependency Injection в React-приложении

Reading time15 min
Views37K

Расшифровка доклада Сергея Нестерова с конференции FrontendLive 2020.

Привет! Меня зовут Сергей, уже больше двух лет я работаю в группе компаний Тинькофф. Моя команда занимается разработкой системы для анализа качества обслуживания клиентов в Тинькофф, и, как вы, наверное, догадались, мы используем React в своем приложении. Не так давно мы внедрили в свой проект архитектурный паттерн Dependency Injection совместно с IoC-контейнерами. Сделали мы это не просто так: это позволило нам решить ряд проблем, которые тормозили разработку нового функционала.

Читать далее
Total votes 34: ↑33 and ↓1+32
Comments48

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

Reading time9 min
Views46K

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

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

Read more
Total votes 13: ↑13 and ↓0+13
Comments5

Буддизм с точки зрения программиста

Reading time20 min
Views96K

Здравствуйте, меня зовут Сергей, я работаю JavaScript-программистом, и я - буддист. Но совсем не такой, каким вы меня только что представили. Наверняка, при прочтении слова "буддист", в вашей голове всплывает либо образ улыбчивого азиата в оранжевом одеянии, либо образ безработного хиппи-вегана, путешествующего по Индии, занимающегося йогой и ищущего "просветления" в сомнительных религиозных практиках. Так вот, я ни тот, и ни другой. Так кто же я? Чтобы ответить на этот вопрос, нужно для начала поближе познакомиться с историей буддизма.

Около трех с половиной тысяч лет назад Древняя Индия была завоевана ариями - одним из индоевропейских племен, пришедшем в Индию с предгорий Кавказа через территорию современного Ирана. Немного отклонившись от основной темы поста, скажу, что с этим завоеванием связано много интересных фактов. Именно потому, что кроме Индии эти племена завоевали также территории Европы и Ирана, все европейские, персидский и индийские языки родственны друг другу и входят в одну языковую семью. Вы же понимаете санскритское слово "веды" без перевода, верно? И именно по названию места происхождения этих племен в английском языке европеоидная раса называется caucasian race. А также именно по названию этого племени французский граф Жозев Артюр де Гобино дал имя своей печально известной расовой теории, позже популяризованной и претворенной в жизнь Адольфом Гитлером. Но давайте вернемся назад к нашей теме.

Читать далее
Total votes 167: ↑135 and ↓32+103
Comments575

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

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



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

CI/CD для проекта в GitHub с развертыванием на AWS EC2

Reading time6 min
Views11K

Имеем: проект web API на .net core с исходниками в GitHub.

Хотим: авторазвертывание на виртуалке AWS EC2 после завершения работы с кодом (для примера push в develop ветку).

Инструментарий: GitHub Actions, AWS CodeDeploy, S3, EC2.

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

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

До свидания, Google Fonts. Последний аргумент

Reading time6 min
Views78K


Шрифты Google Fonts страшно популярны. Их загружают более 42,8 миллиона сайтов, в том числе Хабр. Библиотека Google Fonts содержит 1023 свободных шрифта и программные интерфейсы для их внедрения через CSS. Очень удобно, казалось бы.

Во многих статьях отмечалось, в какую цену обходятся многочисленные запросы через API. Совет самостоятельно хостить шрифты дают много лет. Даже сама Google давала такой совет на конференции Google I/O 2018 года в выступлении на тему веб-производительности.

Так почему же многие до сих пор загружают шрифты через Google Fonts API? Ну, был последний аргумент — кэширование. Мол, благодаря общему CDN пользователю не нужно скачивать шрифт заново с каждого сайта. Однако в октябре 2020 года этот аргумент перестал работать. Теперь шрифты Google Fonts больше не кэшируются!
Читать дальше →
Total votes 76: ↑76 and ↓0+76
Comments65

Декораторы в JavaScript с нуля

Reading time10 min
Views35K

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

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

Читать далее
Total votes 5: ↑4 and ↓1+3
Comments1

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Reading time31 min
Views145K


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

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.


Total votes 14: ↑10 and ↓4+6
Comments7

Погода в доме или бюджетный мониторинг CO2, PM2.5, температуры и влажности на ESP32 и Blynk

Reading time6 min
Views38K
По просьбах трудящихся в этой теме, решил сделать обзор-инструкцию, как можно сделать бюджетный измеритель CO2.

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

Также для максимальной простоты повторения, в обзоре выложу прошивку для ESP32 и проект Blynk.
Читать дальше →
Total votes 39: ↑39 and ↓0+39
Comments30

Теория и практика DIY-акустики: экспертные обзоры по проектированию, реверс-инжинирингу и компонентам

Reading time4 min
Views10K

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

Читать далее
Total votes 11: ↑9 and ↓2+7
Comments1

Делаем станцию мониторинга загрязнённости воздуха в домашних условиях

Reading time6 min
Views29K

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

Читать далее
Total votes 37: ↑34 and ↓3+31
Comments69

Кастомные хуки. Part 1

Reading time16 min
Views22K


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

Представляю вашему вниманию первую десятку пользовательских хуков.

Оглавление


Читать дальше →
Total votes 8: ↑6 and ↓2+4
Comments6

Настройка Webpack 5 с нуля

Reading time10 min
Views201K


Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

  • команда «webpack-dev-server» теперь выглядит как «webpack-serve»
  • отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
  • полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?


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

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

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.
Читать дальше →
Total votes 15: ↑15 and ↓0+15
Comments12

Визуализация сложных данных с использованием D3 и React

Reading time9 min
Views14K

Существует много возможныx вариантов реализации сложных графиков в ваших проектах. Я за несколько лет попробовал все возможные варианты. Сначала это были готовые библиотеки типа AmCharts 4. AmCharts сразу же оказался большим и неповоротливым. После этого были более гибкие и дружелюбные библиотеки, такие как Recharts. Recharts был поначалу очень хорош, но со временем сложные фичи создавались такими костылями, которые даже показывать стыдно, а какие-то фичи и вовсе были невозможны в реализации. Таким образом, я пришел к D3 и решаю на нем любые задачи, связанные с графиками. Иногда это занимает немного больше времени по сравнению с готовыми инструментами. Но остается одно неоспоримое преимущество – мы всегда знаем, что никогда не упремся в рамки и ваш код не захочется отправить в помойку через пару месяцев.


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


Total votes 10: ↑10 and ↓0+10
Comments14

Введение в 3D: основы Three.js

Reading time8 min
Views87K

Cложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. Кто только начинает вливаться в тему 3D — добро пожаловать под кат.


Total votes 11: ↑11 and ↓0+11
Comments9

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

Reading time3 min
Views97K

Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного


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


image


А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
Читать дальше →
Total votes 76: ↑69 and ↓7+62
Comments8

Полное руководство по HTML-атрибутам data-*

Reading time8 min
Views93K
Представляем вашему вниманию перевод статьи, посвящённой использованию атрибутов data-*. Это — атрибуты, которые можно применять для удобного хранения в стандартных HTML-элементах различной полезной информации. Эта информация, в частности, может применяться в JavaScript и CSS.


Читать дальше →
Total votes 46: ↑45 and ↓1+44
Comments18

Y-метод — действительно простой способ собрать кубик Рубика

Reading time7 min
Views321K

Введение


В статье рассматривается «Y-метод» сборки кубика Рубика — его легко понять и запомнить. Он основан всего на одной последовательности, которая называется «Y-движение». Поняв этот алгоритм, вы навряд ли забудете как собрать кубик самостоятельно.
Читать дальше →
Total votes 118: ↑117 and ↓1+116
Comments78

React Native — серебряная пуля для всех проблем? Как мы выбирали кросс-платформенный инструмент для Profi.ru

Reading time7 min
Views6.2K
Всем привет, меня зовут Геворг. Я Head of Mobile в Profi.ru. Хочу поделиться с вами историей нашего эксперимента с React Native. Расскажу, как мы оценивали плюсы и минусы разработки на React Native — в теории и на практике. Статья будет полезна тем, кто интересуется кросс-платформенной мобильной разработкой, но пока не решил, идти в эту сторону или нет.

Максимальное ускорение



Всё началось с того, что мы решили ускорить разработку в 10 раз на уровне компании. Поставили невыполнимую цель, чтобы выйти за привычный горизонт событий и попробовать новое. Все команды разработки Profi.ru взялись за эксперименты. На тот момент в компании было 13 нативных мобильных разработчиков, включая меня и двух тимлидов. Моя команда работала над двумя мобильными приложениями. В первом клиенты ищут специалистов, во втором — специалисты клиентов. Для меня этот период был непонятным и эмоционально напряжённым. По моим ощущениям, мы и так много делали, чтобы всё работало быстро.

Использовали общую архитектуру на всём проекте и следили за чистотой кода. Использовали генераторы, которые создают все файлы модулей. Всю бизнес-логику старались выносить на backend. Настроили CI/CD, а приложения покрыли E2E-тестами. За счёт всего этого стабильно релизили некоторые приложения раз в неделю. Я понятия не имел, как ускорить разработку даже в два раза. Куда уж в 10. Поэтому мы определили, что для нас важно.
Читать дальше →
Total votes 16: ↑15 and ↓1+14
Comments12
1
23 ...

Information

Rating
Does not participate
Location
Киев, Киевская обл., Украина
Registered
Activity