Pull to refresh
1
0
iPacman @iPacman

User

Send message

Вывод типов в TypeScript. Неизменяемый массив конкретных строковых значений

Level of difficultyEasy
Reading time2 min
Views5.8K

Решим реальную практическую задачу, с которой мне пришлось столкнуться на моем проекте React/TypeScript.

Задача

У нас есть массив конкретных строковых значений, таких как "first", "second", "third", "fourth" и "fifth". Необходимо отобразить их на странице, т.е как-то использовать, а также убедиться, чтобы эти данные были строго типизированы и TypeScript нам выдавал всплывающие подсказки при их использовании в коде.

Читать далее
Total votes 22: ↑19 and ↓3+16
Comments25

Динамический импорт remote компонента Module Federation на Vue 3

Level of difficultyMedium
Reading time7 min
Views4.1K


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

Узнать о Module Federation
Total votes 4: ↑4 and ↓0+4
Comments1

Ультимативный гайд по HTTP. Cookies и CORS

Level of difficultyEasy
Reading time7 min
Views28K

Привет! Меня зовут Ивасюта Алексей, я техлид команды Bricks в Авито в кластере Architecture, а это мой цикл статей о протоколе HTTP. В первой части мы уже познакомились с версией протокола 1.0 и поговорили о структуре ответов и запросов. Теперь пришло время узнать, что такое Cookies и для чего нужен CORS.

Читать далее
Total votes 20: ↑19 and ↓1+18
Comments2

Prisma ORM: полное руководство для начинающих (и не только). Часть 1

Reading time12 min
Views35K



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


В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.


Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).


Содержание этой части



Вторая часть.


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

Читать дальше →
Total votes 12: ↑8 and ↓4+4
Comments5

SiteAnalyzer 2.5 — Скрейпинг данных, проверка уникальности и скорость загрузки страниц

Reading time5 min
Views3.2K

Всем привет! После весьма продолжительного периода мы, наконец, подготовили новый релиз SiteAnalyzer, который, надеемся, оправдает ваши ожидания и станет незаменимым помощником в SEO-продвижении.


SiteAnalyzer 2.5

В новой версии мы реализовали несколько из наиболее востребованных пользователями функций, таких, как: скрейпинг данных (извлечение данных с сайта), проверка уникальности контента и проверка скорости загрузки страниц по Google PageSpeed. Вместе с этим было закрыто множество багов и проведен рестайлинг логотипа. Расскажем обо всем поподробнее.

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

Как померить Node.js-приложение, если у тебя лапки. Доклад Яндекса

Reading time15 min
Views9K
Неважно, каких размеров ваше приложение на Node.js. Неважно, как хорошо вы написали код. Вам просто необходимо знать, как он работает в продакшене. Разработчик интерфейсов в поисковом портале Яндекса Алексей Попков сделал доклад о том, как выяснить, что происходит внутри запущенного процесса.

Что нужно, чтобы заглянуть в этот чёрный ящик? Ответ — опенсорс, все бесплатно, бери и внедряй.

— Всем привет. Немножко про то, кто я такой. Меня зовут Лёша, я разрабатываю внутренние сервисы Яндекса. Уже третий год делаю всякие Node.js-приложения, менторю разработчиков в Яндекс.Практикуме и измеряю все, до чего дотягиваются руки, потому что это весело.
Читать дальше →
Total votes 17: ↑17 and ↓0+17
Comments3

VirtualBox — Запуск Android эмулятора в виртуальной среде для тестирования Android проекта

Reading time6 min
Views38K

В данной статье я постараюсь описать пример инфраструктуры для автотестов Android приложений (mobile automation), а именно, среду для проведения тестранов UI автотестов на эмуляторе Android девайса в виртуальной среде.

Читать далее
Total votes 14: ↑12 and ↓2+10
Comments17

Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Reading time14 min
Views42K

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.


Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube


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



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


Лонгридом можно пользоваться как справочником, чтобы не читать за один присест. Вот список тем, которые мы затронем:


  1. Зачем думать о производительности
  2. FMP, TTI + подробнее в докладе
  3. Critical render path, DOM, CSSOM, RenderTree
  4. Шаги по улучшению производительности первой загрузки + подробнее в докладе
Читать дальше →
Total votes 19: ↑18 and ↓1+17
Comments10

Управление зависимостями JavaScript

Reading time10 min
Views34K

Управление зависимостями JavaScript


Всем привет! Меня зовут Слава Фомин, я ведущий разработчик в компании DomClick. За свою 16-ти летнюю практику я в первых рядах наблюдал за становлением и развитием JavaScript как стандарта и экосистемы. В нашей компании мы используем JavaScript, в первую очередь, для продвинутой front-end разработки и успели перепробовать достаточно большое количество различных технологий, инструментов и подходов, набить много шишек. Результатом этого кропотливого труда стал ценнейший опыт, которым я и хочу поделиться с вами.

Читать дальше →
Total votes 31: ↑28 and ↓3+25
Comments19

10 популярных вопросов на собеседовании по TypeScript (с краткими ответами)

Reading time2 min
Views35K


1. Для чего нужен тип «Omit»?


Ответ: Это новый тип, в котором можно указать свойства, которые будут исключены из исходного типа.


Пример:


type Person = { name: string; age: number; location: string; };
type QuantumPerson = Omit<Person, 'location'>; // Аналогично следующей строке
QuantumPerson = { name: string; age: number; };
Читать дальше →
Total votes 24: ↑16 and ↓8+8
Comments12

Рендеринг веб сайтов 101

