Обновить
512K+

JavaScript *

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

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

Книга «Эффективный TypeScript: 62 способа улучшить код»

Время на прочтение8 мин
Охват и читатели14K
imageПривет, Хаброжители! Книга Дэна Вандеркама окажется максимально полезена тем, кто уже имеет опыт работы с JavaScript и TypeScript. Цель этой книги — не обучать читателей пользоваться инструментами, а помочь им повысить свой профессиональный уровень. Прочитав ее, вы сформируете лучшее представление о работе компонентов TypeScript, сможете избежать многих ловушек и ошибок и развить свои навыки. В то время как справочное руководство покажет пять разных путей применения языка для реализации одной задачи, «эффективная» книга объяснит, какой из этих путей лучше и почему.
Читать дальше →

Пишем видеочат для локальной сети, или осваиваем WebRTC в 2020 году

Время на прочтение6 мин
Охват и читатели9.9K
На фоне известных событий делать было нечего в рамках профессионального роста пытаюсь освоить WebRTC. Как известно, лучший способ освоения – сделать что-нибудь хотя бы потенциально полезное. А заодно и поделиться-обменяться опытом создания и набивания шишек.

В качестве задачи было решено сделать простое приложение, позволяющее проводить аудиовидеозвонки между двумя (пока что) стационарными или мобильными устройствами в локальной сети без необходимости подключаться к Интернету. Установка и первоначальная настройка такого приложения должны быть простыми настолько, чтобы сколь-нибудь продвинутый эникей без проблем с этим справился и показал пользователям, как делать звонки, а при наличии соответствующих навыков мог бы сделать небольшие доработки в части дизайна и возможностей. Клиентом должно выступать любое устройство, оснащённое устройствами ввода-вывода мультимедиа и позволяющее запустить подходящий браузер (Firefox или Chrome – тестил на майских, кажется, версиях).
Читать дальше →

Javascript платформа Objectum

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

Если вам нужен простой способ создавать веб-приложения, используя только javascript (full-stack), то предлагаю вам ознакомиться с платформой objectum. Новая версия платформы является результатом опыта работы над предыдущей версией, которая используется 10 лет. Обе версии используются в разработке различных информационных систем — это региональные решения и системы для организаций. Платформа новой версии уже используется на продакшн серверах и будет развиваться длительное время. Далее подробности.


logo

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

Профессиональное применение инструментов разработчика Chrome: 13 советов

Время на прочтение7 мин
Охват и читатели37K
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.


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

Как я выкинул webpack и написал babel-plugin для транспила scss/sass

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

Предыстория


Как-то субботним вечером я сидел и искал способы сборки UI-Kit с помощью webpack. В качестве демо UI-kit я пользуюсь styleguidst. Конечно же, webpack умный и все файлы, которые есть в рабочем каталоге он запихивает в один бандл и оттуда всё крутится и вертится.

Я создал файл entry.js, импортнул туда все компоненты, затем оттуда же экспортнул. Вроде всё ок.

import Button from 'components/Button'
import Dropdown from 'components/Dropdown '

export {
  Button,
  Dropdown 
}

И после сборки всего этого, я получил на выходе output.js, в котором как и ожидалось было всё — все компоненты в куче в одном файле. Тут возник вопрос:
А как мне собрать все кнопочки, дропдауны и прочее по отдельности, что бы импортировать в других проектах?
А я ведь хочу это ещё и в npm залить как пакет.

Хм… Поехали по порядку.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №426 (27 июля — 2 августа 2020)

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

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

Чем «фрагменты» могут помочь в Веб-разработке на примере Malina.js

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


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

Почему бы не использовать такую же способность в шаблонах компонентов. В настоящее время многие фреймворки позволяют использовать компоненты внутри других компонентов. Но это больше похоже на подключение модуля, нежели просто функции. Ведь компонент кроме шаблона может иметь свой JavaScript код, свои стили и он весьма изолирован (что хорошо).
Читать дальше →

Как мы получили 163 лида за 24 часа в условиях COVID-19

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


Делюсь опытом проведения мероприятия в условиях изоляции. Мы получили 1904 участника и 163 лида за 24 часа. Прикладываю исходники и полную статистику с фидбеками.

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

О роли фронтенд-разработчика

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

Привет, Хабр! Представляем вашему вниманию перевод статьи фронтенд-разработчика из MediaMonks Рональда Мендеса. Будучи родом из Венесуэлы, Рональд перебрался в Аргентину и построил успешную карьеру, а благодаря своему большому интересу к дизайну и анимации стал одним из членов жюри престижной премии FWA (вручается с 2000 года).


В этой заметке, которая показалась нам интересной, Рональд рассуждает о том, как фронтендеру найти свое место под солнцем и эффективнее взаимодействовать со своей командой.


Рональд Мендес. О роли фронтенд-разработчика


