Использование вебсокетов в промис-стиле
Уже не единожды на просторах интернетов обсуждались плюсы вебсокетов над xmlhttprequest(ajax) запросами. Из них основные — это скорость доставки(т.к. соединение всегда открыто) и экономия ресурсов (т.к....
Динамические заголовки страницы в Angular
Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript.
В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для всего приложения и как изменить заголовок...
Функции-генераторы в JavaScript для оптимизации памяти
Управление памятью: обычные функции JavaScript против функций-генераторов
Едва ли не каждый программист сталкивается с проблемой перебора большого количества элементов (коллекции статей, изображения, записи в базе...
Цикл For…of в JavaScript
В JavaScript много операторов цикла:
оператор whileоператор do...whileоператор forоператор for...inоператор for...of
Их основная функция: повторять действия до тех пор, пока не будет выполнено определенное условие.
В этой статье мы узнаем, как работает...
Визуализация данных и веб-отчёты в Angular
Недавно я столкнулась со следующей проблемой: мне нужно было найти полностью настраиваемые веб-компоненты, с которыми несложно взаимодействовать и которые могут использоваться как встроенные BI-инструменты...
Лучшие практики JavaScript: переменные
Как и у любого языка программирования, у JavaScript есть свой список лучших практик, помогающих создавать более простые для понимания и дальнейшей поддержки программы. В...
Анализ возможностей React Native или 15 вариантов улучшить ваше приложение!
Фреймворк React Native радикально изменил процесс разработки мобильных приложений, особенно после создания таких гибридных мобильных приложений, как Phone-gap, Ionichas и т.д.
Однако набора компонентов React...
JavaScript Style Guide от Google. 13 примечательных рекомендаций
Для тех, кто ещё не в курсе, Google выпускает руководство, которое излагает лучшие (по мнению Google) стилистические практики для написания чистого и понятного кода...
Как оптимизировать приложения на Angular
Angular — это наиболее популярный и предпочитаемый большинством фреймворк для создания одностраничных приложений. Хотя я и упомянул только про одностраничные приложения, это вовсе не означает, что...
10 правил программирования NASA
10 правил, призванных облегчить проведение контроля и статического анализа кода.
Вот что об этих правилах говорят в NASA:
Правила можно сравнить с ремнём безопасности в машине: сначала...
6 интересных веб-технологий в 2019 году
Фреймворки для фронтенд-разработки
1. React.js
С помощью React.js разработчики могут создавать повторно используемые компоненты (reusable components), каждый из которых будет со своим собственным “state”, то есть “внутренним состоянием”....
Rest и Spread в JavaScript. Возможности, о которых вы не знали
Операторы Rest (остаток) и Spread (расширение) можно использовать не только для разделения и соединения отдельных значений массивов. Здесь я собрал 7 малоизвестных способов использования...
Осторожно! Angular крадет ваше время
Angular может все — ну или почти все. Но иногда это «почти» заставляет вас тратить время на написание обходных решений или на попытки понять,...
Полезные глобальные функции языка Swift
Глобальные функции (их можно вызвать отовсюду без привязки к области действия определённого типа) — это довольно старая концепция, которая была популярна в таких языках, как С...
Условный JavaScript для экспертов
Осваиваем условные выражения для написания более чистого кода
Условные выражения являются очень важным аспектом в синтаксисе любого языка программирования. Если вы уже некоторое время программируете на...
Какие нововведения для веб-разработки представит Vue 3.0?
В ноябре прошлого года создатель Vue, Эван Ю, продемонстрировал ключевые обновления на Vue 3.0, благодаря которым Vue станет более эффективным, модульным и простым в...
Повторные попытки HTTP-запросов в Angular
Доступ к данным из бэкенда — основа почти каждого одностраничного приложения. Весь динамический контент загружается с сервера.
В большинстве случаев HTTP-запросы работают хорошо и возвращают желаемый результат....
Зачем нужен Strict Mode в JavaScript?
Строгий режим — это важная часть современного JavaScript. Он позволяет использовать ограниченный синтаксис JavaScript.
Семантика строгого режима отличается от старого “неаккуратного режима” JavaScript с его слабым синтаксисом...
Стриминг видео и чат в учебном приложении
Платформа Mux обеспечивает высококачественный стриминг, управляемый удобным API, так что вы можете сфокусироваться на создании своего продукта. Он чрезвычайно гибок и предлагает функции для...
Объяснение понятия «состояние» в JavaScript на примере приготовления простого блюда
Когда вы начинаете писать простые JavaScript программы, вам не нужно волноваться о количестве используемых вами переменных или о том, как работают разные функции и...
Основы JavaScript: управление DOM элементами (часть 2)
Часть 1, Часть 2
Получаем доступ к DOM элементам
В данном разделе мы посмотрим на методы, которые помогут получить доступ к DOM элементам: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector()...
Прототипирование для Vue
С июля 2019 года Vue занимает третье место по количеству звезд на Github. Он опережает React более чем на 10 000 звезд и оставляет...
React hooks: никакой магии, только массивы
Я большой фанат новых API хуков. Но знаете, у них есть странные ограничения по применению. Для тех, кто жаждет понять причины появления этих правил,...
Создание компонента Timer с React и Bit
Рассмотрим пример создания компонента countdown timer в React с использованием Bit.
В результате компоненты будут выглядеть следующим образом.
Помимо этого, мы научимся обмениваться компонентами и использовать...
Дизайн-системы в 2020 году: где источник истины?
Иногда системы лишь масштабируют проблему
Дизайн-система пользовательского интерфейса - это постоянно растущее и непрерывно развивающееся существо, охватывающее бренд и ощущения пользователя.
Дизайнеры создают визуальный язык для...
JavaScript Essentials: Типы и структура данных
В рубрике Essentials мы рассматриваем наиболее используемые и важные методы. Эта рубрика будет полезна разработчикам, которые уже знают другой язык или тем, кто хочет...
3 простых шага для написания сложных компонентов
Давайте углубимся в мир чистого React-кода со сложными компонентами.
После реализации своего первого сложного компонента в React я стал буквально зависим от этого шаблона. Как...
Как создать Meetup+Slack приложение с помощью Standard Library и Node.js
Meetup — это популярный веб-сайт, на котором люди со схожими интересами объединяются в группы для организации тематических мероприятий в своих городах. После того, как мы успешно...
Введение в веб-скрэпинг с помощью Node.js
Автоматически или вручную?
Раньше, когда у меня возникало желание поупражняться в создании веб-сайтов, я просто заходил на веб-страницу, открывал консоль и пытался извлечь нужный мне...
Полезные JavaScript-модули, на которые стоит обратить внимание
Эта статья представляет собой подборку наиболее полезных модулей и утилит для серверной и клиентской разработки на NodeJS и JavaScript, которые использует в своей работе...
Как организовать Express-контроллеры для крупных баз кода
Три года назад я начал разработку Express.js API для одной компании. Тогда я подумал: какой должна быть идеальная архитектура контроллеров для правильной организации разрастающейся...
Javascript и функциональное программирование: Введение
Я всегда был нацелен на результат. Меня не привлекают псевдоинтеллектуальные концепции, причудливая терминология и пиар. Вместо этого, я всегда стремлюсь к тем инструментам и...
Краткое введение в функции высшего порядка в JavaScript
Функции высшего порядка
Функция, принимающая в качестве аргументов другие функции или возвращающая другую функцию в качестве результата, называется функцией высшего порядка.
С функциями в JavaScript вы можете:
Хранить...
Отладка Node.js с помощью Google Chrome
Отладка (debugging) — это процесс выявления и устранения ошибок в программных приложениях, который представляет собой нечто большее, чем просто просто вывод значений переменных. Задача этой статьи...
Как создать библиотеку компонентов для совместного использования
Пример
Прежде чем начать, рассмотрим пример того, что должно получиться в результате. Здесь можно найти библиотеку Semantic-UI-React. Этот репозиторий также доступен как пакет на NPM.
С...
Повесть об однонаправленном потоке данных в Angular
У Angular есть свои фишки и причуды. В то время как React реализует модель однонаправленного потока данных по умолчанию, Angular с самого начала точно...
React.js за 5 минут
В этом туториале вы получите базовое представление о React.js путём создания очень простого приложения.
Установка
Так как вы только начинаете работать с React, то я бы посоветовал вам...
Экспорт данных в Excel с React
В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже.
Пример проекта
Возьмем простое...
Объясняем Z-index: как позиционировать элементы с помощью CSS
CSS свойство под названием z-index всегда вызывало у меня страдания.
На первый взгляд принцип его работы звучит просто: элементы с более высоким значением z-index отображаются поверх элементов...
Не используйте for при переборе массивов
Циклы for имеют для меня особое значение. Довольно продолжительное время я активно их использовал, пытаясь уйти от циклов while. При этом неизбежно забываешь об...
10 вещей, которые надо знать, чтобы стать мастером JavaScript
Полагаю, вы веб-разработчик. Надеюсь, ваши дела идут хорошо, у вас отличная работа, возможно вы работаете на себя или в качестве фрилансера. Будущее этой сферы...
Поиск и использование компонентов с bit.dev для создания приложений
Bit упрощает использование компонентов из библиотек и приложений. Bit’s hub (bit.dev) облегчает поиск и взаимодействие с этими компонентами.
В этой статье мы узнаем, как найти...
Почему Lodash по-прежнему полезен?
С выпуском ES6 и более поздними версиями JavaScript появилось множество методов, расширяющих функциональность языка. Например, появились новые методы массивов и строк, а также такие...
7 инструментов для разработки веб-компонентов в 2019 году
Компоненты и виджеты, разработанные по стандартам веб-компонентов, работают в современных браузерах и используются с библиотеками JavaScript и фреймворками, работающими с HTML.
Помимо возможности повторного использования,...
Кнопка sign-in для вашего веб-приложения
Далее вы узнаете, как использовать библиотеку gapi для настройки аутентификации, как произвести вход пользователя, а также я покажу несколько сниппетов для обработки распространённых пользовательских...
Разбираемся с Render Props и HOC в React
Детальное представление Render Props и компонентов высшего порядка в React
Для чего нужны эти паттерны?
React предлагает Компоненты, представляющие собой простой способ повторного использования кода. Компонент инкапсулирует множество вещей...
Прощай, Adobe
Впервые я познакомилась с программами от компании Adobe примерно десять лет назад, когда, будучи подростком, открыла для себя Photoshop и магические свойства Clone Tool.
Затем...
JavaScript async/await: что хорошего, в чём опасность и как применять?
Механизм async/await , представленный ES7, является фантастическим улучшением асинхронного программирования с использованием JavaScript. Он предоставил возможность использовать код, написанный в синхронном стиле, для асинхронного доступа к...
Три нашумевших диаграммы. Исследование JavaScript в 2018
Вы думали статистика и графики — это скука? Подумайте ещё раз…
Нашумевший — это буквально самое заезженное слово в интернете, если не считать слово «буквально». Но в этот раз — это...
Изучите эти основы JavaScript и станьте лучшим разработчиком
В языке JavaScript есть примитивы, объекты и функции и все они рассматриваются в качестве объектов, даже примитивы.
Примитивы
Число, булевый (логический) тип данных, строка, undefined и...
Новичок! Ты должен был выучить Git ещё вчера
Мой совет номер один для новичков: изучайте Git и выкладывайте код на GitHub каждый день.
Я ежедневно получаю сообщения, письма, твиты от тех, кто только...
Веселимся с Angular и трансформаторами в TypeScript
Вам знакома проблема обработки подписок на RxJs вручную? Помните, как забыли одну? Или однажды подумали, что использование AsyncPipe в шаблоне будет безопасно, но...
Как не лажать с JavaScript. Часть 2
Часть 1, Часть 2
Значение рефакторинга
Рефакторинг — это контролируемый процесс улучшения кода без написания новой функциональности. При правильном применении рефакторинг может стать мощным оружием против монстра под...
ANGULAR v7: подсказки командной строки, виртуальная прокрутка, перетаскивание и др.
Версия Angular 7.0.0 уже вышла! Это основной релиз, который затронул всю платформу, включая ядро, Angular Material, и командную строку с синхронизированными базовыми версиями. В...
Ключевое слово this и контекст в JavaScript
К освоению JavaScript лежит долгий путь, на котором вам может встретиться такое выражение, как this. Первый раз я встретил его в процессе работы с...
Отзывчивость – это очень просто с CSS-переменными
Если вдруг до этого вы ни разу не слышали о CSS-переменных, то поясним, что это новая функция CSS, благодаря которой в таблице стилей вы...
Изучаем шаблоны проектирования в JavaScript
В этой статье мы разберём несколько шаблонов проектирования в JavaScript.
Когда запускается новый проект, вы не бросаетесь тут же писать код. Для начала нужно определить...
Делаем Node.js быстрым: инструменты, техники и советы для создания эффективных серверов на Node.js Часть...
Предыдущие части: Часть 1
Понимание проблемной области
В кратком руководстве Clinic Doctor говорится что, если задержки Event Loop на уровне, который мы наблюдаем, весьма вероятно, что...
Платформы Аngular в деталях. Часть 3. Визуализация Angular-приложений в терминале
Часть 1, Часть 2, Часть 3
В этой статье мы с вами приступим к процессу создания пользовательской платформы. Но прежде, пожалуйста, просмотрите ещё раз...
Улучшите производительность с помощью веб-воркеров
Введение
В этой статье мы рассмотрим, как использовать веб-воркеры для повышения производительности при запуске. Примеры будут в приложении Angular 8 — с ним проще начать работать с...
Как добавить темную тему для сайта
Один сайт — две разные темы
В прошлом году я решил провести полный редизайн своего сайта. Так как это был сайт-портфолио, то я захотел сделать что-то простое и...
Основы JavaScript: управление DOM элементами (часть 1)
Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования, как JavaScript,...
Спасение жизней с помощью Scrum
Историки могут пересмотреть прогресс человечества и обозначить чёткую линию между временем “до появления Scrum” и “после появления Scrum”.
Это первая из двух статей, которую я...
Делаем Node.js быстрым: инструменты, техники и советы для создания эффективных серверов на Node.js Часть...
Предыдущие части: Часть 1, Часть 2
Оптимизируем
Теперь, когда мы обнаружили проблемные области, давайте посмотрим, можем ли мы сделать сервер быстрее.
Лёгкий и быстрый способ
Давайте вернем код слушателя server.on (вместо...
Пишем кастомные React-хуки для GraphQL
Примечание: на данный момент хуки в React являются экспериментальными
Недавно на React Conf 2018 был представлен выпуск новых API для React, что повлекло за собой...
Мой опыт спустя год работы с React
Поначалу, работа с новой технологией крайне проблематична. Вы перечитываете сотни статей и мануалов, натыкаетесь на множество различных мнений, в каждом из которых написано, что...
Agile — враг (хорошего проектирования)?
Интеграция
Чтобы приступить к обсуждению, вначале надо поговорить об интеграции. Интеграция — это…
действие или случай объединения в единое целое.
Частая интеграция помогает людям более эффективно решать задачи:
Вы...
Инкапсуляция состояния в JavaScript без использования классов в 2019 году (с приватными полями!)
По возможности я стараюсь избегать использования классов в Javascript, поскольку для меня более предпочтителен функциональный стиль, а не объектно-ориентированный. Однако существует одна вещь, которую...
Обнаружение компонентов с Bit ✨
Представляем обновленный способ обнаружения и обмена компонентами
С момента первого релиза Bit в 2018 году, тысячи команд и разработчиков начали использовать его при создании приложений...
Введение в фронтэнд и бэкэнд – основы веб-разработки
Хотите создать веб-сайт?
Здорово! Создание веб-сайта - плодотворный творческий проект, увлекательный и полезный как для приобретения востребованных навыков, так и отличный способ попробовать себя в новом...
9 убийственных приемов для JavaScript разработчиков в 2019 году
Пролетел еще один год, а JavaScript все продолжает меняться. Однако есть несколько советов по написанию чистого и эффективного кода, который будет масштабироваться даже (а...
Решение проблемы с CSS :hover
:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.
Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер....
Создаем функции поиска и фильтрации в Ruby on Rails
Ruby on Rails замечательно подходит для создания мощного и гибкого бэкенда. Однако из-за популярности и гибкости JavaScript, Ruby используется для фронтэнда не так часто....
Битва трендов: React vs Angular vs Vue
Подождите, по-моему, я уже писал на эту тему… Да, но слишком многие жаловались, что я так и не сказал, что же лучше. Поэтому в...
Отложенная загрузка изображений с помощью Intersection Observer API
Изображения составляют огромный процент содержания веб-страниц. Однако чем больше изображений, тем медленнее загружается страница.
Большое количество изображений на сайте значительно влияет на его производительность. Отложенная...
Основы JavaScript: управление DOM элементами (часть 3)
Часть 1, Часть 2, Часть 3
Навигация по DOM элементам
Обход DOM или, проще говоря, навигация по DOM элементам — это работа со свойствами родительских, дочерних и соседних...
Советы по разработке больших приложений JavaScript
Длительность одного клиентского проекта в нашем агентстве 9elements обычно составляет пару месяцев. Процесс начинается с первого контакта с клиентом, проходит этап проектирования и заканчивается...
Введение в вычисляемые свойства в Vue JS
Причины, по которым ‘вычисляемые свойства’ играют важную роль при написании чистого и эффективного кода Vue
Vue JS, созданный Эваном Ю и членами сообщества, представляет собой прогрессивный...
Архитектура ПО: создайте свое приложение с AWS
В настоящее время облачные вычисления стали центральной частью любой технологической компании. Таковыми считаются все организации, т.к. большинство из них подпадает под категорию «программное обеспечение...
Что я понял за год работы программистом в стартапе
Год назад я стал разработчиком в Foxintelligence, стартапе в Париже. До этого я работал в двух компаниях в качестве администратора проектов в отделах информационных...
Ключевое слово static в PHP
Сигнатура метода
Самый распространенный вариант использования ключевого слова static - статический метод. Несмотря на то, что к статическим методам можно обращаться с помощью объектного оператора...
Понимание врапперов в Swift
Наряду со многими новыми функциями, которые появились в Swift 5.1, одна из самых интересных — это врапперы свойств. По сути врапперы находятся между поведением свойств...
Почему написание собственного кода делает вас лучшим разработчиком
На днях я проводил собеседование на позицию senior разработчика JavaScript. Мой коллега, тоже присутствовавший на собеседовании, попросил претендента написать функцию, которая будет выполнять HTTP-вызов...
Фрагменты в React
При работе с React лучше использовать многоразовые компоненты с помощью таких инструментов, как Bit, чтобы избежать необходимости переписывать их каждый раз. К тому же, приятно...
Layout для Material-UI
Material-UI — одна из самых популярных библиотек компонентов react. Однако невозможно найти ни одной инструкции или статьи о том, как создать layout на основе этих...
Разработка современных приложений с помощью WEBPACK
Насколько далеко можно зайти с конфигурацией Webpack по умолчанию?
Я выступал на конференции GDG Devfest, где говорил об использовании webpack в разработке современных приложений. Изначально...
Что такое Редьюсеры: Как использовать их без Redux
Обработать состояние можно с помощью редьюсера в Class Components, используя функцию, преобразующую действия в изменения состояния. Благодаря этому централизируются все функции setStates.
? Что такое...
Платформы Angular в деталях. Часть 1. Что такое платформы Angular?
Инфраструктура для разработки приложений Angular была задумана как платформенно-независимая технология (далее по тексту — фреймворк). Такой подход позволяет запускать приложения на Angular в разных средах: в...
Лучший способ для привязки обработчиков событий в React
Благодаря JavaScript привязка обработчиков событий в React может быть достаточно сложным занятием. Для тех, кто знаком с историей Perl или Python, аббревиатуры TMTOWTDI (There’s...
Платформы Angular в деталях. Часть 2. Процесс начальной загрузки приложения
Часть 1, Часть 2
Фреймворк Angular был задуман платформенно-независимым. Такой подход позволяет запускать Angular-приложения в разных средах: в браузере, сервере, веб-воркере и даже на мобильных...
Пожалуйста, отложите TypeScript ненадолго
Сперва позвольте уточнить: типизированный JavaScript — это фантастика. Я использовал Flow и продолжу использовать TypeScript в будущем, ведь это мощнейший быстро растущий инструмент.
Но какова цена этой...
Как обрести уверенность дизайнеру
Дизайнеры часто сталкиваются с такими проблемами, как отсутствие уверенности и синдром самозванца. Как же стать уверенным в себе специалистом по дизайну?
Неуверенность в проделанной работе...
Прототипирование без API
Я из тех, кто обычно очень нетерпелив, когда менеджер раскрывает функции нового продукта. После спринта я задаю этот ужасающий, трепещущий вопрос:
… API уже готов?..
И ответ...
Компоненты Wrapper в Vue 2.6 и Vue 3.0
Поговорим о компонентах дизайн-системы, в особенности о компонентах wrapper. Как создать мощную структуру компонента wrapper? В примере будем использовать поле ввода и...
Платформы Аngular в деталях. Часть 4. Визуализация Angular-приложений в терминале
Часть 1, Часть 2, Часть 3, Часть 4
В этой статье, последней из серии статей «Платформы Angular в деталях», мы с вами завершим процесс создания...
Как развернуть React-приложение в Netlify
Я научу вас развертке и хостингу React приложения с Netlify.Netlify — это сервис для автоматизации сборки, развертывания и управления сайтами. В настоящее время Netlify считается одним...
Почему React 16 — это благословение для React разработчиков
Практически каждый рад, когда выходит новая версия любимого мобильного приложения или OC. Разработчик тоже должен быть рад выходу свежего обновления для своего любимого фреймворка,...
Создание компонента Timeline с React
При работе над новой страницей своего веб-сайта я решил добавить Timeline, чтобы показать свои профессиональные достижения за последние годы. С помощью временной шкалы можно...
Ведущие тенденции веб-разработки в 2019 году
Знаете ли вы, что во всем мире создают и запускают около 200 сайтов в минуту?
В мире насчитывается 200 миллионов активных веб-сайтов, а общее количество неактивных...
Объединение Google API с Angular
?Мотивация
Задача: нужно получить доступ или отобразить события частного google-календаря.Проблема: нельзя поместить частный календарь внутрь iframe или запросить события, используя ключ API.Необходимые условия: совместимость с...
Чистота и порядок: 3 правила для идеальной базы кода
В любом деле важен порядок, особенно если речь идет о чистоте кодовой базы. Рассмотрим 3 правила, выполнение которых помогает своевременно обнаружить грязный код и помешать его проникновению в базу.
Как реализовать в Golang двухфакторную аутентификацию с TOTP
Поэтапно настроим среду, интегрируем в проект библиотеку и рассмотрим различные аспекты 2FA, включая генерирование и хранение секретов, обработку аутентификации пользователя и проверку кодов TOTP. Дадим рекомендации по реализации в приложении Golang.
Почему не стоит использовать or для проверки нескольких условий в Python
Все еще пользуетесь or для проверки условий при программировании на Python? Разберем несколько причин, почему делать этого не стоит.
Декларативный код против императивного
Хотите верьте, хотите нет, но как разработчик вы наверняка уже пользуетесь более чем одной парадигмой программирования. Поскольку нет ничего забавнее, чем развлечь друзей теорией...
Приключения аналитика в стране кода: пробуждение силы
Программы для электронных таблиц, такие как Microsoft Excel и Google Sheets, превосходны. Они вне конкуренции, когда дело касается выполнения простых вычислений или построения финансовых...