Pull to refresh
7
Karma
0
Rating
Сергей Маковеев @sergeymakoveev

Web-developer

Еще один способ использовать SVG в React. На этот раз удобный

CSS *JavaScript *HTML *ReactJS *
Sandbox

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения непосредственно в html-разметку. Хотя на самом деле есть еще один способ. И он удобный.

Читать далее
Total votes 12: ↑10 and ↓2 +8
Views 15K
Comments 15

JavaScript: интересные возможности AbortController

Timeweb Cloud corporate blog JavaScript *
Translation


Привет, друзья!


Представляю вашем вниманию адаптированный и дополненный перевод этой замечательной статьи.


AbortController и AbortSignal предоставляют возможность применения некоторых интересных паттернов, рассмотрению которых и посвящена данная статья.


Однако давайте начнем с типичного примера использования AbortController.

Читать дальше →
Total votes 15: ↑14 and ↓1 +13
Views 6.2K
Comments 1

React hooks, как не выстрелить себе в ноги. Часть 1: работа с состоянием

OTUS corporate blog Programming *ReactJS *

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

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

Читать далее
Total votes 18: ↑12 and ↓6 +6
Views 20K
Comments 7

Функциональные практики и frontend: монады и функторы

БКС Мир Инвестиций corporate blog Mathematics *Functional Programming *
Всем привет! Меня зовут Дмитрий Руднев, я frontend-разработчик в компании БКС. Начинал я свой путь с верстки интерфейсов различной сложности и всегда уделял повышенное внимание именно интерфейсу: насколько пользователю будет комфортно с ним взаимодействовать, смог ли я донести до пользователя тот самый интерфейс, каким его задумал дизайнер.



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

Итак, начнем с обработки состояний. Заодно расскажу, причем тут вообще монады и функторы.
Читать дальше →
Total votes 36: ↑28 and ↓8 +20
Views 9K
Comments 13

ТайпСкрип: Ох уж эта весёлая система типов

Website development *Programming *TypeScript *

Здравствуйте, меня зовут Дмитрий Карловский и недавно я, вместе с Артуром Мукминовым, проводил воркшоп, где показывал как разрабатывать сложные типофункции через тестирование. Это 2 часа сурового программирования на типах. Так что в качестве тизера, ловите разбор курьёзов тайпскриптовой системы типов.


Читать дальше →
Total votes 45: ↑40 and ↓5 +35
Views 14K
Comments 16

Производительность TypeScript

VK corporate blog High performance *JavaScript *Programming *TypeScript *
Tutorial
Translation

Есть лёгкие способы конфигурирования TypeScript для ускорения компиляции и редактирования. И чем раньше их внедрить, тем лучше. Также есть ещё некоторые популярные подходы к изучению причин медленной компиляции и редактирования, некоторые исправления и распространенные способы помочь TypeScript-команде в расследовании проблем.
Читать дальше →
Total votes 37: ↑37 and ↓0 +37
Views 14K
Comments 4

Schedulers в RxJS

Website development *JavaScript *Angular *ReactJS *TypeScript *

Что вы знаете о Schedulers в RxJS? Они скрывают от разработчиков работу с контекстом выполнения Observable. Как те эльфы-домовики из Гарри Поттера, которые выполняют всю черную работу в Хогвартсе, а о них никто даже и не слышал. Давайте исправим это и узнаем о них чуть больше.

Читать далее
Total votes 5: ↑5 and ↓0 +5
Views 9.4K
Comments 12

Typescript: Объединение типов в глубину

TypeScript *
Translation

Пошаговое руководство о том, как в TypeScript написать такой generic-тип, который рекурсивно объединяет произвольные вложенные key-value структуры данных. Это может оказаться несколько более сложной задачей, чем вы думаете.

Подробнее
Total votes 13: ↑13 and ↓0 +13
Views 16K
Comments 28

Вывод типов в TypeScript с использованием конструкции as const и ключевого слова infer

RUVDS.com corporate blog Website development *JavaScript *TypeScript *
Translation
TypeScript позволяет автоматизировать множество задач, которые, без использования этого языка, разработчикам приходится решать самостоятельно. Но, работая с TypeScript, нет необходимости постоянно использовать аннотации типов. Дело в том, что компилятор выполняет большую работу по выводу типов, основываясь на контексте выполнения кода. Статья, перевод которой мы сегодня публикуем, посвящена достаточно сложным случаям вывода типов, в которых используется ключевое слово infer и конструкция as const.


