11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
Забирай пошаговую roadmap по JAVA
FAANG School в течение 24 часов отдают бесплатно свою библиотеку знаний. Вы можете получить доступ:
– Redis - 5 улучшений для твоего пет-проекта
– Пошаговая RoadMap по Java
– Мануал по Docker. Основные команды и концепции
– Микросервисы. Вопросы с собеседований
– Шпаргалка с горячими клавишами JetBrains IDE. Ускоришь работу в 10 раз
– Desk setup. Подборка аксессуаров для комфортной работы
– Шпаргалка по Kafka
– Инструкция по работе с Git
– Подробный гайд, как найти работу в IT без опыта
– Подборка платформ с вакансиями для java-разработчиков
Последнее пополнение - Шпаргалка по Spring, в которой подробно разобрали, что такое паттерн Наблюдатель, и как его реализовать в Java. А также познакомитесь с событиями и научитесь работать с ними в Spring Boot!
Библиотека знаний обновляется постоянно, но бесплатный доступ длится всего сутки. Чтобы получить полезные материалы, переходи по ссылке и жми на оранжевую кнопку.
#фишка дня
Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.
Выглядит он прям максимально просто:
<filter id="outline">
<feGaussianBlur stdDeviation='3'/>
<feComponentTransfer>
<feFuncA type= "table" tableValues="-3 4 -3"/>
</feComponentTransfer>
</filter>
#заметка дня
Сегодня немного о том, как же хорошо иметь отклик аудитории в соцсетях.
Некто Бен Дикен (ну как, некто, его статью по B-деревьям и индексам в базах данных мы недавно читали) решил хайпануть на теме производительности разных языков и сред. Ну, на синтетических тестах, если уж совсем точно.
И выкатил видео, на котором тупо визуализировал результат выполнения 1 миллиарда итераций вложенных циклов: https://benjdd.com/loops/
Ну, условно, вот такой код:
let array = new Array(10000);
for (let i = 0; i < 10000; i++) {
for (let j = 0; j < 100000; j++) {
array[i] = array[i] + j;
}
}
new Int32Array(10000), например).
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
code недоступна, решение тут.
#инструмент дня
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: /channel/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
npx react-scan@latest <URL>
Готовишься к Frontend или Backend собеседованию?
Разбираем для тебя самые актуальные вопросы для подготовки
Выбирай свое направление:
👩💻 Frontend
👩💻 Python
👩💻 Go
👩💻 Java
👩💻 C/C++
👩💻 C#
👩💻 PHP
Уточнение! Не "картинка сохранится на сервере", а "картинка останется в форме, даже если форма ещё не была отправлена".
Читать полностью…
#статья дня
Я устал сидеть с покерфейсом на собеседованиях фуллстак- и бакенд-лидов, когда коллега начинает спрашивать про работу индексов в системах баз данных и их оптимизации.
Поэтому я решил найти хоть что-то визуальоное, чтобы начать вхождение в тему.
И, не поверите, таки нашёл!
Итак, встречайте. Деревья поиска aka B-деревья и их использование в индексах баз данных: https://planetscale.com/blog/btrees-and-database-indexes
Насыщена интерактивными примерами, можно собственноручно подобавлять ключи и увидеть, как именно принимается решение в какую ветку полетит та или иная пара ключ-значение.
Объясняются принципы работы деревьев, принципы их хранения на диске и алгоритмы поиска, например, упорядоченных значений.
Это для многих (включая меня) немножко хард-левел, поэтому на данный момент пост на правах закладки и читаю я его параллельно с Виртом и Википедией.
Но как же красиво, ну.
#algorithms #db #index
В сложных распределённых IT-системах разные компоненты постоянно обмениваются сообщениями. Брокеры сообщений нужны, чтобы контролировать этот обмен, — и Apache Kafka один из них.
Apache Kafka — это распределённая система, предназначенная для обработки потоков данных в режиме реального времени. Её можно сравнить с почтой — одни сервисы передают туда сообщения-письма, а другие — получают.
На курсе «Apache Kafka для разработки и архитектуры» от Яндекс Практикума за 3 месяца вы освоите навыки, которые помогут работать с более сложными продуктами и сможете повысить свой уровень, как специалист. Наш курс не про базу работы с Apache Kafka, а про комплексное погружение в инструмент.
Cамое главное никаких давно снятых видео и длинных лекций. Теория и практика проходят в интерактивном учебнике в удобном темпе без жёстких дедлайнов! А воркшопы с опытными разработчиками, рассказывающих о лучших практиках и разбирающих сложные кейсы, можно смотреть в записи, если вы не успеваете их посетить.
Начните учиться уже сейчас!
Пройдите бесплатный тест и поймите, подходит ли вам курс.
#срочно дня
У меня через 20 минут собеседование человека на сеньора-фронтенда.
Раз вам так не понравился вопрос с Array.sort, накидайте ваших любимых.
Только срочно, я знаю, вы у меня лучшие по вопросам, вы можете 🤩
#такое дня
Меня очень забавляет как медленно, но верно, в блочную модель CSS протекают абстракции из inline, flex и grid-модели.
То есть, по факту, грани настолько стираются, что скоро можно будет просто верстать.
Ну, например, те же align-content: center,margin-inline, margin-block, margin-inline-start...
А теперь ещё потихоньку начинает просачиваться концепция stretch, растяжения элемента, как во флекс-модели. Это когда элемент растягивается на всю доступную ширину, исключая поля.
Пример явно дан на иллюстрации. Более близким к реальности на момент конца 2024 года будет что-то такое:
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
#ссылка дня
Паскаля Витьелло и его очередная пачка Tailwind+React UI компонентов возвращается!
Давайте вспоминат: поля ввода, кнопки, чекбоксы, переключатели и радиокнопки.
Что на очереди? Правильно, выпадающие списки!
И опять 50, куда ж без этого.
Часть нативные, часть — shadcdn. К сожалению, без комбобоксов :( Потому, берём в руки react-downshift...
Ссылка: https://originui.com/selects
Как обычно, shadcn и Tailwind, без сюрпризов. Вдохновляемся, котаны?
#tailwind #shadcn #react #ui
#статья дня
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже пищу от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders
#ссылка дня
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо не HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: /channel/htmlshit/1416
#svg #filters #html #shaders
Найти работу фронтендера трудно? Ты просто не там ищешь!
@job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно
Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑💻
Появился новый сервис для создания собственных AI-ассистентов — AI-Assistant API
Я сам юзаю AI-ассистентов для планирования поездок и поиска оптимальных маршрутов. Вещь перспективная, поэтому неудивительно, что помощников теперь адаптируют под бизнес-сценарии для создания персонализированного клиентского сервиса или автоматизации рутины.
Разработка позволяет создать своего AI-ассистента с помощью Yandex Cloud ML SDK или реализуя запросы к API на языке программирования. Помогает в этом AI Assistant API, который объединяет языковую модель YandexGPT и подход Retrieval Augmented Generation. Последний позволяет наделять ассистента новыми знаниями, подгружая нужные документы или статьи (до 128 МБ). Так, модель будет отвечать на вопросы с юзеров с минимальными ошибками.
Еще одно важное преимущество: SDA-библиотека, где реализованы все нужные взаимодействия на уровне модели, инфраструктуры и внешних функций. То есть создать цифрового помощника смогут даже компании без ML-команд или экспертов в области Data Science. По словам разработчиков, AI Assistant API может в среднем на 30% ускорить внедрение LLM в процессы.
Всем привет!
Хотите узнавать небанальное об интервью на английском? Получить оффер в валюте на удаленке или даже переехать?
Тогда приглашаем вас, дорогие и уважаемые, в наш маленький канал! Мы очень стараемся постить всякие интересности регулярно, и, если поскроллить, то уже можно почитать бомбические советы по составлению резюме, байки про работу в айти и даже попрактиковаться в ответах на типичные вопросы собеседования.
Будем очень рады вашей подписке, но еще больше - вашим вопросам и мнениям.
Ваши Аня и Любовь
из @acceleracio
#такое дня
Раньше говорили, что каждый программист должен написать свои Жизнь и Тетрис.
Но каждый писал свой музыкальный плеер. А в чате я постоянно рекомендую начинающим веб-разработчикам написать свои Инстаграм и Твиттер. Ну, до какого-то уровня, конечно.
А какие мнения слышали вы?
#фишка дня
Это дежурное напоминание о том, что если объявить независимые и чистые функции вне контекста компонента, они не будут пересоздаваться на каждый рендер и, соответственно, вам не нужны будут ни useEffect, ни useCallback ни прочие трюки.
То есть:
const scroller = (node: HTMLDivElement | null) => {
node?.scrollIntoView({ behavior: "smooth" });
};
const ChatWindow = () => {
return (
<>
{Array.from(Array(100).keys()).map((e) => (
<div key={e}>Chat message: {e}</div>
))}
<div ref={scroller} />
</>
);
};
💡 Хакатон «Норникеля» «Интеллектуальные горизонты»: стартуем на поиски инноваций!
Погружайся в кейсы от «Норникеля» и решай задачу по одному из трех треков: от анализа данных до автоматизации, от экологического мониторинга до создания алгоритмов, которые могут изменить правила игры в индустрии.
Когда: 6 - 8 декабря.
Формат: онлайн.
Призовой фонд: 1 500 000 рублей.
🧑💻 Разработчики, аналитики, инженеры и любители новаторских решений смогут применить свои знания, чтобы придумать решения для реальных задач в промышленности.
Хакатон «Норникеля» «Интеллектуальные горизонты» — это отличный шанс показать свои идеи, повлиять на промышленность и найти новых единомышленников.
Если нет команды — поможем её собрать!
➡️ Регистрация открыта! Успей зарегистрироваться до 2 декабря, 23:59 МСК по ссылке.
#статья дня
Chrome опять выходит на связь!
Я скучаю по временам, когда можно было делать проекты под киоски :) Вообще ничего не парило, берёшь последний Chromium и кладёшь на все стандарты.
Возможно, кому-то и сейчас так везёт...
Короче, я к чему. Нет, я не про новости, согласно которым Google хотят заставить продать Chrome (при этом уважаемые эксперты кругом уже начали хоронить веб, как будто других движков у нас нет).
Я про то, что Chrome в очередной раз ломает искусственные барьеры!
Когда-то мы с вами уже обсуждали ситуацию с несчастной комбинацией элементов fieldset+legend и что они не могли быть flex-элементами. Ну, так исторически сложилось (они были виджетами ОС).
Оказывается, похожая ситуация имеется и с элементами details+summary!
Им до Chrome 131 нельзя было задать никакой display, кроме block. Эффекта бы не было.
Надеюсь, глядя на видео вы уже поняли, что там происходит :) А происходит комбинация display: flex на details и анимация до auto через interpolate-size.
Статья на тему: https://developer.chrome.com/blog/styling-details
А теперь, чтобы пресечь инсинуации: в Firefox и Safari всё прекрасно выглядит! Не работает лишь анимация. Ограничений на display у details нет, всё работает как и надо.
Я пока всё ещё считаю использование details для аккордеона натяжкой, но направление задано, что не может не радовать.
#css #ui #details
#заметка дня
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: /channel/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
1️⃣Определяем, не ткнули ли мы в центральную кнопку.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Почта на прокачку: как повысить защиту Microsoft Exchange и не слить чувствительные данные в сеть
⏰ Когда: 27 ноября, 11:00 по Москве
📍 Регистрируйтесь на вебинар!
SuperHardio time*! Чтобы узнать, как захардкорить самое ценное и построить настоящий лабиринт для хакера, присоединяйтесь к нашему новому образовательному проекту от ИТ-экспертов Positive Technologies.
В программе:
- Что не так с типовой настройкой Microsoft Exchange 2019
- Топ-3 сценария уязвимостей
- Как ИТ-специалисту справиться с бременем ответственности за корректную работу почтового сервиса.
- Поговорим про харденинг Microsoft Exchange 2019 и особенности подхода к повышению киберустойчивости
Вебинар будет полезен архитекторам, CIO, СТО, DevOps-экспертам и техническим специалистам разных профилей. Присоединяйтесь!
*Это как "Марио тайм", время героев-экспертов харденинга
#вопрос дня
Что произойдёт, когда я нажму на кнопку?
Сначала ответ, а потом можно пройти по ссылке. Проверьте себя :)
Песочница: https://codesandbox.io/p/sandbox/twilight-glitter-vtqsf2
Ну и не стесняйтесь писать в комментарии, что вы думаете по поводу. Пусть у нас будет вот такая суббота.
Этот вопрос я на собеседовании вчера задавал. Эмоции были смешанные.
#react #interview
#инструмент дня
На видео — не высокохудожественный глитч, а результат работы очередного нового рендер-трекера для React: React Scan.
Очевидно, натравленный на Твиттер
Репозиторий: https://github.com/aidenybai/react-scan
Чем хорош: не нужно кодить! Ну, если только ты сам не хочешь :)
Импортируем перед реактом и просто запускаем анализ:
import { scan } from 'react-scan'; // import this BEFORE react
import React from 'react';
scan({
enabled: true,
log: true, // logs render info to console (default: false)
clearLog: false, // clears the console per group of renders (default: false)
});
#фишка дня
Как заполнить фон целым количеством, например, кружочков или цветков?
Ну вдруг вы работаете в Маримекко
Очень просто! Используем background-repeat: space.
Работает аналогично флексовому space-between
И пример от Аны Тюдор: https://codepen.io/thebabydino/pen/RwXvryZ
#css #background #fill
👀 IT-профессия, которую вы захотите освоить
Вы могли слышать про фулстек-разработчиков — эти специалисты создают сайты «под ключ». То есть разрабатывают и видимую часть, и всю серверную логику. Работодатели таких любят, ведь они могут заменить сразу нескольких специалистов. И зарплата соответствует. В среднем 200 000 рублей, по данным «Хабр Карьеры».
Вы можете освоить специальность на онлайн-курсе Skillbox «Фулстек-разработчик на JavaScript». За время обучения вы создадите больше 58 проектов от реальных заказчиков из разных сфер бизнеса. Редко у кого из новичков бывает такое портфолио!
Конечно, сложно понять, подходит тебе профессия или нет, когда ничего про неё толком не знаешь. Предлагаем узнать — пройти первые уроки бесплатно. Переходите по ссылке, оставляйте заявку, и мы откроем тестовый доступ: https://epic.st/eWpsPa?erid=2Vtzqv8PV8y
Черная пятница! Скидки до 60% +3 курса в подарок!
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#заметка дня
Я подумал, раз уж выкатил выше видео с пультом на Flutter, почему бы не рассказать о процессе создания некоторых элементов оттуда.
Чтобы не напрягать всех лишний раз, примеры будут на JavaScript и Canvas. Ну, вдруг кому-то пригодится нечто похожее.
Да и выглядит такой код чуток попроще, чем на CustomPainter во Flutter (хотя по факту-то тоже просто холст).
Итак, для пульта я решил сделать D-pad (он же джойстик или directional pad). На моём пульте он состоит из кольца с четырьмя кнопками и центральной кнопки.
Чаще всего, d-pad-ом назыают всем известную крестовину, которая не всегда обладает центральной кнопкой.
Проще всего достичь такого эффекта, разделив весь круг на четыре сектора. Каждый сектор — это дуга, занимающая угол
90°. Чтобы они визуально отделялись, добавляем контуры между дугами, а поверх всего накладываем центральный круг — он становится кнопкой.
Для корректного размещения делим полный угол 360° на количество дуг — четыре — и задаём начальный угол сдвига -45°. Он нужен, чтобы первый сектор смотрел строго вверх. А то а чо он.
В результате получаем симметричный D-pad, где каждый сегмент и центр выделены визуально: https://codepen.io/alinaki/pen/oNKmxNe?editors=0010
Ладно, ладно. Это на бумаге кажется, что всё действительно просто. На деле же я жёстко тупил.
1. Я не очень понимал, как обрабатывать клики, поэтому думал в сторону пяти отдельных элементов. А значит, об уравнении арки.
2. Потом я никак не мог врубиться, как же мне сделать отступы одинаковой ширины. Мысль, что это просто контур, граница, вообще не сразу мне в голову пришла.
3. Вроде, в школе учат, как определять, попала ли точка в контур, заданный неким уравнением, но вспоминаешь это тоже далеко не сразу.
В следующих постах расскажу, как решил уравнение в пункте 3, добавив подсветку нужного сегмента при нажатии.
Не переключайтесь, котаны!
#canvas #paint #remote