Обновить
512K+

JavaScript *

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

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

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



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

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

Время на прочтение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.4K

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

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

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

Время на прочтение7 мин
Охват и читатели108K
Аккордеон и 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.
Читать дальше →

Хорошее не бывает дешёвым. Но бывает бесплатным

Время на прочтение7 мин
Охват и читатели64K
В этой статье хочу рассказать о Rolling Scopes School – бесплатном курсе по JavaScript / фронтенду, который я прошла, и который мне очень понравился. Узнала я об этом курсе случайно, информации в сети о нём, на мой взгляд, немного, а курс отличный и заслуживает внимания. Думаю, эта статья будет полезна тем, кто пытается самостоятельно изучать программирование. Во всяком случае, если бы мне кто-то раньше рассказал об этом курсе, я точно была бы благодарна.
Читать дальше →

Какое главное отличие Dependency Injection от Service Locator?

Время на прочтение5 мин
Охват и читатели70K
Ха, какая изящная маскировка Service Locator-а под DI. Даже может показаться, что это DI! :-)

Это первый коммент к моей предыдущей публикации "Dependency Injection, JavaScript и ES6-модули". Спасибо коллеге symbix 'у за этот коммент, т.к. именно он стало причиной погружения в тонкости отличия одного от другого. Под катом мой ответ на вопрос в заголовке.


image


(КДПВ особого смысла не имеет и предназначена в первую очередь для визуального опознания этой публикации в ряду других)

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

Разработка анимированных фавиконов

Время на прочтение5 мин
Охват и читатели29K
Это — первое, что ищут взглядом, когда переключаются между вкладками браузера. Только что мы дали одно из возможных описаний того, что называется «фавиконом». Пространство на экране, которое занимает ярлык вкладки веб-страницы — это гораздо более ценный ресурс, чем многие думают. Если хорошо поработать с ярлыком, то он, помимо того, что будет продолжать играть роль идентификатора страницы, может стать чем-то вроде «доски объявлений», которая сообщает о том, что именно происходит на странице.


Фавикон
Читать дальше →

Примеры использования некоторых новых возможностей JavaScript

Время на прочтение7 мин
Охват и читатели30K
Автор материала, перевод которого мы сегодня публикуем, говорит, что новые возможности JavaScript, которые попали в стандарт ES2019, уже официально доступны в браузерах Chrome, Firefox и Safari, а также на платформе Node.js. Если нужно поддерживать устаревшие браузеры, то воспользоваться новшествами можно, транспилируя JS-код с помощью Babel. Здесь мы рассмотрим примеры использования некоторых новых возможностей JS.


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