Читать дальше →
Total votes 41: ↑40 and ↓1 +39
Views 37K
Comments 4

Продвинутый TypeScript

Конференции Олега Бунина (Онтико) corporate blog Website development *JavaScript *Programming *TypeScript *
Фридайвинг — ныряние на глубину без акваланга. Ныряльщик ощущает на себе закон Архимеда: он вытесняет некоторый объём воды, который выталкивает его обратно. Поэтому первые несколько метров даются тяжелее всего, но потом сила давления толщи воды над тобой начинает помогать двигаться глубже. Этот процесс напоминает изучение и погружение в системы типов TypeScript — по мере погружения становится немного легче. Но надо не забыть вовремя вынырнуть.


Фотография с сайта One Ocean One Breath.

Михаил Башуров (saitonakamura) — Senior Frontend Engineer в компании WiseBits, фанат TypeScript и фридайвер-любитель. Аналогии изучения TypeScript и ныряния на глубину не случайны. Михаил расскажет, что такое discriminated unions, как использовать вывод типов, зачем нужна номинальная совместимость и брендирование. Задержите дыхание и погружайтесь.
Total votes 33: ↑30 and ↓3 +27
Views 21K
Comments 3

Асинхронное программирование (полный курс)

Website development *JavaScript *Programming *Node.JS *Studying in IT
Tutorial

Методы асинхронного программирования


Асинхронное программирование за последнее время стало не менее развитым направлением, чем классическое параллельное программирование, а в мире JavaScript, как в браузерах, так и в Node.js, понимание его приемов заняло одно из центральных мест в формировании мировоззрения разработчиков. Предлагаю вашему вниманию целостный и наиболее полный курс с объяснением всех широко распространенных методов асинхронного программирования, адаптеров между ними и вспомогательных проемов. Сейчас он состоит из 23 лекций, 3 докладов и 28 репозиториев с множеством примеров кода на github. Всего около 17 часов видео: ссылка на плейлист.

Читать дальше →
Total votes 48: ↑48 and ↓0 +48
Views 87K
Comments 17

Пишем чистый и масштабируемый JavaScript-код: 12 советов

RUVDS.com corporate blog Website development *JavaScript *
Tutorial
Translation
Язык JavaScript родом из раннего веба. Сначала на нём писали простые скрипты, которые «оживляли» страницы сайтов. Теперь же JS превратился в полноценный язык программирования, который можно использовать даже для разработки серверных проектов.

Современные веб-приложения сильно зависят от JavaScript. Особенно это касается одностраничных приложений (Single-Page Application, SPA). С появлением библиотек и фреймворков, таких как React, Angular и Vue, JavaScript стал одним из основных строительных блоков веб-приложений.



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

Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по написанию чистого JavaScript-кода. Он говорит, что статья рассчитана на JS-программистов с любым уровнем подготовки. Но особенно полезной она будет для тех, кто знаком с JavaScript хотя бы на среднем уровне.
Читать дальше →
Total votes 49: ↑37 and ↓12 +25
Views 32K
Comments 21

Чем функциональные компоненты React отличаются от компонентов, основанных на классах?

RUVDS.com corporate blog Website development *JavaScript *ReactJS *
Translation
Чем функциональные компоненты React отличаются от компонентов, основанных на классах? Уже довольно давно традиционный ответ на этот вопрос звучит так: «Применение классов позволяет пользоваться большим количеством возможностей компонентов, например — состоянием». Теперь, с появлением хуков, этот ответ больше не отражает истинное положение дел.

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



Я, в любом случае, не рекомендую переписывать существующие компоненты с применением новых технологий если на то нет веских причин, и если вы не против оказаться в числе тех, кто раньше всех начал этими технологиями пользоваться. Хуки — это всё ещё новая технология (такая же, какой была библиотека React в 2014 году), и в руководства по React ещё не попали некоторые «передовые методики» их применения.
Читать дальше →
Total votes 37: ↑35 and ↓2 +33
Views 85K
Comments 3

REST страсти по 200

System Analysis and Design *API *
Recovery mode