Когда я начал работать разработчиком в 2009 году, я проводил большую часть своего времени, верстая сайты. Мои задачи относились к заключительному этапу линейного процесса, в котором дизайнеры, клиенты и другие заинтересованные стороны принимали практически все решения.


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

Vue.js для начинающих, урок 8: компоненты

Время на прочтение9 мин
Охват и читатели47K
Сегодня, в восьмом уроке курса по Vue, состоится ваше первое знакомство с компонентами. Компоненты — это блоки кода, подходящие для многократного использования, которые могут включать в себя и описание внешнего вида частей приложения, и реализацию возможностей проекта. Они помогают программистам в создании модульной кодовой базы, которую удобно поддерживать.



Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг
Vue.js для начинающих, урок 4: рендеринг списков
Vue.js для начинающих, урок 5: обработка событий
Vue.js для начинающих, урок 6: привязка классов и стилей
Vue.js для начинающих, урок 7: вычисляемые свойства
Vue.js для начинающих, урок 8: компоненты
Читать дальше →

Простое объяснение делегирования событий в JavaScript

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

Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin



В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.

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

Lock-файлы npm

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

Lock-файлы npm


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

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

Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом

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

Как "подружить" дизайнера и инженера? Как дать им работать с одними и теме же данным, без ущерба продуктивности? Как хранить дизайн в системе контроля версий. Если вас интересуют эти вопросы, в такой же степени как и меня, то добро пожаловать под кат!

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

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

«Светлое» будущее моих фейлов

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

Я пишу свою библиотеку валидации данных quartet уже полтора года. И не обошлось без фейлов. Желание их пофиксить заставляло меня заново и заново выпускать мажорные версии, менять архитектуру. И сейчас уже четыре месяца последняя мажорная версия неизменна. Но и в ней есть свои фейлы, и сейчас я о них попытаюсь рассказать.

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

Как пройти финальный уровень JS QA Game от SEMrush

Время на прочтение7 мин
Охват и читатели2.4K
Привет, меня зовут Тимур, и я написал QA Game от SEMrush. Вы могли слышать об этой игре, если участвовали в Heisenbug online или видели анонсы игры в Telegram-чатах для тестировщиков. Если коротко, то в QA Game нужно проходить уровни с нарастающей сложностью и отлавливать баги, используя JavaScript.

В этой статье я разберу седьмой (финальный и самый сложный) уровень и поделюсь решением победителя игры*.

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

Модульное и интеграционное тестирование в Redux Saga на примерах

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

hero image


Redux — чрезвычайно полезный менеджер состояний. Среди многих "плагинов", Redux-Saga нравится мне больше всего. В проекте на React-Native, над которым я сейчас работаю, мне приходилось сталкиваться с множеством побочных эффектов. Они приносили бы мне головные боли в случае, если я поместил их в компоненты. С помощью этого инструмента создание сложных логических потоков с разветвлениями становится простой задачей. Но как насчет тестирования? Так же это просто, как и использование библиотеки? Хотя я не могу дать вам точный ответ, я покажу вам реальный пример проблем, с которыми я столкнулся.

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

Бот «Умный планировщик»: понимает с полуслова

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



Хотите проверить функционал? Напишите в лс боту по этой ссылке и он ответит вам.

А тем, кому интересно как он работает и как 16-летний школьник смог написать его, я с удовольствием расскажу всё в подробностях в этой статье.
Читать дальше →

Vue.js для начинающих, урок 7: вычисляемые свойства

Время на прочтение7 мин
Охват и читатели23K
Сегодня, в седьмом уроке курса по Vue, мы поговорим о вычисляемых свойствах. Эти свойства экземпляра Vue не хранят значения, а вычисляют их.


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

WebStorm 2020.2: возможность использовать Prettier по умолчанию, поддержка Nuxt.js и другие улучшения

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

Всем привет! Мы рады представить второе крупное обновление WebStorm в этом году. В нем вы найдете несколько долгожданных улучшений, включая поддержку Nuxt.js и возможность использовать Prettier для форматирования кода по умолчанию.


webstorm-release-banner

Скачать 30-дневную пробную версию WebStorm 2020.2 можно на сайте или с помощью Toolbox App. Полную версию могут использовать обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики опенсорсных проектов.

А сейчас давайте рассмотрим основные улучшения.

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

Urban Bot или как писать чат-ботов для Telegram, Slack, Facebook… на React.js

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

image


В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.


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

В отличии от большинства чат-бот библиотек, которые чаще всего просто оборачивают http запросы в функции с готовыми аргументами и предоставляют подписки вида bot.on('message', callback), иногда позволяя передавать контекст между вызовами, Urban Bot предлагает совершенно иной подход к разработке чат-ботов — через декларативное программирование и компонентный подход. Живой пример, написанный на Urban Bot, вы можете попробовать в Telegram, cсылка на чат-бот, и посмотреть код на GitHub.


Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.

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