Pull to refresh
@simple_mortalread⁠-⁠only

User

Send message

Введение в непрерывную поставку (CD) при помощи GitLab

Reading time19 min
Views47K

Введение в непрерывную поставку (CD) при помощи GitLab


Введение в непрерывную поставку (CD) при помощи GitLab


Данный туториал позволит вам быстро прочувствовать как происходит командная работа с использованием GitLab. В целом, начать практиковать DevOps/CD с GitLab проще чем с использованием других продуктов потому что GitLab — это решение "всё в одном".


В процессе этого туториала мы


  • настроим базовое управления проектом на GitLab.com;
  • создадим конвейер непрерывной поставки
  • проведём несколько циклов работы с GitLab Flow
  • изучим метрики CI/CD в GitLab

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


  • Git;
  • Node.js;
  • React;
  • Docker;
Читать дальше →
Total votes 7: ↑7 and ↓0+7
Comments2

JavaScript prototype pollution: практика поиска и эксплуатации

Reading time17 min
Views21K

Если вы следите за отчетами исследователей, которые участвуют в bug bounty программах, то наверняка знаете про категорию уязвимостей JavaScript prototype pollution. А если не следите и встречаете это словосочетание впервые, то предлагаю вам закрыть этот пробел, ведь эта уязвимость может привести к полной компрометации сервера и клиента. Наверняка хотя бы один продуктов вашей (или не вашей) компании работает на JavaScript: клиентская часть веб-приложения, десктоп (Electron), сервер (NodeJS) или мобильное приложение.


Эта статья поможет вам погрузиться в тему prototype pollution. В разделах Особенности JavaScript и Что такое prototype pollution? вы узнаете как работают объекты и прототипы JavaScript и как особенности их функционирования могут привести к уязвимостям. В разделах Prototype pollution на сервере и Prototype pollution на клиенте вы научитесь искать и эксплуатировать эту уязвимость на кейсах из реального мира. Наконец вы изучите способы защиты и почему самый распространенный способ защиты можно легко обойти.


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

Читать дальше →
Total votes 15: ↑14 and ↓1+18
Comments8

Веб-компоненты проще, чем вы думаете

Reading time8 min
Views25K

Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно, но и довольно сложно. Тысяча строк JavaScript, чтобы сохранить всего 4 строки HTML. Докладчик или неизбежно скрывал за простыми вещами огромное количество JS кода, или погружался в сложные детали, тогда мои глаза начинали закрываться от скуки, и я начинал думать о том, покрывают ли мои суточные выплаты расходы на закуски.

Однако в недавнем проекте, созданном для легкого изучения HTML (Конечно, путем добавления зомби и глупых шуток), я решил, что необходимо описать каждый элемент HTML в спецификации. Не считая той конференции, я впервые начинал знакомство с <slot> и <template> элементами, и, когда я захотел написать что-то интересное о них в проекте, мне пришлось углубиться в тему.

И в процессе углубления я понял: веб-компоненты проще, чем я думал.

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

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

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

Preload, prefetch и другие теги

Reading time9 min
Views140K
Есть много способов повышения веб-производительности. Один из них — предзагрузка контента, который понадобится позже. Префетчинг CSS, предварительный рендеринг полной страницы или резолвинг доменного имени. Делаем всё заранее, а потом мгновенно отображаем результат! Звучит круто.

Ещё круче, что это очень просто реализовано. Пять тегов <link rel> дают браузеру команду на предварительные действия:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />
Читать дальше →
Total votes 33: ↑33 and ↓0+33
Comments1

TypeScript: Раскладываем tsconfig по полочкам. Часть 1

Reading time10 min
Views92K

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

Читать далее
Total votes 26: ↑25 and ↓1+28
Comments4

Углублённое руководство по JavaScript: генераторы. Часть 1, основы

Reading time10 min
Views25K

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

Я не исхожу из того, что вы хоть что-то знаете о генераторах. Но вам требуется хорошо разбираться в итераторах и итерируемых объектах в JavaScript. Если вы с ними не знакомы или «плаваете в теме», то сначала углублённо изучите их. Если же вы владеете этими знаниями, то можно погружаться в мир генераторов. Это очень странный мир, в котором многое совершенно не похоже на то, что вы используете в обычном JS-коде. При этом сам механизм очень прост, и даже после прочтения этой статьи вы сможете уверенно использовать генераторы. Приступим!
Читать дальше →
Total votes 23: ↑20 and ↓3+25
Comments12