Давно я хотел написать эту статью. Все думал — с какой стороны зайти правильнее? Но, вдруг, недавно, на Хабре появилась подобная статья, которая вызвала бурю в стакане. Больше всего меня удивил тот факт, что статью начали вбивать в минуса, хотя она даже не декларировала что-то, а скорее поднимала вопрос об использовании кодов ответа web-сервера в REST. Дебаты разгорелись жаркие. А апофеозом стало то, что статья ушла в черновики… килобайты комментариев, мнений и т.д. просто исчезли. Многие стали кармо-жертвами, считай, ни за что :)

В общем, именно судьба той статьи побудила меня написать эту. И я очень надеюсь, что она будет полезна и прояснит многое.

Предупреждаю, все ниже написанное является реальным опытом, а не когнитивной эквилибристикой. И так, погнали.
Читать дальше →
Total votes 79: ↑68 and ↓11 +57
Views 37K
Comments 115

REST? Возьмите тупой JSON-RPC

PHP *JavaScript *API *
В последнее время на Хабре разгорелось много споров по поводу того, как правильно готовить REST API.

Вместо того, чтобы бушевать в комментариях, подумайте: а нужен ли вам REST вообще?
Что это — осознанный выбор или привычка?

Возможно, именно вашему проекту RPC-like API подойдет лучше?
Читать дальше →
Total votes 233: ↑229 and ↓4 +225
Views 156K
Comments 255

Основы React (текстовый учебник, 2-е издание)

JavaScript *ReactJS *
Tutorial

Прошло 2.5 года после публикации первой версии подробного туториала по основам React. За это время gitbook насчитал 250 000+ уникальных посетителей.


book cover


Под катом подробнее об учебнике и список изменений.

Читать дальше →
Total votes 36: ↑35 and ↓1 +34
Views 50K
Comments 15

Практика применения прокси-объектов в JavaScript

RUVDS.com corporate blog Website development *JavaScript *
Translation
Возможно, вы слышали о том, что в JavaScript ES6 появились новые объекты — так называемые прокси. Тем, кто знает о том, что такое прокси-объекты, и умеет с ними работать, они могут принести немалую пользу. Сегодня мы публикуем перевод материала, который направлен на то, чтобы объяснить всем желающим особенности работы с прокси-объектами JS на множестве примеров.

image

Также откройте в новой вкладке наш предыдущий пост: JavaScript-прокси: и красиво, и полезно
Читать дальше →
Total votes 26: ↑25 and ↓1 +24
Views 27K
Comments 15

Мышление в стиле Ramda: Частичное применение (каррирование)

JavaScript *Functional Programming *
Tutorial
Translation
Данный пост — это третья часть серии статей о функциональном программировании под названием «Мышление в стиле Ramda».

1. Первые шаги
2. Сочетаем функции
3. Частичное применение (каррирование)
4. Декларативное программирование
5. Бесточечная нотация
6. Неизменяемость и объекты
7. Неизменяемость и массивы
8. Линзы
9. Заключение

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

В том посте мы рассмотрели простые конвееры функций, которые принимают лишь один аргумент. Но что если мы хотим использовать такие функции, которые принимают больше одного аргумента?
Читать дальше →
Total votes 10: ↑9 and ↓1 +8
Views 10K
Comments 0

Вы знаете, что такое трансдьюсеры

JavaScript *Functional Programming *

Трансдьюсеры были анонсированы еще в далеком 2014, с тех пор по ним было написано немалое количество статей (раз, два), но ни после одной статьи я не мог сказать, что понимаю трансдьюсеры кристально ясно. После каждой статьи у меня возникало ощущение, что я приблизительно понимаю что-то сложное, но оно все равно оставалось сложным. А потом однажды в голове что-то щелкнуло: "я ведь уже видел этот паттерн, только он назывался иначе!"

Читать дальше →
Total votes 59: ↑55 and ↓4 +51
Views 43K
Comments 98

Стилизация React-компонентов

Developer Soft corporate blog JavaScript *ReactJS *
Tutorial
Sandbox

image


Введение


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


  • Использование React предполагает, что View нашего Web-приложения разбито на компоненты, и каждый из них, так или иначе, отвечает за собственное отображение и функциональность.


  • Подразумевается, что будут использованы современные инструменты разработки вроде babel, webpack, browserify, gulp, post- pre- css-процессоры.

Читать дальше →
Total votes 28: ↑27 and ↓1 +26
Views 85K
Comments 10

Information

Rating
Does not participate
Location
Пенза, Пензенская обл., Россия
Date of birth
Registered
Activity