Reading time7 min
Views46K
Вы вводите название сайта в адресную строку браузера, нажимаете enter, и по привычке видите запрашиваемую страницу. Все просто: ввел название сайта — сайт отобразился. Однако для более любознательных хочу рассказать, что происходит между тем как браузер начинает получать куски сайта (да, сайт приходит кусками, по-другому — чанками) и отображает полностью нарисованную страницу.


Total votes 18: ↑15 and ↓3+12
Comments9

Полное руководство по настройке HTTP-заголовков для безопасности

Reading time7 min
Views33K


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


Я посмотрел, как эти компании вычисляют показатели безопасности других компаний. Оказалось, они смотрят на сочетание использования НТТР-заголовка для безопасности и репутации IP-адресов.


Репутация IP-адреса основывается на данных черных списков и списков спамеров в сочетании с данными о владельце общедоступного IP-адреса. Она, в принципе, должна быть чистой, если ваша компания не рассылает спам и в состоянии быстро определить и остановить вредоносное внедрение. Использование заголовка безопасности НТТР вычисляется аналогично тому, как работает Observatory от Mozilla.


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

Читать дальше →
Total votes 37: ↑36 and ↓1+35
Comments4

TypeScript. Магия выражений

Reading time7 min
Views36K
TypeScript — поистине прекрасный язык. В его арсенале есть все, что необходимо для качественной разработки. И если вдруг, кому-то знакомы секс-драматические этюды с JavaScript, то меня поймет. TypeScript имеет ряд допущений, неожиданный синтаксис, восхитительные конструкции, которые подчеркивают его красоту, форму и наполняют новым смыслом. Сегодня речь о них, об этих допущениях, о магии выражений. Кому интересно, добро пожаловать.
Читать дальше →
Total votes 41: ↑38 and ↓3+35
Comments23

19 полезных возможностей файла .htaccess

Reading time14 min
Views106K
19 полезных возможностей файла .htaccess


Спорим, о некоторых вы не подозревали. Мы собрали варианты применения .htaccess для улучшения работы сайта. Он часто используется оптимизаторами для корректной настройки 301 редиректов. Но этим возможности файла не ограничиваются. Тут и безопасность, и оптимизация, и параметры отображения — с помощью .htaccess вебмастер может сделать много полезного, чтобы сайт работал корректно.

Читать дальше
Total votes 28: ↑17 and ↓11+6
Comments16

Проектирование интернет-магазина для SEO: (теория + чеклист)

Reading time8 min
Views17K
Что стоит учесть при проектировании интернет-магазина, чтобы не пришлось переделывать пол сайта для начала продвижения.

Статья разбита на две части.
Теория: о том, что в принципе можно учесть в SEO интернет-магазина и как это работает.
Чек-лист: 80 пунктов, по которым легко проверить, насколько удобно будет продвигать ваш сайт после разработки

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

Читать дальше →
Total votes 22: ↑18 and ↓4+14
Comments58

27 удивительных инструментов VS Code для современных JavaScript-разработчиков

Reading time10 min
Views40K
Visual Studio Code (его ещё называют VS Code и VSCode) — это экономичный но мощный кросс-платформенный редактор кода, выполненный в виде настольного приложения. По словам автора материала, перевод которого мы сегодня публикуем, VS Code поддерживает множество инструментов разработки — вроде TypeScript и отладчика Chrome. Это, а также то, что к нему написано невероятное количество опенсорсных расширений, делает VS Code весьма популярным и любимым многими редактором.



Если вы хотите добавить в свой арсенал JavaScript-программиста что-то новое — автор материала надеется, что вы встретите здесь что-нибудь такое, что вам пригодится. Не все из рассмотренных здесь двадцати семи инструментов предназначены исключительно для JS-разработки. Но все они с успехом могут применяться теми, кто пишет на JavaScript.
Читать дальше →
Total votes 40: ↑37 and ↓3+34
Comments19

Делаем адаптивный HTML, добавляя одну строку в CSS

Reading time4 min
Views191K
image

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

И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
Это означает, что нам не нужно загромождать HTML лишними классами (Col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана.

Рассмотрим все подробнее.
Читать дальше →
Total votes 67: ↑66 and ↓1+65
Comments103

По-настоящему адаптивные письма. Часть… снова первая

Reading time9 min
Views27K


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

К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.
Читать дальше →
Total votes 30: ↑25 and ↓5+20
Comments25

Делаем вебсокеты на PHP с нуля

Reading time18 min
Views304K
Некоторое время назад я выбирал библиотеку для работы с вебсокетами. На просторах интернета я натыкался на статьи по интеграции node.js с yii, а почти все статьи о вебсокетах на хабре ограничивались инструкциями к тому, как использовать phpdaemon.

Я изучал библиотеки phpdaemon и ratchet, они достаточно монструозны (причём используя ratchet для отправки сообщения конкретному пользователю рекомендовано дополнительно использовать wamp). Мне не совсем было понятно для чего использовать таких монстров, которые требуют установку других монстров. Почитав исходники этих, а также других библиотек, я разобрался как всё устроено и мне захотелось написать простой вебсокет-сервер на php самостоятельно. Это помогло мне закрепить изученный материал и наткнуться на некоторые подводные камни, о которых я не имел представления.

Так я решил написать необходимый для меня функционал с нуля.

Получившийся код и ссылка на демонстрационный чат в конце статьи.
Читать дальше →
Total votes 88: ↑76 and ↓12+64
Comments77

Information

Rating
Does not participate
Registered
Activity