Запускаем свой RTMP сервер для стриминга

Reading time4 min
Views83K


Иногда YouTube или Twitch не подходят как стриминговая платформа — скажем, если вы пилите портал с вебинарами или контентом 18+, нарушаете авторские права или хотите максимально отгородить свою трансляцию от остального интернета. У них есть много альтернатив как в виде сервисов (те же минусы, недостаток контроля и непредсказуемая политика), так и в виде self-hosted решений. Проблема опенсорсных стриминговых проектов в том, что все они начинаются с крохотной связки из пары технологий, а затем отчаянно пытаются вырасти в сервис, добавляя сложные веб-интерфейсы, чаты, библиотеки стримов и в конечном счёте отдаляясь от исходной цели: дать миру инструмент, который по понятному мануалу позволит запустить свой сервер трансляций. Что с ним будет дальше, в какие системы будет встроена эта картинка — это только ваше личное дело, а самописный аналог твича с лагающими и отваливающимися сервисами и периодически валящимся билдом не нужен никому, кроме его разработчиков. Поэтому в этой статье мы разберём минимальную цепочку действий для запуска своего RTMP-сервера с плеером.
Читать дальше →
Total votes 31: ↑29 and ↓2+37
Comments14

Эффектное программирование. Часть 2: генераторы в полевых условиях

Reading time8 min
Views3.6K

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

Эта статья также может быть полезна тем, кто хочет разобраться, как работает redux-saga.

Также я давно хотел познакомиться с Deno (альтернатива Node) и использовал его в качестве среды для запуска кода, так что примеры будут в этот раз на typescript.

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

Способы использования Math.random() в JavaScript

Reading time5 min
Views74K
Math.random() — это один из API JavaScript. Это — функция, которая возвращает случайные числа. Диапазон возвращаемых чисел представлен значениями от 0 (включая 0, то есть, она может вернуть 0) до 1 (не включая 1, то есть — единицу она вернуть не может).

Math.random(); // возвращает случайное число

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


Читать дальше →
Total votes 29: ↑17 and ↓12+13
Comments15

Сито для интернета: интересные вещи с Shodan

Reading time5 min
Views30K


Интернет ошибочно отождествляют исключительно с вебом, но всемирная паутина доступная через браузер — это всего лишь вершина айсберга глобальной сети. Ее подводная часть куда разнообразнее, и хоть она скрыта от глаз рядовых пользователей, ничто не мешает изучать ее специализированными средствами. Одним из таких сервисов, сделанных “под ключ” и устроенных по типу швейцарского ножа, можно назвать Shodan.

Если гугл индексирует новостные сайты и энциклопедии, специально выставленные на всеобщее обозрение, то Shodan — это поисковая система, которая целенаправленно индексирует все подключенные к интернету вычислительные устройства (веб-камеры, маршрутизаторы, серверы и новомодные IoT-девайсы) и позволяет находить их с помощью различных поисковых запросов и фильтров.


Читать дальше →
Total votes 33: ↑32 and ↓1+52
Comments0

Модули в JavaScript

Reading time9 min
Views58K


Фронтенд-разработчики каждый день используют модули. Это может быть функция из локального файла или сторонняя библиотека из node_modules. Сегодня я кратко расскажу об основных модульных системах в JavaScript и некоторых нюансах их использования.

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

Оптическая иллюзия 2020

Reading time1 min
Views79K
image


Я просидел у монитора 15 минут с кусками бумаги, пытаясь разоблачить подвох. Интересно, а если вместо стрелочек использовать слова «влево», «вверх», «вниз» сохранится ли эффект?

Оптическую иллюзию выложили в Твиттер 25 ноября и она бомбанула. Тысячи человекочасов потеряны, сотни тысяч листиков приложено к экрану.

Для сомневающихся:
Total votes 135: ↑116 and ↓19+135
Comments67

Производительность TypeScript

Reading time15 min
Views17K

