Web Dev

Все что касается web development: Front end, Back end, Full stack; HTML, CSS, JavaScript, фреймворки, технологии, безопасность и многое другое!

JavaScript

3 способа клонирования объектов в JavaScript

Поскольку объекты в #JavaScript являются ссылочными значениями, их нельзя просто скопировать с помощью =. Но не беспокойтесь, существует 3 способа клонирования объекта...
React

Компоненты высшего порядка в React

В этой статье мы рассмотрим компоненты высшего порядка (Higher-Order Components, HOC) в React. Что такое HOC?
Java Script

Увеличиваем производительность приложения React + Redux с библиотекой Reselect

Селекторы — это очень простой способ выбрать состояние из хранилища redux, которое содержит всю логику и данные приложения. Если вы создаёте...
JavaScript

Основы JavaScript: управление DOM элементами (часть 3)

Часть 1, Часть 2, Часть 3 Навигация по DOM элементам Обход DOM или, проще говоря,...
JavaScript

Основы JavaScript: управление DOM элементами (часть 2)

Часть 1, Часть 2 Получаем доступ к DOM элементам В данном разделе мы посмотрим на методы,...
JavaScript

Основы JavaScript: управление DOM элементами (часть 1)

Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования,...
JavaScript

10 правил программирования NASA

10 правил, призванных облегчить проведение контроля и статического анализа кода. Вот что об этих правилах говорят в NASA:
Vuejs

Переключение между табличным и списковым представлением в Vue.js

Представляйте любой массив данных и переключайтесь между визуализациями Vue.js — это простой в изучении, быстрый, легковесный и очень перспективный фреймворк.
React

Экспорт данных в Excel с React

В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже.
JavaScript

Почему написание собственного кода делает вас лучшим разработчиком

На днях я проводил собеседование на позицию senior разработчика JavaScript. Мой коллега, тоже присутствовавший на собеседовании, попросил претендента написать функцию, которая будет...
Angular

Повесть об однонаправленном потоке данных в Angular

У Angular есть свои фишки и причуды. В то время как React реализует модель однонаправленного потока данных по умолчанию, Angular с самого...
Ruby on Rails

Создаем функции поиска и фильтрации в Ruby on Rails

Ruby on Rails замечательно подходит для создания мощного и гибкого бэкенда. Однако из-за популярности и гибкости JavaScript, Ruby используется для фронтэнда не...
Vue.js 3

Vue.js 3: программирование, ориентированное на будущее

Если вы используете Vue.js, то знаете, что версия 3.X будет выпущена в ближайшее время. На данный момент новая версия находится в активной...
JavaScript

Оператор Spread и деструктуризация в JavaScript: практическое руководство

Некоторые языки программирования содержат операторы, которые встречаются достаточно редко, присутствуют не в каждом языке или используют разный синтаксис. В этой статье мы...
JavaScript

Как работает JavaScript

Ранее JavaScript предназначался для использования в веб-браузерах, однако ситуация изменилась с развитием Node. Мы знаем, как, где и когда его использовать. Но...
Angular

Платформы Аngular в деталях. Часть 4. Визуализация Angular-приложений в терминале

Часть 1, Часть 2, Часть 3, Часть 4 В этой статье, последней из серии статей «Платформы Angular в деталях»,...
Angular

Платформы Аngular в деталях. Часть 3. Визуализация Angular-приложений в терминале

Часть 1, Часть 2, Часть 3 В этой статье мы с вами приступим к процессу создания пользовательской платформы....
Angular

Платформы Angular в деталях. Часть 2. Процесс начальной загрузки приложения

Часть 1, Часть 2 Фреймворк Angular был задуман платформенно-независимым. Такой подход позволяет запускать Angular-приложения в разных средах: в браузере,...
Angular

Платформы Angular в деталях. Часть 1. Что такое платформы Angular?

Инфраструктура для разработки приложений Angular была задумана как платформенно-независимая технология (далее по тексту — фреймворк). Такой подход позволяет запускать приложения на Angular в разных...
Component Library

Как создать библиотеку компонентов для совместного использования

