Web-разработка

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

CSS

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

Если вы в последнее время заходили в интернет, то, скорее всего, видели красивую анимацию загрузки, которая заполняет страницу, прежде чем элегантно подгрузится...
JavaScript

Движок JavaScript: что внутри

Введение Чтобы разобраться в том, как работает механизм обработки кода (иначе говоря, движок JavaScript), надо понять, что происходит при...
JavaScript

Состояние микрофронтендов

Одна из наиболее противоречивых тем во фронтенд-разработке — это микрофронтенды. Заслуживают ли они внимания? Стоит ли на самом деле разделять приложение? Нужны ли они...
OpenGraph

Что такое Open Graph и как применять его для веб-сайта?

На то, чтобы наполнять сайт контентом и поддерживать его, уходит много времени. Как удостовериться в том, что контент отображается правильно, когда им...
Logging

Профессиональный подход к ведению логов

Логи можно сравнить с уликами на месте преступления, а разработчиков — с криминалистами. Роль логов трудно переоценить, ведь когда необходимо найти баг или причину...
CSS

Псевдоклассы CSS, на которые стоит обратить внимание

Согласно определению из "CSS: The Definitive Guide" Эрика Майера (Eric Meyer) и Эстеля Вейля (Estelle Weyl): С помощью...
VSCode

Любовь к программированию начинается с расширений VS Code

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

Плохие практики Angular

Загрязнение ngOnInit ngOnInit - один из самых важных хуков жизненного цикла в компонентах Angular. Он используется для инициализации данных,...
CSS

Медиа-запросы CSS: точки останова, типы устройств, стандартные разрешения и многое другое

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

Что значит this в JavaSсript?

Значение this — одна из самых запутанных составляющих JavaSсript. this может принимать различные значения в зависимости от того, где располагается. В...
JavaScript

Как работает новый await верхнего уровня в JavaScript

Раньше, чтобы использовать await, код нужно было помещать в асинхронную функцию. Это означало, что вы не могли использовать его вне какого-либо обозначения...
React

Сможет ли Vue.js превзойти React в 2020 году?

Предыстория Прежде чем углубиться в тему, кратко рассмотрим общие сведения об этих двух фреймворках. React,...
JavaScript

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

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

Хочешь стать веб-разработчиком? Учи Node.js, а не PHP

Один из самых частых вопросов, которые я слышу от своих учеников, звучит так: "Почему вы преподаете нам Node.js, а не PHP?" Ответ "Поверьте, я...
Java

Топ - 9 фреймворков Java в 2020 году

Язык Java в настоящее временя участвует в функционировании 134 861 сайта, включая ESPN, SnapDeal, Alibaba и т.д. За всю историю существования этот...
JavaScript

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

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

Руководство для начинающих по Git: что такое журнал изменений и как его создать

Допустим, вы разработчик и на одном из ваших проектов используете Git. Вы хотите поделиться сделанными вами изменениями с другими пользователями, но не...
Golang

Как сделать приложение-чат с Redis, WebSocket и Go

Протокол WebSocket предоставляет двунаправленный (сервер и клиент могут обмениваться сообщениями) и полнодуплексный (сервер или клиент могут отправлять сообщения одновременно) канал связи, подходящий...
UI Design

10 заповедей UI-дизайна

Этот список составлен на основе книги "101 UX-принцип" (101 UX Principles), написанной Уиллом Грантом (Will Grant). 1. Пустые...
JavaScript

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

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

Станут ли прогрессивные веб-приложения заменой нативным?

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

Декораторы в JavaScript

Декораторы - это объекты, которые используются для динамического добавления дополнительной функциональности к другому объекту без изменения реализации этого объекта.
JavaScript

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

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

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

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

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

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

11 главных фронтенд-трендов на 2020 год

1. Микрофронтенды Звучит иронично, но несмотря на то, что фронтенд-разработка обладает модульными преимуществами компонентов, она все еще более...
JavaScript

Чистый код JavaScript — Вертикальное форматирование