Есть лёгкие способы конфигурирования TypeScript для ускорения компиляции и редактирования. И чем раньше их внедрить, тем лучше. Также есть ещё некоторые популярные подходы к изучению причин медленной компиляции и редактирования, некоторые исправления и распространенные способы помочь TypeScript-команде в расследовании проблем.
Читать дальше →
Total votes 37: ↑37 and ↓0+37
Comments4

JSON с опциональными полями в Go

Reading time6 min
Views32K

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

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

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

Устройство современного веб-браузера Chrome (часть 1/4)

Reading time8 min
Views35K

Оригинальное название публикации: "Inside look at modern web browser".


В этой серии, состоящей из 4 частей, мы рассмотрим внутренности браузера Chrome от архитектуры высокого уровня до особенностей пайплайна рендеринга. Если вы когда-нибудь задумывались над тем, как браузер превращает ваш код в функциональный сайт, или не знаете, почему для повышения производительности предлагается та или иная методика, то эта серия статей для вас.


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

Typescript: Объединение типов в глубину

Reading time6 min
Views28K

Пошаговое руководство о том, как в TypeScript написать такой generic-тип, который рекурсивно объединяет произвольные вложенные key-value структуры данных. Это может оказаться несколько более сложной задачей, чем вы думаете.

Подробнее
Total votes 13: ↑13 and ↓0+13
Comments28

Vue 3 на Typescript

Reading time10 min
Views56K

vue3+ts


Популярность Typescript растет день ото дня. Javascript нетипизированный язык(или слабо типизированный, если точнее), и одна и та же переменная способна принимать и строку, и число, и даже объект. С одной стороны, это делает язык гибким, с другой, потенциально ведет к многочисленным ошибкам. Typescript создан, чтобы решить эту проблему. Vue старается не отставать от моды, и в новой версии фреймворка была значительно улучшена поддержка языка. Теперь переход на Typescript проще и приятнее, чем был раньше. Хороший повод научиться чему-то новому, тем более, что в требованиях к вакансиям он встречается все чаще и чаще.


В этой статье мы перепишем тестовое задание, которое я разбирал ранее, на Vue 3 и Typescript и вдобавок используем обновленные Vue-Router и Vuex(критики, вы были услышаны).


Update: код в статье был улучшен в соответствии с пожеланиями.

Читать дальше →
Total votes 3: ↑2 and ↓1+4
Comments18

Заметка о перебираемых объектах

Reading time5 min
Views7.4K


Доброго времени суток, друзья!

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

Руководство по стилю JavaScript от Google советует отдавать предпочтение циклу for-of там, где это возможно.

Руководство по стилю JavaScript от Airbnb не рекомендует использовать итераторы. Вместо циклов for-in и for-of следует использовать функции высшего порядка, такие как map(), every(), filter(), find(), findIndex(), reduce(), some() для итерации по массивам и Object.keys(), Object.values(), Object.entries() для итерации по массивам из объектов. Об этом позже.
Читать дальше →
Total votes 5: ↑5 and ↓0+5
Comments4

Как реализовать динамическую диаграмму для Vue на основе SVG

Reading time5 min
Views5.9K
Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при загрузке сайта. Делимся примером, как можно построить диаграмму из элементов SVG с помощью JS и CSS.

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

Использование Atomics.wait(), Atomics.notify() и Atomics.waitAsync()

Reading time8 min
Views7.4K
Статические методы Atomics.wait() и Atomics.notify() представляют собой низкоуровневые примитивы синхронизации, которые можно применять для реализации мьютексов и других подобных механизмов. Но, так как метод Atomics.wait() является блокирующим, его нельзя вызывать в главном потоке (если попытаться это сделать — будет выдана ошибка TypeError).

Движок V8, начиная с версии 8.7, поддерживает неблокирующий вариант Atomics.wait(), называемый Atomics.waitAsync(). Этим новым методом можно пользоваться в главном потоке.



Сегодня мы расскажем о том, как применить эти низкоуровневые API для создания мьютекса, который может работать и в синхронном режиме (в потоках воркеров) и асинхронно (в потоках воркеров или в главном потоке).
Читать дальше →
Total votes 24: ↑23 and ↓1+34
Comments1

Information

Rating
Does not participate
Registered
Activity