Пример Прежде чем начать, рассмотрим пример того, что должно получиться в результате. Здесь можно найти библиотеку Semantic-UI-React. Этот...
Layout

Layout для Material-UI

Material-UI — одна из самых популярных библиотек компонентов react. Однако невозможно найти ни одной инструкции или статьи о том, как создать layout на...
React

React Native vs Flutter

Сегодня в мире насчитывается порядка 2,5 миллиардов пользователей смартфонов, и их количество только растёт. Смартфоны используют для разных целей, начиная от установки...
Angular

Переиспользование форм в Angular

Проект в Stackblitz со всеми примерами в конце поста. Переиспользуемые элементы управления Проблема
Java Script

Как JavaScript повзрослел и стал настоящим языком

Мало кто представлял себе, что этот язык превратится в профессиональную платформу Если ещё лет 20 назад вы бы...
Software Development

Создаем голосовое приложения для Alexa и Google Home

Голосовые приложения полностью изменили наше общение с цифровым миром. Голос добавляет во взаимодействие человека и компьютера новое измерение, которое разработчики только начинают...
Java Script

Как не лажать с JavaScript. Часть 3

Часть 1, Часть 2, Часть 3 Изменяемое состояние Photo by Alexey Turenkov on Unsplash
Java Script

Основы JavaScript: функции

Функции могут считаться как одними из ключевых строительных блоков JavaScript программ. Функция — это просто набор команд, разработанных для выполнения определенной задачи, которая исполняется...
API

Улучшение производительности .NET Core API

Google предоставляет такую статистику посещаемости веб-страниц: 53% посетителей мобильных сайтов покидают страницу, если она загружается более трёх секунд.https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
Java Script

Функции-генераторы в JavaScript для оптимизации памяти

Управление памятью: обычные функции JavaScript против функций-генераторов Едва ли не каждый программист сталкивается с проблемой перебора большого количества...
Vue

10 особенностей создания компонентов Vue.js

1. Глобальная и локальная загрузка компонентов Vue.js предоставляет два способа загрузки компонентов: глобально на экземпляре Vue и на...
Java Script

Как не лажать с JavaScript. Часть 2

Часть 1, Часть 2 Значение рефакторинга Photo by Jason Leung on Unsplash Рефакторинг — это...
Java Script

Как не лажать с JavaScript. Часть 1

Часть 1, Часть 2 JavaScript самый распространенный язык программирования в мире и с его силой нужно считаться. Благодаря своей...
Learning

Кнопка sign-in для вашего веб-приложения

Далее вы узнаете, как использовать библиотеку gapi для настройки аутентификации, как произвести вход пользователя, а также я покажу несколько сниппетов для обработки...
Java Script

JavaScript Symbols. Новый тип примитивов

Введение В JavaScript есть два основных типа значений. Первый тип — это примитивы, а второй — объекты (в том числе функции). Примитивы — это простые...
Java Script

3 вида циклов for в JavaScript

Каждый знает хотя бы один вид цикла for. Это классика, и они есть почти в каждом языке. В JavaScript есть три вида...
Vue

Прототипирование для Vue

С июля 2019 года Vue занимает третье место по количеству звезд на Github. Он опережает React более чем на 10 000 звезд...
React

Стриминг видео и чат в учебном приложении

Платформа Mux обеспечивает высококачественный стриминг, управляемый удобным API, так что вы можете сфокусироваться на создании своего продукта. Он чрезвычайно гибок и предлагает...
Angular

Прототипирование без API

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

Осторожно! Angular крадет ваше время

Angular может все  —  ну или почти все. Но иногда это «почти» заставляет вас тратить время на написание обходных решений или на...
Angular

Динамические заголовки страницы в Angular

Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript.  В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для...
JavaScript

Введение в Web Share API

С каждым днем новые технологии сокращают разрыв между вебом и нативными приложениями. Один из таких примеров  —  прогрессивные веб-приложения, которые добавили в...
Angular

Веселимся с Angular и трансформаторами в TypeScript

Вам знакома проблема обработки подписок на RxJs вручную? Помните, как забыли одну? Или однажды подумали, что использование AsyncPipe в шаблоне будет...
Lazy loading