Зачем форматировать код? Правильное форматирование кода - это ключ к коммуникации. Читаемость важна не только для нас, но...
JavaScript

Создание тестового фреймворка JavaScript

Фреймворк модульного тестирования Суть модульного тестирования заключается в проверке небольших изолированных фрагментов кода. Если тест использует внешний ресурс, например...
Java Script

11 сверхполезных советов для JavaScript разработки

1. Преобразование в Boolean с помощью оператора !! Иногда нам необходимо проверить существование переменной или наличие у нее верного...
Java Script

Компоновщик в JavaScript

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

Что такое Deno и заменит ли он NodeJS?

Для тех, кто не совсем в теме, Deno — это детище Райана Даля, ставшего известным благодаря созданию Node.js, который вам, наверняка, знаком. Значит ли...
CSS & JavaScript

Советы по анимации с CSS и JavaScript

Основы “плавности” Анимации - важная часть создания привлекательных веб-приложений и сайтов. Пользователи ожидают высокую отзывчивость и интерактивность.
JavaScript

Лучшие практики JavaScript — производительность

Ограничение доступа к переменным и свойствам Задача состоит в том, чтобы сократить время доступа к переменным и свойствам...
JavaScript

Чистый код JavaScript - объекты и классы

При написании чистого кода нужно быть осторожным с объектами, классами или конструкторами, которые мы объявляем. Мы не хотим предоставлять данные, которые не...
Redux

Секретные материалы: тайная сторона Redux становится явной ?

В процессе создания всё более сложных и крупных приложений в React начинаешь понимать, что управление общим состоянием всего приложения невозможно только при...
UX

Основы дизайна, которые должен знать каждый креативщик

Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может...
JavaScript

Чистый код на JavaScript: вертикальное форматирование

Форматирование кода в легко читаемый во многом определяет его итоговую чистоту. Не отформатированный как следует код требует больше умственных усилий для понимания. 
JavaScript

Кто придет на замену JavaScript

Десять лет назад никто не догадывался о том, что JavaScript будет править миром. Другие платформы, такие как Java, Flash и Silverlight, также...
JavaScript

Краткое руководство по ООП в JS

В данной статье я постараюсь объяснить новые возможности ES6 JavaScript с точки зрения объектно-ориентированной парадигмы. Для начала,
JavaScript

Сравниваем различные способы выполнения HTTP-запросов в JavaScript

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

Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»

От веб-разработчика на собеседовании требуется продемонстрировать хорошие знания PHP и Javascript. Всего один простой вопрос помогает выявить, действительно ли разбирается человек в...
UX

Я разработал и запустил MVP продукт за 5 дней

За последний год я запустил несколько продуктов, каждый из которых потребовал от 3 до 6 месяцев от момента возникновения идеи до запуска....
Node.js

Веб-скрапинг с помощью Node.js — Часть 2

Предыдущие части: Часть 1 В предыдущей статье я рассказывал о том, как извлекать статические данные с помощью Node.js. В настоящее...
Software Architecture

Архитектура ПО: разница между архитектурой и проектированием

Многие не знают, в чем состоит разница между архитектурой и проектированием приложения. Даже сами разработчики зачастую не могут разобрать строку кода и могут спутать...
Ember

Ember.js или Vue.js: какой фреймворк выбрать?

Изначально JavaScript создавался для работы с веб-приложениями, однако теперь он используется для создания мобильных приложений. Фреймворки на основе JavaScript популярны среди разработчиков,...
Web Development

Что такое Throttling и Debouncing?

Throttling и debouncing — это широко используемые техники для увеличения производительности кода, который выполняется повторно с некоторой периодичностью. Давайте разберёмся, как...
JavaScript

Введение в регулярные выражения в JavaScript

Введение Первым делом необходимо выяснить, что такое регулярные выражения. Регулярные выражения — это способ описания шаблона или правила. Их можно...
JavaScript

Асинхронный JavaScript ― Цикл обработки событий

