Pull to refresh
14
0

Пользователь

Send message

Заметка о Mapped Types и других полезных возможностях современного TypeScript

Reading time9 min
Views16K


Привет, друзья!


Представляю вашему вниманию перевод 2 статей:


Читать дальше →
Total votes 22: ↑22 and ↓0+22
Comments3

Памятка пользователям ssh

Reading time13 min
Views1.5M
abstract: В статье описаны продвинутые функций OpenSSH, которые позволяют сильно упростить жизнь системным администраторам и программистам, которые не боятся шелла. В отличие от большинства руководств, которые кроме ключей и -L/D/R опций ничего не описывают, я попытался собрать все интересные фичи и удобства, которые с собой несёт ssh.

Предупреждение: пост очень объёмный, но для удобства использования я решил не резать его на части.

Оглавление:
  • управление ключами
  • копирование файлов через ssh
  • Проброс потоков ввода/вывода
  • Монтирование удалённой FS через ssh
  • Удалённое исполнение кода
  • Алиасы и опции для подключений в .ssh/config
  • Опции по-умолчанию
  • Проброс X-сервера
  • ssh в качестве socks-proxy
  • Проброс портов — прямой и обратный
  • Реверс-сокс-прокси
  • туннелирование L2/L3 трафика
  • Проброс агента авторизации
  • Туннелирование ssh через ssh сквозь недоверенный сервер (с большой вероятностью вы этого не знаете)
Читать дальше →
Total votes 360: ↑352 and ↓8+344
Comments148

Webpack: параллельная сборка изоморфного приложения с перезагрузкой браузера

Reading time11 min
Views4.2K

Несмотря на кажущуюся простоту темы, мне не довелось поучаствовать ни в одном проекте, где сборка фронтовой и серверной частей была бы настроена удобно, то есть обладала бы следующими характеристиками:


  • эти части собираются параллельно (в разных процессах)
  • после пересборки серверной части перезапускается сервер, исходя из новых файлов
  • после пересборки фронтовой части обновляется текущая страница в браузере
  • изоморфные файлы вызывают обе пересборки, а неизоморфные — только соответствующую
  • необходимые параметры (порт watch-сервера, https-режим) настраиваются через env-переменные

Коллеги настраивали лишь последовательную сборку этих частей при изменении любых файлов, что приводило к обязательному перезапуску сервера и нескольким перезагрузкам страницы (т.к. для этого использовалась либо middleware, отслеживающая запуск сервера, либо watch-сервер webpack, но видел и что используются они одновременно). Поэтому тема показалась актуальной, разберем все по полочкам.

Читать дальше →
Rating0
Comments0

Децентрализованная конфигурация webpack или как упростить сборку проекта

Reading time8 min
Views8.8K

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

Если провести аналогию с обычным кодом, то достижение таких объёмов в рамках одного модуля/класса/компонента/сущности становится сигналом, чтобы заняться декомпозицией и разделить ответственность по более мелким и независимым составляющим.

Но если говорить о конфигурации сборки, то такая декомпозиция скорее редкость, и в больших проектах часто можно встретить огромные webpack.config.js, модификация которых может доставить немало проблем и привести к ошибкам.

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

Читать далее
Total votes 51: ↑51 and ↓0+51
Comments19

React: WebRTC Media Call

Reading time23 min
Views14K


Привет, друзья!


В этой статье я покажу вам, как разработать приложение для совершения аудио/видео звонков с помощью WebRTC.


Функционал нашего приложения будет следующим:


  • при запуске приложения пользователь А получает уникальный идентификатор;
  • он передает этот идентификатор пользователю Б;
  • пользователь Б использует идентификатор пользователя А для совершения аудио или видео звонка;
  • пользователь А получает уведомление о звонке пользователя Б и может ответить на него с видео или без либо отклонить звонок;
  • в процессе соединения пользователи имеют возможность включать/выключать аудио и видео;
  • после завершения звонка выполняется перезагрузка WebRTC для обеспечения возможности совершения нового звонка.

Демо приложения.


Репозиторий с исходным кодом.


Основной источник вдохновения.


Если вам это интересно, прошу под кат.

Читать дальше →
Total votes 10: ↑8 and ↓2+6
Comments2

Docker: заметки веб-разработчика. Итерация вторая

Reading time9 min
Views19K


Привет, друзья!


Продолжаю делиться с вами заметками о Docker.


Заметки состоят из 4 частей: 2 теоретических и 2 практических.


Если быть более конкретным:


  • первая часть посвящена самому Docker, Docker CLI и Dockerfile;
  • в этой части рассказывается о Docker Compose;
  • в третьей части мы разработаем приложение, состоящее из 3 сервисов (клиента, админки и API) и базы данных (PostgreSQL);
  • в четвертой части мы это приложение "контейнеризуем".

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

Читать дальше →
Total votes 13: ↑11 and ↓2+9
Comments2

Развёртывание в Kubernetes из GitLab

Reading time31 min
Views34K

Развёртывание в Kubernetes из GitLab


Развёртывание в Kubernetes из GitLab


