В интернетах давно ведётся священная война между адептами Функционального Программирования и ООП, Redux и MobX, React и Angular. Многие годы я обходил её стороной, но теперь эта тема коснулась и меня.
Рубрика «javascript» - 75
Эксперимент: Redux от мира ООП
2020-03-15 в 9:22, admin, рубрики: flux, javascript, mobx, React, ReactJS, redux, vuejs, vuexReactjs, Material-UI with JSS. Краткий гайд
2020-03-15 в 3:59, admin, рубрики: css, javascript, jss, material-ui, ReactJSДоброго времени суток!
Итак, material-ui — reactJS's фрэймворк, предоставляющий готовые google решения для быстрой и довольно простой web разработки.
Material-UI достаточно крупная библиотека, где ключевой частью react компонентов и стилизации является @material-ui/core (целью ее использования должен быть немаленький проект).
Этот туториал не включает в себя продвинутое использование material-ui. Это мини мануал по стилизации компонентов.
Использовать material компоненты действительно не сложно, но есть нюансы использования стилизации. Об этом собственно и пойдет речь.
Рассмотрим следующее:
- JSS и немного о синтаксисе;
- Стилизация классовых react, material компонентов;
- Стилизация функциональных с использованием хуков react, material компонентов;
- Стилизация посредством styledComponent react, material компонентов;
- Провайдер theme;
- Переопределение material компонентов;
GO под кат!
Как использовать консоль JavaScript: выход за пределы console.log ()
2020-03-14 в 21:10, admin, рубрики: console.log, javascriptПривет! Представляю вашему вниманию перевод статьи «How to use the JavaScript console: going beyond console.log()» автора Yash Agrawal.
Один из самых простых способов отладки чего-либо в JavaScript — вывод материала с помощью console.log. Но есть много других методов, предоставляемых консолью, которые могут помочь улучшить отладку.
Давайте начнем.
Самым базовым вариантом использования является вывод строки или группы объектов JavaScript. Довольно просто,
console.log('Is this working?'); Теперь представьте сценарий, когда у вас есть куча объектов, которые вам нужно вывести в консоль.
const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };Самый интуитивно понятный способ вывода просто console.log (variable) несколько раз. Проблема становится более очевидной, когда мы видим, как оно отображается в консоли.
Как видите, имена переменных не видны, что не очень удобно. Это можно решить объединив все переменные в единый console.log ({foo, bar}). Это также уменьшает количество строк console.log в нашем коде.
Читать полностью »
Это мог быть очередной JavaScript-фреймворк
2020-03-14 в 6:47, admin, рубрики: framework, javascript, node.js, nodejs, npm, TypeScript, ПрограммированиеПрошлым летом, в процессе подготовки статьи для Хабра, я не поленился упаковать свой шаблон для бэкэнд-приложений на Node.js в npm-пакет, сделав из него cli-утилиту для быстрого старта.
Никаких надежд на то, что этим пакетом будет пользоваться кто-то, кроме меня, не было изначально. Однако, когда я решил обновить шаблон, внедрив в него нужные мне фичи, я обратил внимание на то, что у npm-пакета есть несколько десятков скачиваний в неделю, а у проекта на гитхабе 12 звёзд. Поставленные по доброте хорошими людьми, наверняка, чтобы поддержать меня, а не проект. Всего 12 звёзд, но мне этого хватило, чтобы решить, что karcass я буду развивать так, как будто он нужен не только мне.
Несмотря на то, что изначально я решил сделать легковесный фреймворк для бэкэнд-приложений, в процессе разработки мне удалось себя убедить в том, что этот велосипед не нужен. И что karcass должен стать не фреймворком, а универсальным инструментом для создания приложений из шаблонов.
Debouncing с помощью React Hooks
2020-03-13 в 13:52, admin, рубрики: hooks, javascript, React, ReactJS, переводСегодня я собираюсь показать вам, как создать хук useDebounce, который позволяет супер-просто отложить вызовы АПИ, что бы они не происходили слишком часто.
Так же я создал демо, которое использует наш хук. Оно ищет по АПИ Marvel Comics и хук useDebounce позволяет избежать обращений к серверу на каждое нажатие клавиши.
Малоизвестные, но популярные JS-фреймворки для фронтенда
2020-03-13 в 9:30, admin, рубрики: aurelia, ember, Ember.js, javascript, mithril, preact, riot, svelte, SvelteJs, Блог компании RUVDS.com, разработка, Разработка веб-сайтов, фреймворкиНе так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.
Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.
Читать полностью »
Когда фронтенд-разработчику стоит перейти с React на Vue, а когда это усложнит разработку
2020-03-13 в 8:40, admin, рубрики: javascript, Mail.Ru Cloud Solutions, React, ReactJS, vue.js, vuejs, web-разработка, Блог компании Mail.Ru Group, Разработка веб-сайтов
Если вы пытаетесь разобраться, какой из этих двух замечательных фреймворков выбрать, читайте мнение сторонника Vue по этому вопросу, которое я перевел и дополнил.
Переведено при поддержке облачной платформы Mail.ru Cloud Solutions.
Читать полностью »
10 отличных Github репозиториев, которые должен знать каждый веб-разработчик
2020-03-12 в 10:43, admin, рубрики: github, javascript, web-разработка, обучение, Разработка веб-сайтов, репозитории, Учебный процесс в ITКроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного
Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.
А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
Сила PWA: Система видеонаблюдения с нейросетью в 300 строк JS-кода
2020-03-12 в 10:13, admin, рубрики: cctv, Google API, javascript, ml, pwa, web components, машинное обучение, Разработка веб-сайтов, разработка мобильных приложенийПривет!
Веб-браузеры медленно но верно реализуют большинство функций операционной системы, и остается все меньше причин разрабатывать нативное приложение, если можно написать веб-версию (PWA). Кроссплатформенность, богатое API, высокая скорость разработки на TS/JS, и даже производительность движка V8 — все идет в плюс. Браузеры уже давно умеют работать с видеопотоком и запускать нейронные сети, то есть мы имеем все компоненты для создания системы видеонаблюдения с распознаванием объектов. Вдохновленный этой статьей, я решил довести демо-пример до уровня практического применения, чем и хочу поделиться.
Приложение записывает видео с камеры, периодически отправляя кадры на распознавание в COCO-SSD, и если обнаружен человек — фрагменты видеозаписи порциями по 7 секунд начинают отправляться на указанный емейл через Gmail-API. Как и во взрослых системах — ведется предзапись, то есть мы сохраняем один фрагмент до момента детекции, все фрагменты с детекцией, и один после. Если интернет недоступен, или возникает ошибка при отправке — видеозаписи сохраняются в локальной папке Downloads. Использование емейла позволяет обойтись без серверной части, мгновенно оповестить хозяина, а если злоумышленник завладел устройством и взломал все пароли — он не сможет удалить почту у получателя. Из минусов — перерасход трафика за счет Base64 (хотя для одной камеры вполне хватает), и необходимость собирать итоговый видеофайл из множества емейлов.
Проблемы возникли следующие:
Читать полностью »
Докеризация приложения, построенного на базе React, Express и MongoDB
2020-03-12 в 9:30, admin, рубрики: docker, javascript, mongodb, Блог компании RUVDS.com, разработка, Разработка веб-сайтовАвтор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как упаковывать в контейнеры Docker веб-приложения, основанные на React, Express и MongoDB. Здесь будут рассмотрены особенности формирования структуры файлов и папок таких проектов, создание файлов Dockerfile и использование технологии Docker Compose.
