Нейросети следят за Ким Чен Ыном. Директор разведки Южной Кореи, Ким Гю Хён, представил важнейшие для нацбезопасности сведения — Ким Чен Ын весит под 150 кг. Эти выводы сделал ИИ во время слежки за вождем Северной Кореи.

Кроме того, нейронка диагностировала Ыну бессонницу (из-за кругов под глазами), дерматит (проблемная кожа рук) и даже потенциальный алкоголизм (заказ больших партий зарубежных сигар, алкоголя и закусок).

Vocal Remover — нейросеть для генерации крутых «минусовок» для любимых треков без серфинга в интернете.

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

С сервисом можно делать оригинальные каверы и ремиксы. И, главное, все бесплатно.

Поюзать можно здесь.

Решив показать свою незаменимость, строительная компания подшутила над девелоперами многофункционального ChatGPT, разместив на стройке призыв: «ChatGPT доделай этот дом».

Интересно, долго эти товарищи будут язвить, учитывая что нейронки уже спокойно создают объекты на 3D-принтере.

TuneFlow — многофункциональная DAW для создания музыки нового поколения. Сервис имеет широкий спектр мощных функций, например: голосовой клон, умный композитор, умный барабанщик, транскрибация звука и многое другое.

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

Neuralangelo — это новый AI от NVIDIA Research, который умеет создавать полноценные 3D-проекции из обычного двухмерного видео.

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

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

Что дальше — карманный джетпак?

Условный (тернарный) оператор

Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно. Он часто используется в качестве сокращённого варианта инструкции if...else

⚡️Кастомизируем VS Code для веб-разработки

В статье расскажу, какие настройки и плагины VS Code использует наша команда фронтенда.

Читать...

Отключаем возможность копирования текста на нашем сайте

1) Отключаем контекстное меню, которое открывается кликом правой кнопкой мыши (остается возможность скопировать через Сtrl+С)

2) Заменяем буфер обмена своим текстом. Когда пользователь копирует текст, то буфер обмена устанавливается в "Не копировать!"

Также можно использовать CSS для отключения выделения текста:

*{
  user-select: none;
}

🧐Как работает ViewEncapsulation и ng-deep в Angular

В данной статье я попытаюсь максимально просто и сжато изложить все детали.

Читать...

Что будет в консоли?

a) 5
b) undefined
c) ReferenceError

👨‍💻Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

В этой статье я расскажу об одной из таких проблем, которую я решил с помощью PostCSS + Stylelint, и о том, как я это сделал.

Читать...

Как правильно выбрать нейросеть для рабочих задач и автоматизировать процессы в два клика? Какой бот поможет увеличить продуктивность на 200% без ущерба качеству? И когда начнётся восстание машин?

Наши любимые материалы:

1. Программа из 1960-х проходит тест Тьюринга успешнее, чем GPT-3,5.
2. OpenAI — Прометей или Пандора нашего времени?
3. Самые странные, экзотические и просто отбитые языки программирования.
4. Как транзисторы перевернули наш мир: большой спецпроект
5. Как программисту пройти собеседование. 6 советов.

Автозаполнение инпута

HTML-элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>

Пример:

<label for="my-browser">Выберите браузер из списка:</label>
  <input type="text" list="browsers" id="my-browser" name="my-browser">

  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Yandex Browser">
    <option value="Opera">
    <option value="Safari">
    <option value="Microsoft Edge">
  </datalist>

Различия между <select> и <datalist>

Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых

Функция-псевдокласс :is()

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

:is() похож на :where() по своей механике, различие заключается в специфичности: у :where() она нулевая, а у :is() равна наиболее специфичному из переданных селекторов

Псевдоклассы :where() и :is() относятся к «прощающему списку селекторов». Невалидный селектор в списке аргументов не приведёт к игнорированию валидных селекторов

Стили ниже применятся к <span>, а нерабочий селектор :unsupported будет проигнорирован:

:is(span, :unsupported) {
  color: red;
}

А вот если указать неподдерживаемое свойство :unsupported в перечислении, то всё сломается, не сработает ни один из селекторов:

span,
:unsupported {
  color: red;
}

CSS свойство inset

Свойство inset заменяет собой сразу четыре свойства: top, right, bottom и left. Позволяет указать смещение позиционированного элемента сразу со всех четырёх сторон

div {
  inset: 10px; /* Все стороны - 10px /
}

div {
  inset: 10px 20px; / Верхний и нижний отступ - 10px, правый и левый - 20px /
}

div {
  inset: 10px 20px 30px; / Верхний отступ на 10px, правый и левый — на 20px, нижний - 30px /
}

div {
  inset: 10px 20px 30px 40px; / Верхний отступ - 10px, правый - 20px, нижний - 30px, левый - 40px */
}

Поддержка свойства на данный момент составляет 93.96%

Балансировка текста с помощью text-wrap: balance

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

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

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

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

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

Именно об этом двенадцатый выпуск подкаста «Магнитное Поле», гостем которого стал Антон Огородников, руководитель разработки онлайн-платформы Магнита. Поговорили про эту Platform as a Service, созданную для облегчения жизни разработчиков внутри Магнита – это такой сборник автоматизированных блюпринтов для быстрого деплоя в облачную инфраструктуру. Кроме того, обсудили актуальный спор GoLang vs Python, какие стеки используются в Магните, а какие придется включить в ближайшее время, до какой степени можно кодогенерировать уже сейчас, как строится у них среда разработки и куда стоит двигаться новичку-бэкендеру.

«Магнитное Поле» создается совместно @zavtracast и IT-командой Магнита — в нем рассказывают про интересные аспекты работы самых разных команд. В предыдущих выпусках было про devops с человеческим лицом, дизайн-системы, data governance, IT HR, зачем нужен agile, geo BI, облачные архитектуры, InnerSource и многое другое.

🎧Послушать
📹Посмотреть

TypeScript 5.0 - Функции декораторы

Всем привет! Сегодня хотел бы рассказать о довольно свежей фиче в TS.

И так, что это за функция декоратор?

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

Пример класса без декоратора:

class Person {
age: number = 0

changeAge() {
console.log("Logger: Func start")
console.log("changing age...")
console.log("Logger: Func end")
}
}

const person = new Person();
person.changeAge()

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

Пример декоратора:

function Logger<This, Args extends number[], Return>(
target: (this: This, ...args: Args) => Return,
context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>
) {
return function(this: This, ...args: Args) {
console.log("Logger: Func start")
const result = target.call(this, ...args)
console.log("Logger: Func end")

return result
}
}

Декоратор принимает функцию, к которой мы применяем этот декоратор и контекст.
И возвращает функцию, в которой мы можем добавить логирование, главное, не забыть вернуть результат выполнения функции target.
Теперь посмотрим, как применить декоратор к нашему классу:

class Person {
age: number = 0

@Logger
changeAge() {
console.log("changing age...")
}
}

const person = new Person();
person.changeAge()

Так же функции-декораторы можно объединять в цепочки.

Удачи в экспериментах!