Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

268,19
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Яндекс: умный дом по-взрослому

Время на прочтение9 мин
Охват и читатели209K


Недавно компания Яндекс запустила свою систему «умного дома». Нам предлагают купить недорогие работающие по Wi-Fi устройства: адаптер в розетку, лампочку и ИК пульт. Интересно, что у разработчиков «умных» устройств появилась возможность создать свои навыки «умного дома», это позволит подключить девайсы к системе Яндекса и управлять ими голосом через Алису. В списках навыков появляется всё больше новых брендов. Алиса прекрасно понимает русскую речь, что делает ее безусловным лидером среди голосовых ассистентов на российском рынке.
Однако, не всё так гладко…
Читать дальше →

Переосмысление deepClone

Время на прочтение5 мин
Охват и читатели7.8K
Как известно в JavaScript объекты копируются по ссылке. Но иногда требуется сделать глубокое клонирование объекта. Многие js библиотеки предлагают для этого случая свою реализацию функции deepClone. Но, к сожалению, в большинстве библиотек не учитываются несколько важных вещей:

  • В объекте могут лежать массивы и их лучше копировать как массивы
  • В объекте могут быть поля с символом в качестве ключа
  • У полей объекта бывают дескрипторы отличные от дефолтного
  • В полях объекта могут лежать функции и их тоже нужно клонировать
  • У объекта наконец бывает прототип отличный от Object.prototype
Читать дальше →

Github actions и кросс-платформенное построение

Время на прочтение3 мин
Охват и читатели5.2K

Привет, Хабр. Это статья о том как настроить построение на всех платформах с помощью github actions.

Читать дальше →

Какого цвета ваша функция?

Время на прочтение13 мин
Охват и читатели31K

Не знаю как вам, но для меня нет лучшего начала дня, чем потрепаться о программировании. Кровь кипит при виде удачной критики одного из "жирных" языков, которым пользуются плебеи, мучаясь с ним на протяжении рабочего дня между стыдливыми посещениями StackOverflow.


(Тем временем, вы и я используем только самый просветленный язык и отточенные инструменты, разработанные для ловких рук таких мастеров, как мы).


Конечно, как автор проповеди, я иду на риск. Вам может нравиться язык, который я высмеиваю! Безрассудный памфлет мог бы неосторожно привлечь в мой блог яростную толпу черни с вилами и факелами наперевес.


Чтобы защититься от праведного огня и не оскорбить ваши (вероятно деликатные) чувства, я буду рассказывать о языке...

Читать дальше →

Создание приложения для Slack с использованием функций 8base

Время на прочтение8 мин
Охват и читатели5.1K
image

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

В этой статье мы создадим Slack бота, который публикует обновления при создании заказа на придуманной нами e-commerce платформе, которой мы управляем.

E-commerce платформа — это бессерверное приложение, созданное с использованием 8base. В этой статье мы будем использовать функции 8base для прослушивания событий Create в модели данных с использованием триггеров.

Триггер это тип функции, которая запускается в ответ на событие мутации данных: создание, обновление или удаление объекта. 8base предоставляет два типа триггеров в зависимости от того, хочет ли разработчик выполнить функцию до или после изменения данных: trigger.before и trigger.after.

Вам понадобятся


  • Базовое понимание React и Node.js. Перед началом работы убедитесь, что у вас установлены Node и npm / yarn.
  • Мы будем использовать некоторые GraphQL запросы в проекте, так что пригодится знакомство с GraphQL.
  • Создайте учетную запись 8base (если вы еще этого не сделали), посетив их веб-сайт.

Подготовка среды 8base


Создайте аккаунт или войдите в 8base. Для новых учетных записей 8base предоставляет бесплатный 30-дневный доступ.
Читать дальше →

14 советов по написанию чистого React-кода. Часть 2

Время на прочтение11 мин
Охват и читатели14K
Сегодня мы публикуем вторую часть материала о написании чистого кода при разработке React-приложений. Вот ещё несколько полезных советов.



Читать первую часть
Читать дальше →

Как зеленый джуниор свой hot-reloader писал

Время на прочтение7 мин
Охват и читатели9.1K

Предыстория


Пару строк обо мне для общего понимания уровня автора и решаемой проблемы.
Меня зовут Евгений и я веб-разработчик зеленый junior frontend developer.
Еще какой-то год назад я работал в совершенно другой сфере и только в теории задумывался о смене профессии, но примерно в декабре 2018 нашел свое и начал действовать.
Примерно через полгода тотального обучения я устраиваюсь работать frontend-программистом. За плечами обучение фундаментальным вещам(мне хочется так думать), js, взаимодействие с DOM, react+redux. HTML и CSS самый минимум+ общее понимание о bootstrap и сборке, работа с git, командной строкой.
Помимо теории сделано пара учебных проектов, в том числе чат на react+redux, а так же пара попыток реализации каких-то своих задумок.
В общем, такой себе стандартный современный джентельменский набор для начинающего front'a.
Первые полторы недели настраиваю виртуальную машину, там куча всего и все мне незнакомо и непонятно.
По ходу дела знакомлюсь с новыми инструментами и технологиями: с базами данных(и ставлю себе очередную закладку в список «выучить»), putty, wincsp и пр.
Успешно прохожу эту полосу препятствий и перехожу к фронту.