В этой статье вы узнаете, как работает асинхронность в JavaScript JavaScript — однопоточный язык программирования. Движок JS единовременно может обрабатывать только одно выражение — в одном потоке. С одной стороны,...
JavaScript

Дуэт Markdown и JavaScript (mdjs) - залог отличной документации

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

Изучаем WebAssembly с помощью Rust

Внимание: с этой статьёй вы не освоите Rust, зато сможете быстро разобраться и приступить к работе с WASM, используя замечательный инструментарий wasm-pack...
PWA

Превращаем веб-сайт в PWA

Согласно этой статье из CNBC, к 2025 году почти три четверти населения мира будут использовать для доступа к интернету только смартфоны. Поэтому,...
JavaScript

Хроники нового текстового редактора - от замысла до реализации

Стандартный Apple Notes, более продвинутый Google Docs, Microsoft Word и Medium — всё это редакторы, которые позволяют фиксировать наши важные мысли и информацию, тем...
Back End

У приложений будущего может не быть бэкенда

История циклична. Я создал свой первый веб-сайт в 1999 году с помощью самых передовых технологий, доступных веб-мастерам (не могу...
React

5 способов стилизовать компоненты React в 2019

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

Установка Next.js с использованием клиентского сервера Express и TypeScript

В этом посте я проведу вас по пути создания приложения Next.js, обслуживаемого клиентским сервером Express c применением фреймворка Typescript. Полную версию проекта...
OOP

Объектно-ориентированное программирование для самых маленьких

Вы когда-нибудь замечали, что на собеседованиях задают одни и те же клишированные вопросы? Уверен, вы поняли, что я имею ввиду. Ну вот, к примеру: Кем вы видите...
Sass

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

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

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

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

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

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

Репозитории GitHub в помощь каждому веб-разработчику

Я недавно узнал о репозитории с полезным контентом (что для меня самое важное) и решил углубиться в тему, составив список репозиториев GitHub,...
PWA

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

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

10 рекомендаций по ускорению рабочего процесса в Visual Studio Code

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

Из двух модулей Angular выбирай лучший- задачка для программиста

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

Отображение нативных всплывающих окон с помощью API уведомлений JavaScript

API уведомлений позволяет отображать всплывающие окна как нативные уведомления на рабочем столе или на экране мобильного телефона. Функциональность варьируется от платформы к...
Micro Frontends

Связь между микро-фронтендами

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

3 способа визуализации больших списков в Angular

Мы рассмотрим следующие техники: виртуальная прокрутка (с использованием Angular CDK), ручной рендеринг и прогрессивный рендеринг. Несмотря на то, что для их реализации...
Java Script

Хватит везде использовать ===

Многие разработчики постоянно используют === вместо ==, но почему? Большинство из просмотренных мной обучающих программ предполагают, что поскольку слишком...
RedwoodJS

Взгляд на RedwoodJS

Привносим фулстек в JAMstack Несколько дней назад я просматривал Hacker News и наткнулся на интересный пост под названием “Redwood: интегрированный...
Java Script

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

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

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

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

Чистый код JavaScript: обработка ошибок

Обработка ошибок — важная часть любой программы. Зачастую программы сталкиваются с неожиданными значениями, которые нужно правильно обрабатывать. В этой статье мы...
React

Как загружать изображения в RAILS API и возвращать их обратно

Мне потребовалась неделя, чтобы написать back-end основу для Supagram при помощи Rails API. Supagram — это легкий браузерный клон Instagram, в котором есть те...
JavaScript

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

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

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

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

Индексирование коммитов с Git Add Patch

Для разработчика нет, наверное, ничего более увлекательного, чем запуск нового проекта. Начинается он с разработки доменной модели и планирования логики предметной области....
Kivy

Python для Android: Как начать делать кроссплатформенные приложения с Kivy

В этом руководстве приведены шаги, необходимые для создания кроссплатформенного приложения для Android с использованием Python-фреймворка Kivy и Linux Ubuntu. Перед началом установки и запуском...
CSS

Как сделать темную тему с помощью CSS

На днях я баловался с темной версией в новой версии MacOS Mojave. Мои глаза не на 100% рады, но это особенно полезно, когда залипаешь...
CSS

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

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

Введение в Webpack для новичков

Что такое Webpack? Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей. При большом количестве файлов он создает один объемный файл...
Web Server

Веб-сервер с нуля в TypeScript и Node

Сокеты и TCP С помощью сокетов процессы на компьютере взаимодействуют друг с другом через файловую систему. Сокеты представляют собой...
React

Как с нуля создать проект на React, используя Webpack 4 и Babel

Недавно я начал изучать React и для создания проектов я использовал create-react-app, чтобы быстро и без особых усилий добиться желаемого результата. Я подозреваю, что...
React Angular Vue

ReactJS, Angular5 и Vue.js — какой фреймворк выбрать в 2018 году?

Некоторое время назад мы опубликовали статью, в которой сравнили Angular 2 и React. В ней мы обсудили плюсы и минусы этих фреймворков и предположили,...
Java Script

Лучшие практики JavaScript: объекты

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

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

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

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

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

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

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

Фильтры в Vue.js

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

Первые шаги в анимации React Native

Когда я только начал работать с React Native (RN), у меня никогда не доходили руки до изучения анимации. Многие вещи казались важнее,...
JavaScript

Представляем объект JS Window - видимость и дочерние элементы

Объект window — глобальный объект, обладающий свойствами, относящимися к текущему документу DOM — тому, что находится во вкладке браузера.  Он включает в себя...
React

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

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

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

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

Ruby on Rails меняет всё

Ruby on Rails поможет вам сэкономить кучу времени при написании кода. Пишите меньше, достигая тех же целей, которых достигли бы при помощи других языков. От...
javascript

Javascript и функциональное программирование. Часть 4: каррирование

Предыдущие статьи: Часть 1, Часть 2, Часть 3 Каррированием называется метод, при котором мы вызываем функцию с меньшим количеством аргументов. Но функция эта возвращает значения...
React

Версионирование независимых UI-компонентов

Большинство компонентов версионируются как часть проекта (например, component-library), что противоречит концепции создания модульных UI-приложений. Например, чтобы использовать слайдер-компонент, нужно внедрить в приложение...
Java Script

10 отличных JavaScript библиотек на 2020 год

JavaScript  —  язык интернета. Вы можете запускать его в браузере или на сервере, а можете использовать для мобильных приложений.
Web Design

9 лучших примеров макетов сайта и идей для веб-дизайна в 2018

Есть всего одна возможность создать хорошее первое впечатление. Качественный дизайн сайта может в первую же секунду поразить посетителя. Именно поэтому дизайн главной страницы очень...
Electron

Создаём «ToDo» приложение с помощью Electron

Мы будем создавать приложение ToDo с помощью библиотеки Electron. Мы затронем следующие темы: хранение данных, использование нескольких окон, взаимодействие между браузерами. Что необходимо для этого Я...
JavaScript

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

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

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

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

Даты-заглушки в модульных тестах на JavaSсript

Тестирование наших приложений может быть утомительным и трудоемким делом. Вот почему мы пишем автоматизированные тесты: ради того, чтобы убедиться, что наш код...
Golang

Как сделать приложение-чат с Redis, WebSocket и Go

Протокол WebSocket предоставляет двунаправленный (сервер и клиент могут обмениваться сообщениями) и полнодуплексный (сервер или клиент могут отправлять сообщения одновременно) канал связи, подходящий...
Data

Будущее данных: децентрализованная графовая база данных

Происходит смена парадигмы, которая коренным образом изменит способы хранения, обработки и передачи данных внутри компаний. Эта смена породит изобилие новых возможностей, в...
Golang

Интерфейсы в Go для повышения тестируемости кода

Интерфейсы в Go Интерфейсы  —  это абстракции, описывающие поведение различных типов, но не определяющие детали его реализации. Например, вы можете...
Component Library

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

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