Отложенная загрузка изображений с помощью Intersection Observer API

Изображения составляют огромный процент содержания веб-страниц. Однако чем больше изображений, тем медленнее загружается страница. Большое количество изображений на сайте...
Angular

Использование Angular Elements с расширением Chrome

Познакомьтесь с Angular Elements Angular Elements все еще широко не используется, хотя является мощным инструментом для создания независимых и автономных...
React

Поиск и использование компонентов с bit.dev для создания приложений

Bit упрощает использование компонентов из библиотек и приложений. Bit’s hub (bit.dev) облегчает поиск и взаимодействие с этими компонентами. В...
JavaScript

50 вопросов, ответы на которые вы должны знать, прежде чем идти на собеседование по...

Собеседования c разработчиками напоминают Дикий Запад. Никто толком не понимает, чем занимается. Большинство технических рекрутеров не могут отличить Java от JavaScript. ...
JavaScript

Прототипирование с веб-компонентами: создание RSS Reader

Приготовьтесь отправиться в путешествие по изучению прототипирования приложения с помощью веб-компонентов, модулей es6, event target, bit cli и т. д. Вместе мы...
JavaScript

Var, let и const в JavaScript

Пока я разбирался что к чему в основах JavaScript, я наткнулся на три способа объявления переменных, а именно var, let и const....
JavaScript

VSCode. 27 расширений для JavaScript разработчика

VSCode — один из лучших редакторов кода на сегодняшний день. Тем не менее удобство и эффективность во многом обеспечивают именно расширения для редактора.
Angular

Улучшите производительность с помощью веб-воркеров

Введение В этой статье мы рассмотрим, как использовать веб-воркеры для повышения производительности при запуске. Примеры будут в приложении Angular...
Vue

Знакомство с наблюдателями Vue JS

Vue JS создан Эваном Ю и 234+ любителями в сообществе. Это прогрессивный фреймворк для создания пользовательских интерфейсов. Он состоит из простой базовой...
JavaScript

Новые API интернационализации в JavaScript

Intl  —  глобальный объект для форматирования строк, чисел и дат с учётом языка пользователя. Он работает над отображением зависящей от языка информации.
Angular

Все, что вам нужно знать про Ivy, новый движок для Angular!

Около года назад команда Angular объявила на ng-conf (конференция по Angular), что она работает над Angular Ivy. Хотя он еще не на...
GraphQL

Миграция REST API на GraphQL

GraphQL появился относительно недавно, а значит, разработчики API не уверены, писать следующий API на GraphQL или нет. Очевидно, что REST API хорошо...
Angular

Оптимизация размера Angular bundle за 4 шага

Вам доводилось получать жалобы на слишком медленную загрузку веб-приложения или получать задачу “оптимизировать производительность” медленного приложения? Множество тем посвящено производительности приложений: отложенная...
JavaScript

7 FrontEnd трендов и инструментов для JavaScript на 2020

Мир JavaScript быстро развивается. Изменения во фронтенде и веб-разработке происходят невероятно быстро. Сегодня, если вы не мастер Webpack, React...
Angular

Повторные попытки HTTP-запросов в Angular

Доступ к данным из бэкенда — основа почти каждого одностраничного приложения. Весь динамический контент загружается с сервера. В большинстве случаев HTTP-запросы...
Angular

Визуализация данных и веб-отчёты в Angular

Недавно я столкнулась со следующей проблемой: мне нужно было найти полностью настраиваемые веб-компоненты, с которыми несложно взаимодействовать и которые могут использоваться как...
VueJS

Фильтры в Vue.js

Vue JS, созданный Эваном Ю и членами сообщества, представляет собой прогрессивный фреймворк для создания пользовательских интерфейсов. Он состоит из открытой базовой библиотеки,...
JavaScript

Ваш REST  -  это не API. И вот почему!

Отдавать JSON не значит иметь API Прежде всего, нужно уточнить несколько вещей об API. Отдающий JSON бэкенд  —  это не...
JavaScript

Создание музыкального бота с помощью Discord.js