Это продолжение предыдущего туториала про командную разработку с использованием GitLab. Фокус предыдущей статьи был на организации непрерывной поставки в работе команды. В этой статье мы уделим основное внимание именно практическим действиям необходимым для развёртывания из GitLab в Kubernetes.


А именно мы возьмём максимально простое но достаточно содержательное приложение на React.js, докеризуем его, затем развернём в Kubernetes локально при помощи Docker Desktop. После этого развернём его уже на Google Cloud Platform (GCP), и завершим разработкой CI/CD конвейера в GitLab для публикации нашего приложения в Google Kubernetes Engine.


Желательны но необязательны базовые знания


  • Docker;
  • Kubernetes;
  • Git;
  • Node.js;
  • React;
  • Bash.

В дальнейшем мы сделаем следующее.


  • 🧱 Познакомимся c нашим приложением, обсудим из чего оно состоит.
  • 🐳 Докеризуем наше приложение.
  • ☸️ Развернём наше приложение в Kubernetes локально на Docker Desktop.
  • ☁️ Обсудим особенности GCP и как нужно изменить наше приложение, а затем ещё раз развернём наше приложение в Kubernetes но уже в GCP.
  • 🦊 Завершим наш туториал созданием конвейера для развертывания приложения в GCP при помощи GitLab.

Разные этапы от докеризации до Kubernetes на Google Cloud Platform

Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments32

Изучаем SEO самостоятельно: большая подборка материалов

Level of difficultyEasy
Reading time5 min
Views515K
Привет, Хабр!

Меня зовут Артём Сайгин, я веду телеграм канал Growth Lab, в котором делюсь опытом роста IT-продуктов.

Сделал для вас большую подборку материалов о поисковом продвижении для самостоятельного изучения. Эти бесплатные материалы легко заменят вам платные курсы.

Также в конце статьи вы найдёте список книг по SEO, бесплатные курсы, чек-листы SEO-аудита, SEO-сервисы и расширения.

Добавляйте в закладки, чтобы не потерять.

image

Отмечу, что список материалов будет пополняться. Если я не добавил стоящий материал, свяжитесь со мной — добавлю.

Приступим!
Читать дальше →
Total votes 15: ↑10 and ↓5+5
Comments9

Самопаркующаяся тачка в 500 строк кода

Reading time25 min
Views12K

В этой статье мы "научим" автомобиль выполнять самостоятельную парковку с помощью генетического алгоритма.

В 1-м поколении автомобили будут иметь случайный геном и будут вести себя хаотично.

К ≈40-му поколению автомобили понемногу начнут учиться парковке и будут все ближе и ближе подбираться к парковочному месту

Чтобы увидеть эволюционный процесс прямо в браузере вы можете запустить 🚕 симулятор эволюции, .

Генетический алгоритм для этого проекта будем реализовывать на TypeScript. В этой статье будет показан полный исходный код алгоритма, но вы также можете найти финальные примеры кода в репозитории симулятора.

Читать далее
Total votes 38: ↑37 and ↓1+36
Comments8

Приёмы ускорения кода на JS и других языках: подборка от разработчика поиска Яндекса

Reading time17 min
Views66K
Привет! Меня зовут Виктор Хомяков, в Яндексе я работаю над скоростью страниц поиска. Однажды мне в голову пришла идея обобщить свой опыт и систематизировать приёмы ускорения работы кода на JavaScript. То, что получилось в итоге, собрано в этом материале.

Некоторые из приёмов будут полезны и тем, кто пишет на других языках. Все способы разделены на группы по убыванию специфичности: от наиболее общих до конкретных. Почти все примеры кода взяты из реальных проектов, из реального продакшена.


Читать дальше →
Total votes 80: ↑80 and ↓0+80
Comments51

Что можно положить в тег <head>

Reading time14 min
Views30K

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

Читать далее
Total votes 35: ↑35 and ↓0+35
Comments23

Идеальный инструмент для создания прогрессивных веб-приложений или Всё, что вы хотели знать о Workbox. Часть 1

Reading time30 min
Views11K

Что такое Workbox?


Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).


Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:



WB предоставляет следующие возможности:


  • предварительное кэширование
  • кэширование во время выполнения
  • стратегии (кэширования)
  • обработка (перехват сетевых) запросов
  • фоновая синхронизация
  • помощь в отладке

На что похож WB API?


Ниже приведены примеры основных подходов к разработке прогрессивных веб-приложений (приложений, в которых используются возможности, предоставляемые СВ).

Читать дальше →
Total votes 36: ↑27 and ↓9+18
Comments3

Идеальный инструмент для создания прогрессивных веб-приложений или Все, что вы хотели знать о Workbox. Часть 2

Reading time27 min
Views6.8K

image


Что такое Workbox?


Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).


Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:



WB предоставляет следующие возможности:


  • предварительное кэширование
  • кэширование во время выполнения
  • стратегии (кэширования)
  • обработка (перехват сетевых) запросов
  • фоновая синхронизация
  • помощь в отладке

Это вторая часть руководства. Вот ссылка на первую часть.


Модули, предоставляемые WB

Читать дальше →
Total votes 14: ↑13 and ↓1+12
Comments0