Предисловие


Уже написав свой релоадер и эту статью, я нашел аналоги в том числе на Хабре. Однако все-таки решил опубликовать свой велосипед.

Начало


У нас довольно большой проект, доставшийся в наследство, написанный на angularJS, со всеми его прелестями. Мне после React'а он показался динозавром, но ничего, покупаю курсы по angularjs, быстро въезжаю и начинаю приносить пользу.

Положительное впечатление- проект написан хорошо, людьми с явно прямыми руками. Переменные с отличным понятным именованием, строение везде одинаковое и в целом вся логика весьма доступно и просто выражена.

Но и минусов хватает.
Читать дальше →

fform: React & JSONSchema — максимальная гибкость

Время на прочтение2 мин
Охват и читатели4.8K

fform


Flexibile form (fform) — построитель форм с минимальной избыточностью кода, при этом максимально гибкий и расширяемый. Используемый стэк технологий: React (v16), Redux (опционально), JSONSchema, TypeScript. Основная идея — максиально возможное повторное использование схем, компонентов и функций.

Читать дальше →

14 советов по написанию чистого React-кода. Часть 1

Время на прочтение12 мин
Охват и читатели31K
Написание чистого кода — это навык, который становится обязательным на определённом этапе карьеры программиста. Особенно этот навык важен тогда, когда программист пытается найти свою первую работу. Это, по существу, то, что делает разработчика командным игроком, и то, что способно либо «завалить» собеседование, либо помочь его успешно пройти. Работодатели, принимая кадровые решения, смотрят на код, написанный их потенциальными сотрудниками. Код, который пишет программист, должен быть понятен не только машинам, но и людям.



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

Не попадайте в ловушку преждевременной оптимизации

Время на прочтение7 мин
Охват и читатели20K
Дональд Кнут однажды сказал слова, ставшие впоследствии знаменитыми: «Настоящая проблема заключается в том, что программисты, не там, где нужно, и не тогда, когда нужно, тратят слишком много времени на заботу об эффективности. Преждевременная оптимизация — корень всех зол (или, по крайней мере, большей их части) в программировании».



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

Никита Дубко о конференциях, синдроме самозванца и подготовке докладов 

Время на прочтение14 мин
Охват и читатели6.7K
Никита Дубко — разработчик интерфейсов в компании Яндекс. Помимо работы в Яндексе, Никита участвует в организации англоязычной конференции CSS-Minsk-JS и митапов MinskCSS и MinskJS. На FrontendConf на РИТ++ 2019 Никита выступал с докладом «Алиса, пойдем во фронтенд». В нём описан эксперимент по созданию голосового навыка от Алисы от разработчика, который раньше с ней не работал. Доклад интересен тем, что за время, пока выступает спикер, легко создать такой же навык. Рассказ об Алисе зрители выбрали лучшим на всей конференции.



За плечами Никиты десятки выступлений, на каждое из которых уходят недели. Во время подготовки он изучает много нового материала, тренирует выступления на камеру, среди коллег и друзей, оттачивает сценарий и слайды. Поэтому его доклады интересны, увлекательны и заслуженно получают высшие оценки слушателей. О подготовке к докладам, изменениях в жизни, синдроме самозванца, а также о том как выступать на конференциях, чтобы получить работу в Яндекс, в интервью Никиты Дубко. Это не совсем обычное интервью, а текстовая расшифровка подкаста Frontend Weekend, который ведёт Андрей Смирнов. Что из этого получилось, читайте под катом.
Читать дальше →

9 лучших опенсорс находок за август 2019

Время на прочтение2 мин
Охват и читатели51K

Доброй осени, дамы и господа. Подготовил для вас подборку самых интересных находок из опенсорса за август 2019.


За полным списком новых полезных инструментов, статей и докладов можно обратиться в мой телеграм канал @OpensourceFindings (по ссылке зеркало, если не открывается оригинал).


В сегодняшнем выпуске.
Технологии внутри: Python, Rust, JavaScript, Go.
Тематика: веб разработка, администрирование, инструменты разработчика.

Читать дальше →

Zabbix + Voximplant: мониторинг со звонками, или как перестать беспокоиться и быстро это настроить

Время на прочтение5 мин
Охват и читатели10K
Zabbix – умный, гибкий, кастомизируемый – умеет все. Или почти все. Было бы странно, если бы он не мог подружиться с облачной телефонией, особенно когда у последней есть удобное HTTP API – пользуйся на здоровье. Сегодня мы наглядно покажем, как настроить Zabbix для звонков-уведомлений через Voximplant, что может быть очень кстати в экстренном случае («нет времени объяснять, нужно звонить – боевой сервер упал только что»).

