Архитектура ПО: разница между архитектурой и проектированием
Многие не знают, в чем состоит разница между архитектурой и проектированием приложения. Даже сами разработчики зачастую не могут разобрать строку кода и могут спутать...
15 часто используемых методов массивов JavaScript
Массивы используются практически в каждом приложении, однако методы некоторых из них довольно запутаны. Эти 15 методов массивов стоит освоить, поскольку они часто применяются на практике.
Лучшие практики JavaScript — производительность
Ограничение доступа к переменным и свойствам
Задача состоит в том, чтобы сократить время доступа к переменным и свойствам объектов в приложениях.
Причина заключается в том, что...
Почему нельзя прерывать цикл forEach в JavaScript
Недавно я проходил собеседование, которое включало сравнение двух разных схем. Опущу детали, но прямо в середине собеседования всплыла одна очень важная вещь — нельзя прерывать цикл...
Профессиональный подход к ведению логов
Логи можно сравнить с уликами на месте преступления, а разработчиков — с криминалистами. Роль логов трудно переоценить, ведь когда необходимо найти баг или причину сбоя, сразу...
Фильтры в Vue.js
Vue JS, созданный Эваном Ю и членами сообщества, представляет собой прогрессивный фреймворк для создания пользовательских интерфейсов. Он состоит из открытой базовой библиотеки, ориентированной на...
Превращаем веб-сайт в PWA
Согласно этой статье из CNBC, к 2025 году почти три четверти населения мира будут использовать для доступа к интернету только смартфоны. Поэтому, если вы...
50 советов, которые помогут улучшить код JavaScript
JavaScript — это мощный и гибкий язык программирования. Он позволяет много экспериментировать, однако это может привести к ошибкам в коде. Чтобы этого избежать, обратите...
TypeScript: основы
Если вы уже знакомы с JavaScript, обязательно освойте TypeScript. Этот язык не просто облегчит написание кода. Он сделает программирование по-настоящему увлекательным процессом.
Синхронизация Git-репозиториев в режиме реального времени
Работая с клиентами на таких платформах, как Github или Gitlab, мы в Gitstart часто сталкиваемся с необходимостью синхронизировать кодовые базы между удаленными репозиториями. По...
Сравниваем WebGL-фреймворки Three.js и Babylon.js
Возможно, вы уже изучили информацию на Slack и Github, сравнивая длинный список плюсов и минусов, но все еще не можете определить, какой же из...
Установка Next.js с использованием клиентского сервера Express и TypeScript
В этом посте я проведу вас по пути создания приложения Next.js, обслуживаемого клиентским сервером Express c применением фреймворка Typescript. Полную версию проекта можно увидеть...
5 самых полезных приемов в JavaScript
Краткая и полезная информация о практичных приемах в JavaScript от опытного разработчика. Если вы уже работали с этим языком, то не будет лишним обновить знания, а новичкам стоит обратить особое внимание на эти приемы.
Как создавать надежные SSL-сертификаты для локальной разработки
Случалось ли так, что вы понимали — необходимо добавить HTTPS в приложение, запущенное на локальном хостинге или каком-нибудь еще местном домене вроде local.my-app.com?
Есть некоторые...
Как подключить базу данных MySQL к сайту на PHP
Работаете c программами на PHP в Linux и у вас есть задача по интегрированию MySQL на сайт на PHP? Тогда это руководство для вас....
Как работает JavaScript: массивы и хэш-таблицы
Структуры данных позволяют не только хранить данные, но и манипулировать ими. Изучение методов и операций, применяемых к структурам данных в JavaScript, позволит вам решать важнейшие бизнес-задачи, в частности повысить эффективность предлагаемого продукта.
Движок JavaScript: что внутри
Введение
Чтобы разобраться в том, как работает механизм обработки кода (иначе говоря, движок JavaScript), надо понять, что происходит при выполнении кода. Такие знания помогают программистам...
5 Методов сохранения состояния в промежутках между перезагрузками страниц в React
1. LocalStorage — классовые компоненты
Один из простых вариантов для сохранения состояния — использовать localStorage в браузере. Рассмотрим пример:
import React from "react";
import "./styles.css";
export default class...
4 Способа обмена данными между вкладками браузера в режиме реального времени
На протяжении многих лет возможности браузеров постоянно увеличивались в ответ на растущие потребности веб-приложений. И теперь у нас есть множество способов получения одной и...
Любовь к программированию начинается с расширений VS Code
Идея написать эту статью родилась у меня много месяцев назад, но всегда что-то мешало воплотить ее в жизнь: то реального кода в ней нет,...
Как улучшить работу с кодом на TypeScript с VSCode
Представьте, что вы бы использовали строго типизированный язык типа JAVA с такой мощной IDE (интегрированной средой разработки), как Eclipse, а затем попробовали бы JavaScript....
Сравниваем различные способы выполнения HTTP-запросов в JavaScript
Недавно мне нужно было выбрать, какую технологию для выполнения вызовов ajax использовать в большом JavaScript проекте. В JavaScript есть различные способы выполнения запросов.
Ранее существовавшие...
Создание простого веб-сервера с помощью Node.js и Express
Node.js с Express — это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки...
3 чудо-приема JavaScript для ускорения разработки
Обзор трех эффективных приемов для JavaScript: создание асинхронного контекста, работа с именованными параметрами и обертывание блоков try/catch.
Создание проекта Django для регистрации и входа/выхода из системы
Поэкспериментируем с Django и расширим знания о его системе аутентификации пользователя.
От HTTP до HTTP 3 - интернета будущего
HTTP расшифровывается как протокол передачи гипертекста. Это набор правил, используемых при доставке веб-страниц с серверов в ваш браузер. HTTPS означает, что тот же протокол...
Основные различия между Flexbox и CSS Grid
Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к двухмерным макетам....
Конец эпохи виртуального DOM (React)
Самый популярный на сегодняшний день преемник устраняет пробел, созданный его предшественником.
Чтобы разобраться в изменчивой структуре фреймворков, заглянем в эпоху JQuery.
В то время кросс-браузерная поддержки для...
4 совета Python Django разработчику
Django — один из самых популярных во всем мире Python-фреймворков: на нем построены многие известные сайты, такие как Instagram, Pinterest, Mozilla.
Хотя уже написано много...
Как в два счета сделать сайт редактируемым извне с помощью данных Google Sheets
Как-то раз заказчики спросили меня, можно ли сделать так, чтобы события и ярмарки на их сайте мгновенно обновлялись. Сегодня я могу сказать: «Да, и...
Резолвер в Angular для предвыборки данных
Что такое резолвер в Angular?
Резолверы в Angular используются для предварительной выборки данных: пока пользователь перенаправляется с одного маршрута на другой, новая доступная страница уже будет...
5 способов стилизовать компоненты React в 2019
Компоненты React — это строительные блоки, из которых мы создаём интерфейсы для приложений. То, как мы стилизуем визуальные элементы, во многом определяет впечатления пользователей...
10 особенностей создания компонентов Vue.js
1. Глобальная и локальная загрузка компонентов
Vue.js предоставляет два способа загрузки компонентов: глобально на экземпляре Vue и на уровне компонентов. Каждый метод обладает своими преимуществами.
При...
Жизненный цикл разработки на примере сайта
Рассмотрим процесс создания сайта с точки зрения жизненного цикла разработки ПО и подробно изучим каждый из 6 его этапов.
Полиморфизм в TypeScript
Как правило, люди думают, что объектно-ориентированное программирование (ООП) и функциональное программирование (ФП) взаимно исключают друг друга. И это объяснимо: любая дискуссия о них довольно...
JavaScript: как удалить значения из массива
Четыре нативных способа удаления значений массива
Массивом называется упорядоченный тип данных, хранящий несколько значений. Это означает, что каждый элемент в массиве имеет числовой идентификатор (индекс), который...
Изучите webpack менее чем за 10 минут
Что такое webpack?
Согласно официальной документации:
“webpack — это статический бандлер (инструмент для сборки модулей в единые пакеты) для современных приложений JavaScript.”
Как разработчики JavaScript, мы знаем, что...
Функциональное программирование в JavaScript: руководство с практическими примерами
Функциональное программирование (ФП) — это стремительно набирающий популярность стиль написания кода. Есть много материалов о концепциях ФП, но мало — о том, как применять их на практике. На...
7 расширений VS Code, которые стоит знать разработчику React
Работаете с React? Используйте эти 7 расширений, чтобы повысить свою продуктивность.
Как читать и понимать документацию API
Если, получив совет “почитать документацию API”, вы так и сделали, но так толком и не поняли, что в ней к чему, то эта статья...
Как сделать темную тему с помощью CSS
На днях я баловался с темной версией в новой версии MacOS Mojave. Мои глаза не на 100% рады, но это особенно полезно, когда залипаешь...
10 отличных JavaScript библиотек на 2020 год
JavaScript — язык интернета. Вы можете запускать его в браузере или на сервере, а можете использовать для мобильных приложений.
Хотя он и хорош сам по...
Сайты для генерации верстки HTML/CSS, которые ускоряют разработку адаптивных интерфейсов
Рассказываем про онлайн-ресурсы для генерации CSS-свойств, разработки адаптивного дизайна, декодирования base64 и получения справки о совместимости браузеров.
3 фундаментальных постулата JS, приближающих вас к Pro-статусу
Постулаты — это то, на чём строится код. Они дают вам предпосылки того, как мыслить, как создавать и как лучше всего писать сам код. Без их...
6 актуальных советов по созданию чистого кода React
Создание чистого кода — одна из важнейших задач при разработке любого программного обеспечения. Большинство крупных компаний стараются создавать ПО с наиболее чистым и производительным...
5 практик JavaScript под пристальным взглядом профи
Чем чище код, тем лучше! Руководствуясь такой логикой, автор детально анализирует несколько практик в JavaScript, обращая внимание программистов на связанные с ними нюансы.
Кто придет на замену JavaScript
Десять лет назад никто не догадывался о том, что JavaScript будет править миром. Другие платформы, такие как Java, Flash и Silverlight, также были сильными...
Как оформить поле ввода: советы и техники
Как быстро и легко разработать поле ввода? Ответим на этот и сопутствующие вопросы доступным языком.
Руководство по Webpack для начинающих
Webpack - мощный и удобный инструмент программиста. Эта технология позволяет разработчику анализировать модули приложения и собирать их в правильном порядке. Рассмотрим подробно, как работает Webpack.
Обработка ошибок API в веб-приложении, используя Axios
Когда вы делаете вызов к бэкенд API с axios, вы должны рассмотреть, что делать с блоком .catch() вашего промиса. Теперь вам может показаться, что ваш...
Создаем приложение React с нуля в 2021 году
➡️ Весь сопутствующий материал доступен на GitHub.
Замысел проекта
Задачей этого руководства было не идти проторенным путем “волшебных” готовых шаблонов (например create-react-app и react-boilerplate), а самостоятельно...
Темная сторона Javascript: избегайте данных трех функций
Оператор Void
Вы, вероятно, уже сталкивались с этим оператором. Раньше при наличии ссылки, запускающей функцию JavaScript, нужно было добавлять href=”javascript:void(0)”, чтобы действие по умолчанию не...
VSCode. 27 расширений для JavaScript разработчика
VSCode — один из лучших редакторов кода на сегодняшний день. Тем не менее удобство и эффективность во многом обеспечивают именно расширения для редактора.
Для VSCode существуют сотни...
Python и веб-разработка: краткое руководство
За последние несколько лет популярность Python резко возросла, и он даже превзошел Java. С развитием машинного обучения, анализа данных и веб-приложений многие разработчики стали...
Создание сайдбара с помощью HTML, CSS и JavaScript
Хотите разработать пользовательскую боковую панель с HTML, CSS и JavaScript? Этот простой и понятный гайд с примерами кода позволит вам создать с нуля боковую панель и настроить ее по своему усмотрению.
5 библиотек JavaScript, которые повысят вашу эффективность
Представляем 5 полезных, но малоизвестных библиотек JavaScript! Они помогут сэкономить силы и время при форматировании дат, обработке URL-параметров и отладке веб-страниц в мобильном терминале.
Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?
CSS может стать вашим лучшим другом или злейшим врагом. Несмотря на то, что он невероятно гибкий, а результаты его применения порой кажутся магией, без...
20 скрытых особенностей JavaScript
Представленные ниже 20 хитростей JavaScript были указаны пользователями Stack Overflow.
1. Работа с аргументами функций
Вам не нужно определять параметры для функции — можете просто использовать...
5 увлекательных игр для изучения основных концепций CSS
Вступление
Для применения CSS необходимо знать множество концепций и понятий. Но привычные способы обучения, предполагающие чтение учебников, просмотр видео и другие методы, иногда могут наскучить....
Введение: 4 новейших операции JavaScript
Технический комитет 39 (TC39) — это группа экспертов по JavaScript, которые работают над стандартизацией ECMAScript.
Рабочий процесс TC39 состоит из нескольких этапов:
Этап 0 (Идея): прием...
Как написать хороший HTML & CSS код с помощью Webflow
Недавно я воспользовался Webflow, чтобы сгенерировать большую часть HTML и CSS кода, предназначенного для главной страницы. Закончив, я понял, что с помощью данного инструмента...
Как использовать JavaScript для расстановки элементов на веб-странице
Вы когда-нибудь видели веб-страницы с абсолютно хаотичной расстановкой элементов? Сложно сфокусироваться, да? К счастью, если очень захотеть, то их можно расставить в нужном порядке с помощью JavaScript!
Советы по повышению производительности JavaScript
Используйте локальные переменные
Когда мы объявляем глобальные переменные, они остаются в памяти на протяжении всего жизненного цикла. Однако, если мы объявляем переменные в локальном контексте,...
Не стоит частить с if в JavaScript
Мне нравится воспринимать логику построения условий как хлеб и масло в среде разработки софта. Она позволяет разработчикам создавать интересные, полезные и веселые продукты.
Самый распространенный...
Что должен знать хороший фронтенд-разработчик
В жизни разработчика бывают дни, когда все идет отлично, а бывают дни, когда появляются мысли о смене профессии. Особенно если учесть, что в программной...
5 непростых вопросов по JavaScript
Разберем пять непростых вопросов: о сравнениях, пустых массивах, странном try catch, стрелочной функции и коварном JSON.stringify. Сможете ответить на них правильно?
Настройте удалённую разработку с VS Code в браузере
В этом руководстве я расскажу о настройке VS Code Server с DigitalOcean и попутно поведаю о приёмах, которые использовал для создания простого и чистого...
3 важных рекомендации Django-программистам
Django — это очень интересный фреймворк, который позволяет создавать веб-приложения с использованием Python для бэкенда. При этом он также может обрабатывать большинство функций базы...
Продвинутые React Hooks: подробный разбор useEffect
С выходом React 16.8 в 2019 году React Hooks наконец-то стали доступны для использования в пригодных для эксплуатации приложениях. Хуки позволяют React-разработчикам делать функциональные...
Как с нуля создать проект на React, используя Webpack 4 и Babel
Недавно я начал изучать React и для создания проектов я использовал create-react-app, чтобы быстро и без особых усилий добиться желаемого результата. Я подозреваю, что...
Знакомимся с основами Angular через создание простого приложения
Готовы сегодня создать что-нибудь интересное? Я тоже!
На данный момент я тружусь в роли Angular-разработчика, создавая для сотрудников нашей компании инструменты, которые помогают им более...
React Single Page Application и React-Router для начинающих
Ваше первое React SPA с нуля: всё, что нужно знать про хуки UseParams, UseLocation и UseHistory, про маршрутизацию и панель навигации
Креативное программирование: методы и инструменты для JavaScript, Python и других языков
Креативное программирование
Задача этого вида программирования состоит в создании не функционального, а выразительного продукта. В этом процессе немаловажную роль играет эстетика, и именно поэтому он...
Прощайте, useState и useEffect: революция в React
Несмотря на свою эффективность, useState и useEffect - не универсальные решения. Представляем набор приемов, которые прокачают ваши навыки и позволят эффективнее справляться с получением и загрузкой данных.
Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript
Улучшите качество кода JS/TS с помощью ESLint. Благодаря этому инструменту, код будет выполнен в едином стиле и без ошибок. Его будет легче просматривать и поддерживать, что благоприятно скажется не только на судьбе вашего проекта, но и на вашей карьере.
Потоки и буферы в Node.js
Для управления потоковыми данными наподобие видео или большого файла в Node.js реализован отдельный потоковый модуль.
В текущей статье мы сконцентрируемся на некоторых принципах его функционирования.
Разделы...
Эффективное использование ESLint
Когда мы взаимодействуем в каком-либо проекте, то лучше всего придерживаться некоего общего стиля написания кода. Это облегчит коллегам его чтение и сократит временные затраты....
Веб-сервер с нуля в TypeScript и Node
Сокеты и TCP
С помощью сокетов процессы на компьютере взаимодействуют друг с другом через файловую систему. Сокеты представляют собой особый тип файлов, предоставляющий процессам информацию...
Руководство для начинающих по Git: что такое журнал изменений и как его создать
Допустим, вы разработчик и на одном из ваших проектов используете Git. Вы хотите поделиться сделанными вами изменениями с другими пользователями, но не знаете, как....
Как создать приложение на Go с gRPC
Разберем преимущества gRPC, 4 типа API и буферы протокола. Реализуем сервер и клиент на Golang с gRPC потоковой передачи данных: определим сообщения и сервисы, сгенерируем для них интерфейс и добавим функциональность.
Поверхностное и глубокое копирование в JavaScript
Копирование переменных в JavaScript таит в себе немало подводных камней, особенно для начинающих программистов. Разбираемся, как использовать поверхностное и глубокое копирование, чтобы избежать досадных ошибок.
Введение в Webpack для новичков
Что такое Webpack?
Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.
При большом количестве файлов он создает один объемный файл...
Продвинутые методы программирования на JavaScript: сравнение элементов двух массивов
Хотите писать более профессиональный код на JavaScript? Заметных успехов при сравнении двух массивов позволят добиться решения опытного разработчика.
Создание приложения Flask на Python для визуализации мест путешествий
Воспоминания о местах путешествий можно хранить не только в сердце, но и на пользовательской карте HERE с прикрепленными на ней фотографиями. Для ее создания воспользуемся Python, API HERE maps, Flask и Heroku.
11 главных фронтенд-трендов на 2020 год
1. Микрофронтенды
Звучит иронично, но несмотря на то, что фронтенд-разработка обладает модульными преимуществами компонентов, она все еще более монолитна, чем бэкенд-микросервисы.
Микрофронтенды предоставляют возможность разделения фронтенд-архитектуры...
API, WebSocket или WebHook: что выбрать?
В любом приложении нужен надежный механизм взаимодействия между его компонентами.
Например, в веб-приложениях необходимо взаимодействие между браузером и сервером. Иногда серверу нужно отправить сообщения обратно...
8 неэффективных практик JavaScript, которых лучше избегать
Отказавшись от неэффективных практик программирования на JavaScript, вы всегда будете писать удобный и легко читаемый код. Это сэкономит вам и вашей команде много времени и обеспечит долгую жизнь вашим продуктам.
Пять алиасов Git, без которых мне не прожить
Я большой фанат коротких путей.
Алиасы, хаки, скрипты, автоматизация, обходные варианты… я люблю избыточную оптимизацию, поэтому неудивительно, что мне особенно нравится функциональность алиасов в Git — настолько,...
Пишем асинхронный неблокирующий Rest API на Java
Рассмотрим способ, как справляться с обработкой больших объемов трафика, а следовательно - повысить производительность вашего приложения и оперативность реагирования сервера на клиентские запросы.
Полный гайд по SCSS/SASS
Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и...
3 совета, как стать мастером Йода по JavaScript
Увидев в проекте на Angular или React устаревший код JavaScript, код-ревьюер сразу определит, что разработчик — новичок. Но если вы воспользуетесь 3 советами из...
Самые популярные фреймворки React
React-фреймворки значительно упрощают жизнь разработчика. Разберем лучшие их образцы и посмотрим, сможем ли мы выбрать оптимальный вариант.
6 современных возможностей JavaScript, о которых не знает большинство разработчиков
Современному JavaScript есть что предложить разработчикам для решения насущных задач. Эти 6 советов помогут писать лаконичный, хорошо читаемый и отлично работающий код JavaScript.
Первые шаги в анимации React Native
Когда я только начал работать с React Native (RN), у меня никогда не доходили руки до изучения анимации. Многие вещи казались важнее, поэтому я...
Как с легкостью создавать формы на React с помощью react-hook-form
Никто не любит раз за разом создавать сложные формы с валидацией, и React-разработчики — не исключение.
Когда дело доходит до создания форм в React, важно...
А вы знали, что для HTML Чак Норрис - это цвет?
Все знают, что Чак Норрис может дышать вакуумом, способен выжать апельсиновый сок из лимона или захлопнуть вращающуюся дверь. Но знали ли вы о скрытом в его имени цвете? Если нет, то пришло время узнать.
Эти JavaScript-методы всего за несколько минут прокачают ваши навыки
Большинство приложений, которые мы создаем сегодня, требуют внесения каких-то видоизменений в набор данных. Обработка элементов массива — это стандартная операция, с которой вы, скорее всего, часто...
eCommerce UI/UX дизайн: карточка товара в примерах
Карточки универсальны: они встречаются везде, от социальных сетей, таких как Instagram и Facebook, до магазинов электронной коммерции, таких как Amazon и Ebay. Макет представления...
Обзор ReacType
ReacType - это не только красивое оформление, но и впечатляющий функционал. Посмотрим на этот эффективный инструмент в действии.
5 основных рекурсивных задач на собеседованиях по программированию
В информатике и математике рекурсия является эффективной базовой концепцией. В математике она применяется в таких разделах, как числовые последовательности и функции. При решении задач...
Когда ИИ или машинное обучение неуместны
Вообразите, что вам только что удалось заполучить набор данных клинических испытаний. Превосходно! Чтобы помочь вам войти в роль, я подготовила следующие данные:
Представьте, что эти...
Принципы минимализма в цифровом дизайне
Минимализм — это концепция, смысл которой заключается во фразе «меньше значит больше». Это концепция, которая проникает в нашу жизнь в разных формах: для одних...
Спецификация API — основа успешной разработки
Докажем, почему спецификации API имеют важное значение для долгосрочного успеха приложений. Расскажем о преимуществах, а также перечислим негативные последствия их отсутствия.
Микрофронтенды - а почему бы и нет?
Фронтенд-разработка всегда занимала положение младшего ребенка в семействе веб-приложений. И пока фронтенд-разработчики расхаживали в своих модненьких шапочках, с аккуратными усиками, MacBook и дорогим кофе,...
Автоматизация обновления Angular
Приложения Angular с легкостью обновляются с помощью Angular CLI. Обновление до основных релизов, как правило, происходит в течение недели после выпуска без возникновения проблем,...