В закладки: репозитории с книгами, шпаргалками, ресурсами по дизайну и не только

Reading time5 min
Views6.1K

Автор оригинальной статьи собрал репозитории, которые, по его словам, должны быть в закладках у каждого разработчика ПО. Подборка начинается с репозитория бесплатных книг по программированию, в том числе на русском языке, включает репозиторий с большим количеством сжатых, информативных шпаргалок по различным языкам и технологиям, шаблоны файлов .gitignore, а также посвящённые конкретным языкам репозитории, репозиторий о дизайне для разработчиков и ещё несколько хранилищ кода, которые могут быть интересны и полезны читателям Хабра. Переводом этой статьи мы решили поделиться к старту курса о Frontend-разработке.

Читать далее
Total votes 7: ↑5 and ↓2+3
Comments2

<img>. Доклад Яндекса

Reading time30 min
Views27K
«Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». В докладе я постарался разобраться, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.

— Всем привет. У меня доклад с интригующим названием в виде одного тега.
Total votes 45: ↑45 and ↓0+45
Comments4

Nginx и https. Получаем класс А+

Reading time4 min
Views161K
image

Недавно вспомнилось мне, что есть такой сервис — StartSsl, который совершенно бесплатно раздаёт trusted сертификаты владельцам доменов для личного использования. Да и выходные попались свободные. В общем сейчас напишу, как в nginx настроить HTTPS, чтобы при проверке в SSL Labs получить рейтинг А+ и обезопасить себя от последних багов с помощью выпиливания SSL.

Итак, приступим. Будем считать, что у вы уже зарегистрировались на StartSsl, прошли персональную проверку и получили вожделенный сертификат. Для начала опубликую итоговый конфиг, а после этого разберу его.
Читать дальше →
Total votes 61: ↑52 and ↓9+43
Comments85

Ontol: подборка видео-лекций и каналов для продвинутых программистов

Reading time4 min
Views16K
image

Недавно на HackerNews обсуждали видео и каналы, где можно поучиться продвинутому программированию. Под катом — подборка из 30 полезняшек.

В перерывах между полетами на реактивном ранце и переводами материалов Y Combinator, я делаю проект «Ontol» — такое место в сети, где максимальная концентрация полезного, апгрейдящего мировоззрение материала (ценного на горизонте 10+ лет, например, такого), которым можно делиться бесплатно в 1 клик. (канал в телеграм: t.me/ontol)

Вот мои предыдущие бесплатные образовательные подборки:


Total votes 41: ↑39 and ↓2+37
Comments1

Вывод типов в TypeScript с использованием конструкции as const и ключевого слова infer

Reading time5 min
Views54K
TypeScript позволяет автоматизировать множество задач, которые, без использования этого языка, разработчикам приходится решать самостоятельно. Но, работая с TypeScript, нет необходимости постоянно использовать аннотации типов. Дело в том, что компилятор выполняет большую работу по выводу типов, основываясь на контексте выполнения кода. Статья, перевод которой мы сегодня публикуем, посвящена достаточно сложным случаям вывода типов, в которых используется ключевое слово infer и конструкция as const.


Читать дальше →
Total votes 41: ↑40 and ↓1+39
Comments4

Минимальное PWA

Reading time6 min
Views21K

Какие характеристики должны быть у web-приложения, чтобы соответствовать критерию "прогрессивное"? Понятно, что, как и обычные web-приложения, прогрессивные строятся на базе "большой тройки" web-технологий - HTML/CSS/JS. Но что именно делает web-приложения прогрессивными?

В данной публикации я попробую найти минимальный набор характеристик, которым на данный момент должно соответствовать web-приложение, чтобы называться "прогрессивным", а также отвечу на вопрос, почему в августе этого года некоторые "прогрессивные" приложения перестанут быть таковыми.

Читать далее
Total votes 31: ↑29 and ↓2+27
Comments11

Принципы для разработки: KISS, DRY, YAGNI, BDUF, SOLID, APO и бритва Оккама

Reading time8 min
Views240K
image

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

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

Последовательное применение этих принципов упростит ваш переход от миддла к сеньору. Вы можете обнаружить, что некоторые (вероятно) вы применяете интуитивно.

Принципов много. Мы остановимся на семи самых важных. Их использование поможет вам в развитии и позволит стать лучшим программистом.

1. YAGNI

You Aren’t Gonna Need It / Вам это не понадобится

Этот принцип прост и очевиден, но ему далеко не все следуют. Если пишете код, то будьте уверены, что он вам понадобится. Не пишите код, если думаете, что он пригодится позже.

Этот принцип применим при рефакторинге. Если вы занимаетесь рефакторингом метода, класса или файла, не бойтесь удалять лишние методы. Даже если раньше они были полезны – теперь они не нужны.

Может наступить день, когда они снова понадобятся – тогда вы сможете воспользоваться git-репозиторием, чтобы воскресить их из мертвых.
Читать дальше →
Total votes 22: ↑19 and ↓3+16
Comments9
1
23 ...

Information

Rating
Does not participate
Location
Россия
Date of birth
Registered
Activity