API discord предоставляет инструмент для создания и использования ботов. Рассмотрим пример создания базового музыкального бота и добавления его на сервер. Бот сможет...
JavaScript

7 инструментов для разработки веб-компонентов в 2019 году

Компоненты и виджеты, разработанные по стандартам веб-компонентов, работают в современных браузерах и используются с библиотеками JavaScript и фреймворками, работающими с HTML.
Vue

Введение в вычисляемые свойства в Vue JS

Причины, по которым ‘вычисляемые свойства’ играют важную роль при написании чистого и эффективного кода Vue Vue JS, созданный Эваном...
TypeScript

Новые функции в TypeScript

Введение TypeScript — это сильно типизированный, объектно-ориентированный и компилируемый open-source язык, разработанный и поддерживаемый компанией Microsoft. Он был создан в целях...
JavaScript

Рекомендации по изучению JavaScript

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

Прогрессивные веб-приложения для начинающих

Недавно мир приложений разделился на две категории: появились приложения для устройств Android и iOS. Возможно, многие слышали о прогрессивных веб-приложениях (PWA), однако...
Nuxt

Обновления в Nuxt JS 2.8.0

Nuxt JS Nuxt — это фреймворк для создания одностраничных, статических и универсальных приложений Vue. С его помощью можно с легкостью создавать...
React

Создание компонента Timeline с React

При работе над новой страницей своего веб-сайта я решил добавить Timeline, чтобы показать свои профессиональные достижения за последние годы. С помощью временной...
Design

Как обрести уверенность дизайнеру

Дизайнеры часто сталкиваются с такими проблемами, как отсутствие уверенности и синдром самозванца. Как же стать уверенным в себе специалистом по дизайну?
JavaScript

Как это использовать: объявление функции и функциональные выражения

Первое отличие: название Если вы создаёте функцию с названием, то вам необходимо объявить функцию. В функциональных выражениях же название не...
JavaScript

9 UI-библиотек веб-компонентов, которые пригодятся в 2019 году

Пользовательские компоненты и виджеты, разработанные по стандартам веб-компонентов, работают в современных браузерах и используются в библиотеках или фреймворках JavaScript, работающих с...
JavaScript

Создание чат-приложения в режиме реального времени с Vue.js, Socket.IO и Node.js

В статье я расскажу, как можно создать чат-приложение в режиме реального времени с помощью Vue.js, Node.js, Express и SOCKET.IO.
JavaScript

Объяснение понятия «состояние» в JavaScript на примере приготовления простого блюда

Когда вы начинаете писать простые JavaScript программы, вам не нужно волноваться о количестве используемых вами переменных или о том, как работают разные...
Design

Как добавить темную тему для сайта

Один сайт — две разные темы В прошлом году я решил провести полный редизайн своего сайта. Так как это был сайт-портфолио,...
JavaScript

6 лучших JS-библиотек для визуализации данных и создания отчетов

Веб-инструменты для отчетов используются для представления, создания и изменения отчетов с помощью веб-интерфейса — веб-браузера. Эти инструменты могут быть встроены в сторонние...
Web Development

Как написать хороший HTML & CSS код с помощью Webflow

Недавно я воспользовался Webflow, чтобы сгенерировать большую часть HTML и CSS кода, предназначенного для главной страницы. Закончив, я понял, что с помощью...
Adobe

Прощай, Adobe

Впервые я познакомилась с программами от компании Adobe примерно десять лет назад, когда, будучи подростком, открыла для себя Photoshop и магические свойства...
JavaScript

Почему в JavaScript, в функцию лучше передавать только один аргумент?

В JavaScript нет определённой идеи о ключах, передаваемых в аргументах, и в тоже время этот язык необычайно гибкий, когда дело касается передачи...
CSS

Решение проблемы с CSS :hover

:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя. Проблемы с псевдоклассом :hover начались еще с тех пор, как...
Timer

Создание компонента Timer с React и Bit

Рассмотрим пример создания компонента countdown timer в React с использованием Bit. В результате компоненты будут...
UX

Ведущие тенденции веб-разработки в 2019 году