За основу взят кадр из х/ф «Матрица» (The Matrix (1999), Warner Bros.)
Внимание: туториал подразумевает, что у вас уже есть работающий Zabbix и настроен Zabbix frontend. Первичная установка Zabbix не является целью этой статьи, любопытные/нуждающиеся в таком руководстве могут посмотреть официальную документацию и/или погуглить.

Читать дальше →

Ближайшие события

Рассказ о том, как популярная JavaScript-библиотека начала выводить в терминал рекламу

Время на прочтение3 мин
Охват и читатели20K
В пакете Standard, который представляет собой руководство по стилю JavaScript, линтер, и средство для автоматического исправления кода, реализовано то, что, по всей видимости, можно назвать первой рекламной системой для JavaScript-библиотек.

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


Рекламный баннер в терминале

Эта реклама создана средствами нового проекта — Funding. Им занимаются разработчики библиотеки Standard. Библиотека Funding была включена в Standard 14.0.0. Эта версия Standard вышла 19 августа. Именно тогда реклама и начала появляться в терминалах.
Читать дальше →

Мой опыт разработки на Playcanvas

Время на прочтение4 мин
Охват и читатели9.5K

Существуют ли среди читателей люди, которые хотя бы краем уха слышали, что есть некий 3D движок для разработки WebGL приложений с редактором, похожим на Unity, только в браузере? Тема крайне непопулярная, но я стал одним из таких людей почти 2 года назад. И теперь мне захотелось поделиться накопленным опытом, скорее даже моими разочарованиями. В статье пойдёт речь о проблемах, с которыми Вам придётся столкнуться, если начнёте пользоваться этим редактором. Сразу оговорюсь, что не буду сравнивать с другими существующими 3D движками вроде Three.js или Babylon.js, коснусь только самого редактора и скриптового API.

Читать дальше →

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Время на прочтение7 мин
Охват и читатели106K
Аккордеон и faq

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

  1. Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
  2. Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
  3. Будет доступно управление элементами с клавиатуры и других устройств.
  4. Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
  5. Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
  6. Работает при выключенном javascript.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №378 (26 августа — 1 сентября 2019)

Время на прочтение3 мин
Охват и читатели11K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


Читать дальше →

JustCode — скоростной браузер для бюджетных компьютеров и планшетов на Windows

Время на прочтение7 мин
Охват и читатели37K


Предыстория


У меня есть убогий дешевый планшет на Windows 10 с одним гигабайтом оперативной памяти и 16 гигабайтами места, в пределах которого установлен Windows 10. Чтобы Windows 10 мог хоть как-то скачивать и устанавливать обновления — я скрутил размер файла подкачки в ноль и файл pagefile.sys перестал занимать драгоценные гигабайты.

После этого я с удивлением обнаружил, что для просмотра более-менее крупных сайтов на этом планшете невозможно использовать ни Chrome, ни Internet Explorer, ни даже старую Opera 12. Все они пытаются пару раз показать сайт, перезагружают его снова (он, по видимости, не влезает в настоящую оперативную память без файла подкачки) и выдают после второй попытки загрузки сообщение о неудаче.

Почему при размере исходного HTML-кода сайта в несколько сотен килобайт — компьютер с гигабайтом оперативной памяти не может его отрисовать?
И почему же?

Как управлять React Data Grid через Redux

Время на прочтение6 мин
Охват и читатели7.3K

Это продолжение предыдущей статьи: Зачем писать свой React Data Grid в 2019


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


Возьмём React-компоненту, которая отображает данные в виде строк и колонок (Data Grid, грид). Каким функционалом у нее можно управлять? Составом колонок и строк. Выделением. Хорошо бы и прокруткой данных.


image

Читать дальше →

Заменяют ли хуки в React Redux?

Время на прочтение13 мин
Охват и читатели21K
С тех пор, как в React появились хуки, возникает много вопросов о том, способны ли они заменить Redux.

Я полагаю, что хуки и Redux имеют мало общего между собой. Хуки не дают нам неких новых удивительных возможностей по работе с состоянием. Они, вместо этого, расширяют API, позволяющие делать в React то, что в нём уже было возможным. Однако API хуков сделал гораздо удобнее работу со встроенными возможностями React по управлению состоянием. Оказалось, что новыми возможностями по работе с состоянием пользоваться легче, чем старыми, которые имелись в компонентах, основанных на классах. Теперь я гораздо чаще, чем раньше, использую средства по работе с состоянием компонентов. Естественно, поступаю я так лишь тогда, когда это уместно.



Для того чтобы объяснить моё отношение к хукам React и к Redux, мне хотелось бы сначала рассказать о том, в каких ситуациях обычно прибегают к использованию Redux.
Читать дальше →