Девелоперы 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()

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

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

🧐Сложность алгоритмов. Разбор Big O

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

Читать...

Отражения изображений с помощью CSS-свойства box-reflect

Позволяет отражать содержимое элемента в одном определенном направлении(above, below, right, left). Второй параметр отвечает за смещение. И что еще интереснее, мы можем добавить градиент в качестве эффекта затухания, используя третий параметр.

Поддержка свойства составляет 94.49%

😵‍💫Глубокий JS. В память о типах и данных

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

Читать...

Обводка текста с помощью CSS-свойства text-stroke

Свойство определяет ширину и цвет обводки текстовых символов. Это сокращенная форма записи для следующих свойств:

webkit-text-stroke-width
webkit-text-stroke-color

Поддержка свойства составляет 96.59%

Drag and Drop(потяни и брось) на JS

HTML:

<div class="box">
    <!-- по умолчанию draggable="true" -->
  <img class="image" src="img/gift.jpg">
</div>
<div class="box"></div>

JavaScript:

const boxes = document.querySelectorAll(".box"),
            image = document.querySelector(".image");

boxes.forEach(box => {
  box.addEventListener("dragover", (e) => {
    e.preventDefault();
  });
  box.addEventListener("drop", () => {
    box.appendChild(image);
  });
});

По умолчанию перемещаться могут только ссылки, изображения и выделенные фрагменты. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true:

<div draggable="true">Draggable element</div>