Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.
Сегодня я хочу поговорить про React и JSX. Почти в каждом проекте мы пишем JSX шаблоны, которые рендерятся в зависимости от условий. Делаем ли мы это правильно? Это перевод оригинальной статьи.
Привет, друзья!
В этом небольшом туториале я покажу вам, как разработать простой редактор кода на React.
Обратите внимание: туториал рассчитан, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в нем что-нибудь интересное для себя.
Функционал нашего приложения будет следующим:
HTML, CSS и JavaScript, соответственно;iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.Если вам это интересно, прошу под кат.
В этой части мы разберем как и зачем строить модель при помощи треугольников. А также научимся не рисовать те части модели, которые не смотрят в камеру и не должны быть видны.
В данной статье вы познакомитесь с Marko.js актуальной на данный момент пятой версии. Пару лет назад на Хабре уже была отличная статья (за авторством apapacy) о том, как работает этот замечательный реактивный фреймворк, разработанный где-то в недрах eBay.
В своем комментарии (а это был далекий 2020 год) я предложил написать на Хабр статью, посвященную моему опыту работы с Marko, и вот - как с тем самым котом - время наконец пришло :-)
Перед новым годом по мере нарастания стресса на работе я стал проводить много времени в Твиттере.
Это было моё последнее пристанище после почти годовой деактивации Фейсбука, ВКонтакте и Инстаграма.
Автоматический статус ВК после отключения аккаунта хорошо передавал суть моего положения: «Я не могу жить и работать, пока в интернете есть страница с моим именем».
Твиттер я никогда не понимал, завел по рекомендации Ситника, и стал вести его осенью на английском языке. Подписывался только на коллег, узнал много интересного, но вскоре и он превратился в обычную соцсеть с болтовней, флиртом и сотнями друзей.
Но мне было стыдно удаляться и оттуда. Получится -- убежал отовсюду, оставив после себя пустое место. Соцсеть это всё-таки связь с людьми, и даже с потенциальными клиентами.
Привет! В этой статье я кратко объясню что такое localStorage в JavaScript, его особенности и расскажу как с ним работать.
Мы с друзьями любим играть в настольные игры, но не всегда под рукой оказываются громоздкие коробки с играми. Тут на помощь приходит смартфон. Раньше я написал игру Ну, этот, аналог коробочной игры Бум. Затем родилась идея игры с похожей механикой, но вместо слов - случайные фильмы с кинопоиска. В качестве основы проекта я взял SvelteKit. В статье расскажу об интересном функционале SvelteKit и быстром деплое на площадке Vercel.
Встречайте, О, кинчик!
В этой серии вы узнаете как собрать докер-образ приложения на Vue.js и как опубликовать его в GitHub Packages. Вот так. Вот в общем-то и... не всё... Одним GitHub Action, как это было для Spring Boot приложения, о котором я рассказывал тут, в этот раз обойтись не получится. Нужно ещё проделать некоторые манипуляции, о которых я и расскажу в данной статье.
Как получить контент веб-страницы, если по ссылке с именем хоста не получилось. Простым языком об использовании PHP с cURL на одном примере сайта с JavaScript-защитой.
В этой статье будут изложены основные идеи и показаны простые примеры для грамотной организации, скажем так — «репликационного» масштабирования проектов на фронтенде. То есть, само понятие масштабирования здесь будет рассматриваться скорее с той точки зрения и в одном из смыслов как это понимает бизнес, но, при этом, речь пойдет именно о технической стороне процесса, правда, сугубо в контексте браузерной клиентской части информационных систем. Ближе к реальной ситуации: предположим что ваша компания разрабатывает, условно — некий OLAP-продукт, и перед вами как фронтенд-разработчиком ставят задачи по развертыванию и поддержке более или менее сходных новых проектов фронтенда для разных заказчиков. После скандальной критической статьи о, имхо, сомнительных дурных современных подходах и тенденция в верстке веб-интерфейсов — моя карма на Хабре, наконец-то упала ниже нуля, а я, если честно, не очень хорошо понимаю правила игры, увидят ли эту статью читатели… Но, с другой стороны, готов изложить все просто «в стол», так как считаю что лучшая мотивация для написания чего-либо — это если «просто очень хочется написать», сформулировать, прежде всего — для себя самого.
Эта статья логично продолжает тематику первой статьи о модулях позволяющих сделать разработку фронтенда качественнее и эффективнее. Но если в первом материале речь шла, прежде всего, об замечательном атомарном тренде в вебдизайне и простом надежном способе доставки его в код компонентных фреймворков с помощью препроцессоров, построении простой кастомной библиотеки UI-компонент для единообразного оформления разных проектов, то новый пример станет немного сложнее — хочется сосредоточиться уже не на «внешних», «оформительских» моментах, а на функциональных и организационных. Для наглядной демонстрации практического применения изложенных в статье идей снова написаны примеры: небольшой модуль-библиотека (и документация к нему), а также использующий его проект, на этот раз с более актуальным стеком Vue3+TypeScript/Vuex4/VuePress2. В отличие от более примитивной либы из первой статьи, этот модуль: 1) использует хранилище, то есть содержит состояние 2) может запускаться в полноценном режиме разработки, как будто это собственно уже сам конечный проект 3) поддерживает темизацию и локализацию. Пример модуля содержит совсем немного компонент и документация на новой версии VuePress, в отличие от первой версии модуля, не кастомизируется под фирменный стиль который предоставляет сама библиотека. Так сделано не только по причине лени и экономии времени, но, прежде всего, потому что кажется излишним — то что призваны продемонстрировать примеры — этого совсем не требует.
У YouTube есть возможность оставлять в комментариях временные метки для видео. Просто пишем в комментарии время в формате hh:mm:ss и YouTube сам превратит это в ссылку. Небезызвестный музыкальный сервис Soundcloud позволяет показывать комментарии к трэкам прямо на таймлайне. Так почему бы не сделать такое же в YouTube?!
"Ух-ты! Какая интересная задача! И оценка времени на разработку хорошая! ..."
2 часа спустя: "Какой же это ужас, ещё 10 редьюсеров создать, ещё 10 раз описать зависимости состояний. Типы, компоненты... Сколько же бесполезной рутины... Вот бы можно было писать только декларативную логику, всегда."
Если вам хоть отчасти близок текст выше, не переживайте, вы не одни такие. Я - человек который не один раз произнес сказаное выше.
Поэтому сегодня я поделюсь своими мыслями о том, как в моих глазах можно многое упростить, чтобы наконец начать получать хороший Developer Experience.
Меня зовут Евгений Подивилов, я фронтенд-разработчик в команде «Лайфстайл». Я разрабатываю раздел «Развлечения». В этом разделе можно купить билеты на мероприятия или забронировать столик в ресторане.
Многие недолюбливают бесконечные индикаторы загрузки, потому что по ним не видно реального прогресса выполнения задачи. Мне кажется, вывести какой-то спиннер пользователю и уведомить, что работа идет и результат ожидается, намного лучше, чем ничего.
Иногда спиннер вместо того, чтобы успокоить пользователя, тормозит и забирает больше ресурсов, чем сама задача. Про один такой индикатор я и расскажу.
Сегодня я хочу рассказать про один не очень популярный но очень классный паттерн в написании React приложений - Compound components.
Что это вообще такое
Compound components это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.
Самый наглядный пример такого подхода, который знают все фронты - это select с его option в обычном HTML.
Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.
Сегодня хочу поговорить про то как НЕ надо учить TypeScript. Какие ошибки чаще всего делают новички и почему TypeScript может так сильно раздражать? Это перевод оригинальной статьи.
Привет, друзья!
Продолжаю исследовать возможности по работе с медиа, предоставляемые современными браузерами, и в этой статье хочу рассказать вам о возможности захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов.
Мы разработаем простое приложение для сведения аудио и видео со следующим функционалом:
WebM — превью сведенного контента и ссылка для его скачивания.В качестве фреймворка для фронтенда я буду использовать React, однако все функции по работе с медиа будут автономными (сигнатура этих функций будет framework agnostic), так что вы можете использовать любой другой фреймворк или ограничиться чистым JavaScript.
О том, как разработать приложение для создания аудиозаметок, можно прочитать в этой статье, а о том, как разработать приложение для захвата и записи экрана — в этой.
Если вам это интересно, прошу под кат.
В данном цикле статей мы рассмотрим задачу синхронизации состояния react-приложения между окнами. В качестве подопытного у нас будет приложение на Electron, работающее в offline/online-режимах, которое также может запускаться в PWA-режиме.
Выучить React недостаточно для профессиональной разработки больших приложений. Для этого есть две основные причины. Первая, у React есть огромная экосистема модулей, в которой необходимо разбираться. Вторая, эта экосистема меняется каждый год. Поэтому может быть не просто разобраться во всех тонкостях применения React, и эта статья может стать путеводителем в увлекательный мир современного React.
К этой статье прилагается GitHub репозиторий и Демо приложение, которые демонстрируют работу упомянутых в этой стать модулей (и некоторых других). GitHub репозиторий можно использовать в качестве boilerplate для вашего следующего профессионального приложения.
Всем привет! Сегодня я расскажу о том, как мы тестируем Rest API в SM 2.0 с помощью инструмента Postman.
И сделаю это на примере реальной задачи — посмотрим сценарий пользователя (как оформляется заказ у нас на сайте), посмотрим, как это работает все изнутри, пару слов скажу о REST-запросах, расскажу про Postman. Далее мы перейдём в сам инструмент, посмотрим окружение, интерфейс, далее разберём исходные данные и приступим к решению самой задачи, и в конце немного расскажу про автотесты.