Лучшие практики JavaScript: объекты
Как любой другой язык программирования, JavaScript имеет свой собственный список лучших практик, которые помогают создавать программы проще для понимания и дальнейшей поддержки. Этот язык...
10 отличных JavaScript библиотек на 2020 год
JavaScript — язык интернета. Вы можете запускать его в браузере или на сервере, а можете использовать для мобильных приложений.
Хотя он и хорош сам по...
Версионирование независимых UI-компонентов
Большинство компонентов версионируются как часть проекта (например, component-library), что противоречит концепции создания модульных UI-приложений. Например, чтобы использовать слайдер-компонент, нужно внедрить в приложение полную библиотеку...
Смертоносные интерфейсы
Это непопулярное мнение, но в ООП языках интерфейсами мы можем принести больше вреда, чем пользы.
Введение
Во-первых, устраним неоднозначность: когда я говорю здесь об интерфейсах, я имею...
Фильтруем баги. Как реализовать тестовое покрытие в TypeScript под Node.js с помощью Jest
Я обожаю писать программы. Да что уж там: я не могу представить себя, занимающимся чем-то другим. Шутки шутками, но есть у меня один страх,...
У приложений будущего может не быть бэкенда
История циклична.
Я создал свой первый веб-сайт в 1999 году с помощью самых передовых технологий, доступных веб-мастерам (не могу использовать слово разработчики в данном случае):...
Кто придет на замену JavaScript
Десять лет назад никто не догадывался о том, что JavaScript будет править миром. Другие платформы, такие как Java, Flash и Silverlight, также были сильными...
Почему не стоит использовать объекты в роли карт в JavaScript?
До появления ES6 при создании карты или словаря хранение ключей и значений мы зачастую реализовывали посредством объектов. В таком способе есть свои проблемы, которых...
Не стоит частить с if в JavaScript
Мне нравится воспринимать логику построения условий как хлеб и масло в среде разработки софта. Она позволяет разработчикам создавать интересные, полезные и веселые продукты.
Самый распространенный...
Замечательные новые фичи TypeScript 3.5
Новые фичи включают в себя:
увеличение скорости для поэтапных сборок; вспомогательный тип Omit;улучшенные проверки избыточных свойств в типах объединения;вывод типов для объединения конструкторов.
Увеличение скорости
С режимом сборки...
API Chrome: 7 новинок
1. Web Bundles
Этот API предоставляет возможность объединения веб-сайта в один файл. Более того, этим файлом можно поделиться через любое средство (Bluetooth или Wi-Fi Direct),...
Превращаем веб-сайт в PWA
Согласно этой статье из CNBC, к 2025 году почти три четверти населения мира будут использовать для доступа к интернету только смартфоны. Поэтому, если вы...
Компоновщик в JavaScript
В программной инженерии компоновщик позволяет обращаться к группам объектов так, как будто они являются отдельными объектами, делая общую структуру этих объектов и их комбинаций...
Шаблон Медиатор в JavaScript
Поскольку медиатор изменяет поведение программы и отвечает за координацию взаимодействий, он считается поведенческим шаблоном. По мере роста приложения возрастает и потребность в медиаторе из-за...
Как исправить ошибки сертификатов в Node-приложениях при работе с SSL
Если вам уже доводилось писать приложения на Node/Express, то вы не понаслышке знаете, что такие приложения обычно устанавливаются с HTTPS и сертификатом сервера. Однако...
Знакомство с промисами в JavaScript
Если вы не совсем в курсе современных тенденций JavaScript, то, по крайней мере, слышали о промисах ранее, но не знаете, где и как их...
11 сверхполезных советов для JavaScript разработки
1. Преобразование в Boolean с помощью оператора !!
Иногда нам необходимо проверить существование переменной или наличие у нее верного значения. Для подобной проверки вы можете использовать !!...
11 главных фронтенд-трендов на 2020 год
1. Микрофронтенды
Звучит иронично, но несмотря на то, что фронтенд-разработка обладает модульными преимуществами компонентов, она все еще более монолитна, чем бэкенд-микросервисы.
Микрофронтенды предоставляют возможность разделения фронтенд-архитектуры...
Избегайте 5 антипаттернов, работая с коллекциями в JavaScript
Работа с коллекциями в JavaScript становится ужасающей, когда многое происходит в функциональном блоке.
Вы наверняка задавались вопросом, почему код в некоторых проектах выглядит гораздо симпатичнее,...
Не используйте for при переборе массивов
Циклы for имеют для меня особое значение. Довольно продолжительное время я активно их использовал, пытаясь уйти от циклов while. При этом неизбежно забываешь об...
Первые шаги в анимации React Native
Когда я только начал работать с React Native (RN), у меня никогда не доходили руки до изучения анимации. Многие вещи казались важнее, поэтому я...
Потоки и буферы в Node.js
Для управления потоковыми данными наподобие видео или большого файла в Node.js реализован отдельный потоковый модуль.
В текущей статье мы сконцентрируемся на некоторых принципах его функционирования.
Разделы...
JavaScript: как удалить значения из массива
Четыре нативных способа удаления значений массива
Массивом называется упорядоченный тип данных, хранящий несколько значений. Это означает, что каждый элемент в массиве имеет числовой идентификатор (индекс), который...
Объединение Google API с Angular
?Мотивация
Задача: нужно получить доступ или отобразить события частного google-календаря.Проблема: нельзя поместить частный календарь внутрь iframe или запросить события, используя ключ API.Необходимые условия: совместимость с...
7 инструментов для создания дизайн-систем в 2020 году
Легенда гласит, что первая дизайн-система была представлена НАСА в 1976 году. С тех пор дизайн-системы превратились в широко распространенную практику, используемую для стандартизации проектирования...
Зачем нужен Strict Mode в JavaScript?
Строгий режим — это важная часть современного JavaScript. Он позволяет использовать ограниченный синтаксис JavaScript.
Семантика строгого режима отличается от старого “неаккуратного режима” JavaScript с его слабым синтаксисом...
10 рекомендаций по ускорению рабочего процесса в Visual Studio Code
Как только вы попадаете в поток мыслей, продуктивность мышления возрастет многократно. Вы начинаете набивать код так быстро, как только возможно, с трудом удерживая вниманием...
Как создать GraphQL-сервер с запросами, мутациями и подписками
Если вы ещё не знакомы с TypeScript — не беда. Продолжайте читать дальше: основные понятия и большую часть синтаксиса освоить будет несложно.
Предполагается, что у вас...
Как загружать изображения в RAILS API и возвращать их обратно
Мне потребовалась неделя, чтобы написать back-end основу для Supagram при помощи Rails API. Supagram — это легкий браузерный клон Instagram, в котором есть те же посты,...
Функциональное программирование в JavaScript: руководство с практическими примерами
Функциональное программирование (ФП) — это стремительно набирающий популярность стиль написания кода. Есть много материалов о концепциях ФП, но мало — о том, как применять их на практике. На...
Понимание врапперов в Swift
Наряду со многими новыми функциями, которые появились в Swift 5.1, одна из самых интересных — это врапперы свойств. По сути врапперы находятся между поведением свойств...
7 бесплатных Node пакетов с открытым исходным кодом
Вся основная сила Javascript заключается в бесчисленном множестве потрясающих пакетов, находящихся в открытом доступе. Главное, не забывать хотя бы иногда благодарить их создателей вознаграждением....
Можно ли использовать бессерверные технологии для создания микросервисов?
Прежде чем узнать о возможностях использования бессерверных технологий для создания микросервисов, рассмотрим создание простого веб-приложения с помощью бессерверного стека приложений AWS.
Бессерверные строительные блоки для...
Топ - 9 фреймворков Java в 2020 году
Язык Java в настоящее временя участвует в функционировании 134 861 сайта, включая ESPN, SnapDeal, Alibaba и т.д. За всю историю существования этот язык доказал...
Как предотвратить состояние гонки с помощью React Context API
В сервисной команде Stream мы с удовольствием работаем с различными клиентами и ежедневно решаем захватывающие задачи.
Эта статья посвящена одному из таких решений. В ней...
Эмпирический анализ схем GraphQL. Часть 2
Часть 1, Часть 2
Напомним, что в части 1 мы дали немного вводной информации о языке запросов GraphQL, о преимуществах GraphQL API в сравнении с...
Эмпирический анализ схем GraphQL. Часть 1
Часть 1, Часть 2
В статье приводится краткое изложение научно-исследовательской работы An Empirical Study of GraphQL Schemas, представленной на конференции ICSOC 2019. Большинство авторов работы...
7 моих любимых расширений VS Code
Расширения для VS Code
Я, как и многие другие, люблю настраивать VS Code под себя. Я постоянно ищу новые плагины, настройки, темы, шрифты и рекомендации по...
Погружение в unserialize(): больше, чем RCE
Обход аутентификации и внедрение SQL-кода через unserialize() в PHP
Сериализация в PHP через метод unserialize() приводит к появлению уязвимостей, открывающих через RCE (удаленное выполнение кода) доступ...
Эффективное использование ESLint
Когда мы взаимодействуем в каком-либо проекте, то лучше всего придерживаться некоего общего стиля написания кода. Это облегчит коллегам его чтение и сократит временные затраты....
Ember.js или Vue.js: какой фреймворк выбрать?
Изначально JavaScript создавался для работы с веб-приложениями, однако теперь он используется для создания мобильных приложений. Фреймворки на основе JavaScript популярны среди разработчиков, поскольку они...
Отладка с Git
В этой статье мы рассмотрим два метода Git для отладки ошибок в базе кода - blame и bisect. С помощью Git blame описываются детали изменения...
Основы JavaScript: управление DOM элементами (часть 4)
Часть 1, Часть 2, Часть 3, Часть 4
Изменения в DOM
Давайте теперь рассмотрим, как добавлять, изменять, заменять и удалять узлы из DOM. В частности рассмотрим методы...
Ключевое слово static в PHP
Сигнатура метода
Самый распространенный вариант использования ключевого слова static - статический метод. Несмотря на то, что к статическим методам можно обращаться с помощью объектного оператора...
Советы по анимации с CSS и JavaScript
Основы “плавности”
Анимации - важная часть создания привлекательных веб-приложений и сайтов. Пользователи ожидают высокую отзывчивость и интерактивность.
В классической анимации движение, скорость которого в начале низкая,...
Как компилировать ZXing C++ в Wasm, используя WASI SDK в Linux
WASI — это системный интерфейс, предназначенный для создания программных модулей .wasm не только для Node.js и веб-браузеров, но и для любой совместимой с WASI среды выполнения. Хотя...
3 способа клонирования объектов в JavaScript
Поскольку объекты в #JavaScript являются ссылочными значениями, их нельзя просто скопировать с помощью =. Но не беспокойтесь, существует 3 способа клонирования объекта ?.
const food...
Компоненты высшего порядка в React
Что такое компоненты и функции высшего порядка и в чем заключаются их преимущества? Представляем вам комплексное руководство по компонентам высшего порядка в React.
Увеличиваем производительность приложения React + Redux с библиотекой Reselect
Селекторы — это очень простой способ выбрать состояние из хранилища redux, которое содержит всю логику и данные приложения.
Если вы создаёте приложение с помощью React и Redux,...
Основы JavaScript: управление DOM элементами (часть 3)
Часть 1, Часть 2, Часть 3
Навигация по DOM элементам
Обход DOM или, проще говоря, навигация по DOM элементам — это работа со свойствами родительских, дочерних и соседних...
Основы JavaScript: управление DOM элементами (часть 2)
Часть 1, Часть 2
Получаем доступ к DOM элементам
В данном разделе мы посмотрим на методы, которые помогут получить доступ к DOM элементам: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector()...
Основы JavaScript: управление DOM элементами (часть 1)
Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования, как JavaScript,...
10 правил программирования NASA
10 правил, призванных облегчить проведение контроля и статического анализа кода.
Вот что об этих правилах говорят в NASA:
Правила можно сравнить с ремнём безопасности в машине: сначала...
Переключение между табличным и списковым представлением в Vue.js
Представляйте любой массив данных и переключайтесь между визуализациями
Vue.js — это простой в изучении, быстрый, легковесный и очень перспективный фреймворк.
В данной статье я расскажу о создании Vue...
Экспорт данных в Excel с React
В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже.
Пример проекта
Возьмем простое...
Почему написание собственного кода делает вас лучшим разработчиком
На днях я проводил собеседование на позицию senior разработчика JavaScript. Мой коллега, тоже присутствовавший на собеседовании, попросил претендента написать функцию, которая будет выполнять HTTP-вызов...
Повесть об однонаправленном потоке данных в Angular
У Angular есть свои фишки и причуды. В то время как React реализует модель однонаправленного потока данных по умолчанию, Angular с самого начала точно...
Создаем функции поиска и фильтрации в Ruby on Rails
Ruby on Rails замечательно подходит для создания мощного и гибкого бэкенда. Однако из-за популярности и гибкости JavaScript, Ruby используется для фронтэнда не так часто....
Vue.js 3: программирование, ориентированное на будущее
Если вы используете Vue.js, то знаете, что версия 3.X будет выпущена в ближайшее время. На данный момент новая версия находится в активной разработке, но...
Оператор Spread и деструктуризация в JavaScript: практическое руководство
Некоторые языки программирования содержат операторы, которые встречаются достаточно редко, присутствуют не в каждом языке или используют разный синтаксис. В этой статье мы рассмотрим два...
Как работает JavaScript
Получение фундаментальных знаний о любом изучаемом ЯП помогает улучшить навыки написания кода. Рассмотрим особенности работы JavaScript, знание которых приблизит вас к званию настоящего профессионала своего дела!
Платформы Аngular в деталях. Часть 4. Визуализация Angular-приложений в терминале
Часть 1, Часть 2, Часть 3, Часть 4
В этой статье, последней из серии статей «Платформы Angular в деталях», мы с вами завершим процесс создания...
Платформы Аngular в деталях. Часть 3. Визуализация Angular-приложений в терминале
Часть 1, Часть 2, Часть 3
В этой статье мы с вами приступим к процессу создания пользовательской платформы. Но прежде, пожалуйста, просмотрите ещё раз...
Платформы Angular в деталях. Часть 2. Процесс начальной загрузки приложения
Часть 1, Часть 2
Фреймворк Angular был задуман платформенно-независимым. Такой подход позволяет запускать Angular-приложения в разных средах: в браузере, сервере, веб-воркере и даже на мобильных...
Платформы Angular в деталях. Часть 1. Что такое платформы Angular?
Инфраструктура для разработки приложений Angular была задумана как платформенно-независимая технология (далее по тексту — фреймворк). Такой подход позволяет запускать приложения на Angular в разных средах: в...
Как создать библиотеку компонентов для совместного использования
Пример
Прежде чем начать, рассмотрим пример того, что должно получиться в результате. Здесь можно найти библиотеку Semantic-UI-React. Этот репозиторий также доступен как пакет на NPM.
С...
Layout для Material-UI
Material-UI — одна из самых популярных библиотек компонентов react. Однако невозможно найти ни одной инструкции или статьи о том, как создать layout на основе этих...
React Native vs Flutter
Некоторые инструменты так похожи друг на друга, что порой очень сложно сделать выбор. Разница, как всегда, кроется в деталях. В данной статье разберем, в чем разница между React Native и Flutter, и вы сможете выбрать оптимальное решение для вашего проекта.
Переиспользование форм в Angular
Проект в Stackblitz со всеми примерами в конце поста.
Переиспользуемые элементы управления
Проблема
Однажды я писал модуль аутентификации для компании в сфере электронной коммерции. Это кажется просто,...
Как JavaScript повзрослел и стал настоящим языком
Мало кто представлял себе, что этот язык превратится в профессиональную платформу
Если ещё лет 20 назад вы бы сказали, что JavaScript станет одним из самых...
Создаем голосовое приложения для Alexa и Google Home
Голосовые приложения полностью изменили наше общение с цифровым миром. Голос добавляет во взаимодействие человека и компьютера новое измерение, которое разработчики только начинают исследовать.
В этой...
Как не лажать с JavaScript. Часть 3
Часть 1, Часть 2, Часть 3
Изменяемое состояние
Что такое состояние? Говоря простым языком, состояние — это любые временные данные, хранящиеся в памяти. Например, это могут быть переменные...
Основы JavaScript: функции
Функции могут считаться как одними из ключевых строительных блоков JavaScript программ. Функция — это просто набор команд, разработанных для выполнения определенной задачи, которая исполняется при вызове.
Определение...
Улучшение производительности .NET Core API
Google предоставляет такую статистику посещаемости веб-страниц:
53% посетителей мобильных сайтов покидают страницу, если она загружается более трёх секунд.https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
Это значит, что очень важно сделать ваш сайт...
Функции-генераторы в JavaScript для оптимизации памяти
Управление памятью: обычные функции JavaScript против функций-генераторов
Едва ли не каждый программист сталкивается с проблемой перебора большого количества элементов (коллекции статей, изображения, записи в базе...
10 особенностей создания компонентов Vue.js
1. Глобальная и локальная загрузка компонентов
Vue.js предоставляет два способа загрузки компонентов: глобально на экземпляре Vue и на уровне компонентов. Каждый метод обладает своими преимуществами.
При...
Как не лажать с JavaScript. Часть 2
Часть 1, Часть 2
Значение рефакторинга
Рефакторинг — это контролируемый процесс улучшения кода без написания новой функциональности. При правильном применении рефакторинг может стать мощным оружием против монстра под...
Как не лажать с JavaScript. Часть 1
Часть 1, Часть 2
JavaScript самый распространенный язык программирования в мире и с его силой нужно считаться. Благодаря своей простоте и обилию учебных материалов его...
Кнопка sign-in для вашего веб-приложения
Далее вы узнаете, как использовать библиотеку gapi для настройки аутентификации, как произвести вход пользователя, а также я покажу несколько сниппетов для обработки распространённых пользовательских...
JavaScript Symbols. Новый тип примитивов
Введение
В JavaScript есть два основных типа значений. Первый тип — это примитивы, а второй — объекты (в том числе функции). Примитивы — это простые типы, например числа (integer, float, infiniti,...
3 вида циклов for в JavaScript
Каждый знает хотя бы один вид цикла for. Это классика, и они есть почти в каждом языке. В JavaScript есть три вида циклов (или...
Прототипирование для Vue
С июля 2019 года Vue занимает третье место по количеству звезд на Github. Он опережает React более чем на 10 000 звезд и оставляет...
Стриминг видео и чат в учебном приложении
Платформа Mux обеспечивает высококачественный стриминг, управляемый удобным API, так что вы можете сфокусироваться на создании своего продукта. Он чрезвычайно гибок и предлагает функции для...
Прототипирование без API
Я из тех, кто обычно очень нетерпелив, когда менеджер раскрывает функции нового продукта. После спринта я задаю этот ужасающий, трепещущий вопрос:
… API уже готов?..
И ответ...
Осторожно! Angular крадет ваше время
Angular может все — ну или почти все. Но иногда это «почти» заставляет вас тратить время на написание обходных решений или на попытки понять,...
Динамические заголовки страницы в Angular
Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript.
В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для всего приложения и как изменить заголовок...
Введение в Web Share API
С каждым днем новые технологии сокращают разрыв между вебом и нативными приложениями. Один из таких примеров — прогрессивные веб-приложения, которые добавили в Интернет множество...
Веселимся с Angular и трансформаторами в TypeScript
Вам знакома проблема обработки подписок на RxJs вручную? Помните, как забыли одну? Или однажды подумали, что использование AsyncPipe в шаблоне будет безопасно, но...
Отложенная загрузка изображений с помощью Intersection Observer API
Изображения составляют огромный процент содержания веб-страниц. Однако чем больше изображений, тем медленнее загружается страница.
Большое количество изображений на сайте значительно влияет на его производительность. Отложенная...
Использование Angular Elements с расширением Chrome
Познакомьтесь с Angular Elements
Angular Elements все еще широко не используется, хотя является мощным инструментом для создания независимых и автономных компонентов. Его можно использовать на любом...
Поиск и использование компонентов с bit.dev для создания приложений
Bit упрощает использование компонентов из библиотек и приложений. Bit’s hub (bit.dev) облегчает поиск и взаимодействие с этими компонентами.
В этой статье мы узнаем, как найти...
50 вопросов, ответы на которые вы должны знать, прежде чем идти на собеседование по...
Собеседования c разработчиками напоминают Дикий Запад. Никто толком не понимает, чем занимается. Большинство технических рекрутеров не могут отличить Java от JavaScript. Тем не...
Прототипирование с веб-компонентами: создание RSS Reader
Приготовьтесь отправиться в путешествие по изучению прототипирования приложения с помощью веб-компонентов, модулей es6, event target, bit cli и т. д. Вместе мы узнаем, как...
Var, let и const в JavaScript
Пока я разбирался что к чему в основах JavaScript, я наткнулся на три способа объявления переменных, а именно var, let и const. В данной...
VSCode. 27 расширений для JavaScript разработчика
27 плагинов для Visual Studio Code, которые расширят ваши возможности и повысят эффективность.
Улучшите производительность с помощью веб-воркеров
Введение
В этой статье мы рассмотрим, как использовать веб-воркеры для повышения производительности при запуске. Примеры будут в приложении Angular 8 — с ним проще начать работать с...
Знакомство с наблюдателями Vue JS
Vue JS создан Эваном Ю и 234+ любителями в сообществе. Это прогрессивный фреймворк для создания пользовательских интерфейсов. Он состоит из простой базовой библиотеки, которая...
Новые API интернационализации в JavaScript
Intl — глобальный объект для форматирования строк, чисел и дат с учётом языка пользователя. Он работает над отображением зависящей от языка информации.
Интернационализация — способ...
Все, что вам нужно знать про Ivy, новый движок для Angular!
Около года назад команда Angular объявила на ng-conf (конференция по Angular), что она работает над Angular Ivy. Хотя он еще не на 100% готов...
Миграция REST API на GraphQL
GraphQL появился относительно недавно, а значит, разработчики API не уверены, писать следующий API на GraphQL или нет. Очевидно, что REST API хорошо знаком программистам...
Использование стека навигации SwiftUI для идеального поведения TabView
Объясним на примерах, как с помощью перечислений enum и стека навигации NavigationStack SwiftUI обеспечить ожидаемое поведение TabView.
Реализация односвязного списка в Golang
Разберем структуру односвязного списка, компоненты его узлов. Рассмотрим четыре способа вставить и удалить данные в связном списке, реализацию с ним других операций.
Создание кольцевой диаграммы на JavaScript
Предлагаем пошаговое руководство по созданию и настройке на JavaScript интерактивной кольцевой диаграммы. Следуя ему, вы приобретете навыки и знания, которые позволят создавать персонализированные кольцевые диаграммы.
Как находиться в потоке, программируя в парах
Не так давно я поинтересовался у коллег по команде, может ли разработчик находиться в потоке, программируя в паре. Ответ по-настоящему меня удивил. Дело в...
Продвинутые темы SQL для дата-инженеров
Рассмотрим важные техники SQL, иллюстрируя их примерами применения набора данных: объединение таблиц, подзапросы и оконные функции, фильтрацию и агрегирование. Освоив их, вы будете лучше справляться с анализом и визуализацией данных и сможете повысить качество принимаемых в организациях решений.