Знаете ли вы, что во всем мире создают и запускают около 200 сайтов в минуту? В мире насчитывается 200...
Design Patterns

Компоненты Wrapper в Vue 2.6 и Vue 3.0

Поговорим о компонентах дизайн-системы, в особенности о компонентах wrapper. Как создать мощную структуру компонента wrapper? В примере будем использовать поле...
Design

Дизайнер и код

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

Теория цвета для дизайнеров - краткий курс (с инфографикой)

Каждый профессиональный дизайнер знает, что цвета оказывают значительное влияние на цифровые продукты и пользователей. Однако как правильно использовать все потенциальные возможности цвета?
CSS

Основные различия между Flexbox и CSS Grid

Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к...
Design

Что значит быть креативным дизайнером

На главных страницах таких сайтов, как Dribbble или Behance, красуются яркие, уникальные и прекрасно выполненные работы. Несмотря на то, что эти сайты...
Web Development

Как создать двойной слайдер для переключения между формой входа и формой регистрации

Описание проекта Прежде чем мы приступим к написанию кода, я хотел бы разбить...
Web Development

Почему никто не рассказал мне это о CSS

Многим разработчикам, кажется, нет дела до CSS и это не новость. Тем не менее многое из того, что мы узнаём, происходит в...
React

Краткое введение в функции высшего порядка в JavaScript

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

Как создать инструмент командной строки в NodeJS

Мы, как разработчики, живем среди CLI-инструментов. От gitдо cloud shells — этими средствами мы пользуемся повсеместно. И настала пора научиться создавать свои собственные. В...
Bit

Обнаружение компонентов с Bit ✨

Представляем обновленный способ обнаружения и обмена компонентами С момента первого релиза Bit в 2018...
Web Development

Получение доступа к ID элементов в DOM в качестве переменных window/global

Первое, что я узнал, начав заниматься веб-разработкой: как управлять элементами по ID из JS, со ссылкой на элементы по ID
CSS

8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое

В этой статье я поделюсь некоторыми полезными советами и приемами, без понимания которых я бы не смог успешно завершить свой путь по...
JavaScript

Rest и Spread в JavaScript. Возможности, о которых вы не знали

Операторы Rest (остаток) и Spread (расширение) можно использовать не только для разделения и соединения отдельных значений массивов. Здесь я собрал 7 малоизвестных...
Web-design

Проблемы при использовании отзывчивого веб-дизайна

Новый подход к решению старых проблем Отзывчивый веб-дизайн Поскольку прошло уже несколько...
CSS

Создание эффектов при прокрутке

В этом руководстве мы поговорим о том, как создать эффект открывающегося блока при прокрутке. Эффект состоит из сплошного цветного блока, который уменьшается...
Web Scraping

Веб-скрапинг для веб-разработчиков: краткие сведения

Для извлечения данных с веб-страницы существует множество решений и инструментов. Каждый метод обладает своими сильными и слабыми сторонами, знание которых сохранит время...
Startup

Что я понял за год работы программистом в стартапе

Год назад я стал разработчиком в Foxintelligence, стартапе в Париже. До этого я работал в двух компаниях в качестве администратора проектов в...
React

Запуск с нуля: как я создала сайт с нуля при помощи Netlify + Gatsby

После года работы front-end разработчиком, я решила создать свой собственный сайт. Это должна была быть платформа, где я могла показать свою работу,...
Sass

Полный гайд по SCSS/SASS

Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это...
Python

Как изменить PYTHONPATH на Windows

Вы читаете эту статью, потому что пользуетесь: Windows 10+Python 3.3+Anaconda3 … и хотите изменить PYTHONPATH.
Websocket

Использование вебсокетов в промис-стиле

Уже не единожды на просторах интернетов обсуждались плюсы вебсокетов над xmlhttprequest(ajax) запросами. Из них основные — это скорость доставки(т.к. соединение всегда открыто) и экономия ресурсов (т.к....
Statistics

Статистика - это грамматика науки о данных. Часть 4

Повторение статистики для начала путешествия по науке о данных Часть 1, Часть 2, Часть 3, Часть 4, Часть...