14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Встречаемся в понедельник!
Приглашаем вас на онлайн-встречу с Программным комитетом FrontendConf 2024
📌 01.04 в 19:00 Мск.
Хотите выступить на FrontendConf 2024 7 и 8 октября в Москве? Заявку на доклад можно подать до 15 апреля. Собираем программу заранее, чтобы потом плотно, но в спокойном режиме поработать со спикерами над контентом и подачей.
✔️На встрече 1 апреля расскажем:
— доклады на какие темы интересны нам и нашим участникам в этом году,
— у каких заявок выше шансы пройти в программу,
— как помогаем спикерам готовиться.
Встреча будет особенно полезна, если есть желание выступить, но пока нет темы, или если идея для доклада есть, но не уверены, что она интересна. Приходите, а мы выслушаем и подскажем, как лучше выбрать и «упаковать» тему.
✔️Участие свободное, только зарегистрируйтесь по ссылке: https://tglink.io/b91d20eab4fb
Приходите сами и расскажите о встрече коллегам.
Ждем вас!
erid: LjN8KXKrj
#инструмент дня
Если меня спросят, на чем я стал бы делать ранний прототип, я бы ответил Drupal. Ну или Ruby on Rails. Ну просто потому что я их знаю. На Drupal вообще мышкой можно все накликать и получить рабочий API.
Но, конечно, это уже сравнительно оторвано от реальности :) Простой CRUD aka Create-Read-Update-Delete можно собрать тысячей разных способов.
Так что стоит принести ещё один: Remult.
https://remult.dev/
Remult использует всю мощь декораторов TypeScript для описания своих т. н. сущностей, которые потом станут моделями. import { Entity, Fields } from "remult"
@Entity("tasks", {
allowApiCrud: true
})
export class Task {
@Fields.cuid()
id = ""
@Fields.string()
title = ""
@Fields.boolean()
completed = false
@Fields.createdAt()
createdAt?: Date
}
После чего остается только зарегистрировать созданную сущность в сервере на, например, express и получить готовый CRUD API.
Останется дело за фронтендом, который автоматом тут не генерируется, зато вам доступно множество хелперов для управления своими сущностями.
Прекрасная документация, отличные пошаговые инструкции к разным фреймворкам. Ребята однозначно старались.
Горячая рекомендация, в целом.
#typescript #crud
#фишка дня
Наверное, было бы удобно отображать статус разработки компонентов в Storybook, согласитесь?
Но вот авторы Storybook так не считают. Потому никакой возможности поместить статус отдельного взятого компонента в сайдбар нет.
Хотя, не было.
Варя Степанова предлагает интересное решение с расширением компонента сайдбара. Теперь можно добавить любой лейбл к любому компоненту.
Как-то так:const meta: Meta<typeof Btn> = {
title: 'Components/Button',
component: Btn,
tags: ['NEW'], // Example of assigning status as tags
argTypes: {...},
};
Репозиторий: https://github.com/varya/storybook-8-sidebar-statuses
Пример: https://varya.me/storybook-8-sidebar-statuses/
Авторам сторибука идея, кстати, очень понравилась. Но она не очень укладывается в их концепцию тегировать стори, а не компоненты.
#storybook
Проблема айтишников старше джуна №1: плохая самопрезентация на собеседованиях
Большинство реально сильных специалистов теряют ~20-50% от зарплаты только из-за слабой переговорной позиции.
Проект «Выше вилки» фиксит этот баг.
Экс-программисты Яндекса и Касперского делятся полезными фишками в переговорах, тактиками общения с рекрутёром и способами объективно оценить свои скиллы в денежном эквиваленте.
На канале @above_the_range проходят как бесплатные тренинги, так и анонсы на поток «Выше вилки», где вы научитесь правильно отвечать на скользкие и неочевидные вопросы.
Всё это — на примере реальных кейсов трудоустройства и без «душноты».
Никакого заговора на «успешный успех». Подписывайтесь и тренируйте переговорные техники.
реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941
Погрузитесь в мир Python с нашим бесплатным курсом!
🎓 Включено 45 уроков, 56 упражнений в тренажере и 163 проверочных теста. Узнаете, как создавать программы, работать с условиями и функциями.
Что вы освоите:
— Составление программ из нескольких модулей.
— Анализ ошибок в коде с использованием отладочной печати.
📚 Курс охватывает основы Python: синтаксис, условия, циклы, типы данных и библиотеки. Практика на каждом шаге поможет вам уверенно использовать язык.
Начните свое обучение с бесплатного базового курса Python и вы сможете создавать несложные программы, а так же анализировать ошибки в коде!
Вообще, оставлю заметку для себя по поводу этого репоста.
Я, в целом, понимаю, что Angie это форк nginx и цель у форка вполне конкретная, но от таких пресс-релизов можно получать пользу.
В данном случае, я, признаюсь, не знал о существовании протокола ACME, и обновлял сертификаты ручками. Ну окей, вызовом бота Let's Encrypt, но всё же.
А мог же просто:
http {
resolver 127.0.0.1:53; # требуется для директивы 'acme_client'
acme_client example https://acme-staging-v02.api.letsencrypt.org/directory;
server {
listen 80;
listen 443 ssl;
server_name example.com www.example.com;
acme example;
ssl_certificate $acme_cert_example;
ssl_certificate_key $acme_cert_key_example;
}
}
Привет, друзья! Рады сообщить, что мы обновили веб-сервер Angie и Angie PRO до версии 1.5.0! 🌟
Интересный факт: ровно год назад мы выпустили Angie PRO, а сегодня представляем новую версию веб-сервера с открытым исходным кодом Angie и Angie PRO — коммерческая версия веб-сервера.
Главным изменением в этом обновлении стало добавление модуля http_acme, который реализует поддержку протокола ACME (Automated Certificate Management Environment). Данный модуль необходим для того, чтобы значительно упростить работу с цифровыми сертификатами веб-сайтов, убирая необходимость использования сторонних решений, таких как EFF Certbot. Теперь Angie не уступает таким решениями, как Caddy!
Инструкция по установке доступна по ссылке.
А ознакомиться с полным списком всех изменений вы можете у нас на сайте.
Angie OSS и Angie PRO.
Как философ заработал состояние в $750 млн на знакомствах?
Дмитрий Волков — предприниматель из списка Forbes, инвестор, доктор философских наук, коллекционер и деятель современного искусства.
Он основал крупнейшую в мире группу компаний по созданию приложений для общения в digital — Social Discovery Group🔥 Ее миссия — решить проблему одиночества, изоляции и разъединения с помощью виртуальной реальности. В нее входит более 40 приложений, которыми пользуются уже более 250 млн пользователей по всему миру.
В своем телеграм-канале Дмитрий рассуждает о философии и будущих технологиях, а также делится особенностями образа жизни цифрового кочевника.
👉Подписывайтесь👈
и участвуйте в дискуссиях!
Напоминаю, что сегодня начинается фестиваль по трудоустройству для фронтендеров.
В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование
На стримах вы сможете посмотреть, что спрашивают, как разбирают ответы участников, получить знания и стать увереннее в себе.
Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно 🥸
В DevTools Chrome 123 встроили какую-то пасхалку. Мол, искать под эмодзи 💫 (комета).
Кто искал? Кто нашёл?
Upd. окей, в комментариях рассказали, как это сделать. Скоро выкачу и сюда :)
#фишка дня
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота": .box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick
Вы откликаетесь на миллион вакансий в день, выполняете тестовые задания, ходите на собеседования, но как итог не имеете ни одного оффера. Звучит знакомо? 🥺
Эту систему можно хакнуть! Главное —
1️⃣ Научиться правильно презентовать свой опыт
2️⃣ Выписать вопросы, которые чаще всего задают на собеседованиях и потренироваться отвечать на них
3️⃣ Понять, как мыслят проверяющие при оценке тестового задания, на что важно обратить внимание при его решении
4️⃣ Определить, на прокачке каких навыков нужно сфокусироваться в первую очередь.
С этими задачами помогут наши партнеры — Solvery. На следующей неделе ребята проводят Frontend Fest по трудоустройству!
📆 Расписание феста:
25.03 в 18:30 — Из чего состоит получение оффера? Необходимые скиллы, советы по резюме и воронка найма
26.03 в 19:00 — Разбор решений тестового задания
27.03 в 19:00 — Моковое собеседование по JavaScript
28.03 в 19:00 — Разбор резюме
Переходите по ссылке, чтобы зарегистрироваться на фест!
Смартфон за ваш ответ!
Исследовательская компания OMI проводит опрос среди IT-специалистов.
Пройдите по ссылке, ответьте на несколько вопросов и получите шанс выиграть последнюю модель передового смартфона!
Примите участие в опросе прямо сейчас — это займет минимум времени.
#такое дня
Предлагаю выразить своё отношение к происходящему в комментариях.
Объяснение через час.
☁️ CryptoCloud - ваш надежный инструмент для интеграции криптоплатежей.
Откройте возможность принимать оплату в криптовалюте со всего мира прямо в вашем приложении или сервисе.
➗ С комиссиями всего от 0.4%, CryptoCloud позволяет минимизировать затраты и максимизировать прибыль вашего проекта.
✅ Преимущества криптопроцессинга CryptoCloud:
💎 Легкая интеграцию криптоплатежей в любую систему или приложение.
💎 Автоматизация платежей;
💎 Функциональный кабинет.
💎 Вывод в течение 30 минут
💎 Высокий уровень безопасности
✅ Поддерживаемые валюты платежной системы CryptoCloud:
💰 Bitcoin
🔹Ethereum
🪙 Litecoin
💲 Стейблкоины (USDT, USDC, TUSD) в различных сетях, обеспечивая гибкость и выбор для ваших пользователей.
CryptoCloud предлагает обширную документацию и поддержку для обеспечения гладкой интеграции. Наша команда технической поддержки всегда на связи, чтобы помочь вам с любыми вопросами или проблемами.
✅ Сделайте свои проекты еще более доступными для пользователей по всему миру, используя передовые решения CryptoCloud для криптоплатежей.
➡️ Присоединяйтесь к CryptoCloud, чтобы сделать свой бизнес лучше!
#такое дня
Что, все уже услышали об уязвимости в xz? По ней можно фильм снять.
Для тех, кто любит поточнее: https://habr.com/ru/amp/publications/804039/
Для всех остальных суть в том, что кто-то пять лет внедрялся в доверие к разработчикам средства сжатия lz (а конкретно, библиотеки liblzma) и в какой-то момент внедрил бэкдор. И никто не заметил и внимания не обратил: ну уважаемый человек же.
А заметил это вообще чувак из Майкрософт: Андрес Фройнд. Ему показалось, что тесты как-то медленно проходят 🫠
Ладно, к сути. Информация об уязвимости распространяется вирусным путём. Бэкдор включён в версии 5.6.0 (февраль) и 5.6.1 (март). Линукс-дистрибутивы многие вряд ли этому подвержены, а вот brew в macOS вполне кому-то мог это доставить.
Так вот, не надо кидаться проверять версию через запуск xz --version! Вы буквально запустите приложение. Это касается любых новостей об уязвимостях.
Впрочем, если вредонос уже скачан — то он уже в системе, ибо библиотека-то используется ну почти везде, особенно при установлении SSH-туннелей.
Не надо это делать на своих корпоративных машинах :)
Потому:
1. Проверяйте версию через пакетные менеджерыapt-cache policy xz-utils
brew info xz
и так далее
2. Когда откатили — перезагрузитесь, обязательно.
Как-то так.
P. S. PR с уязвимостью был одобрен старым добрым LGTM.
В канале «BBE: IT-продукт» школы дизайна и технологий Bang Bang Education собираются единомышленники, объединенные любовью к профессии и интересом к технологиям.
Ежедневно в канале выходят посты, посвященные созданию цифровых продуктов и управлению ими, интервью со специалистами из IT-индустрии, подборки с полезными материалами для начинающих разработчиков, тестировщиков, аналитиков и продакт-менеджеров.
Также вы найдете здесь новости о платных и бесплатных мероприятиях школы: открытых вебинарах с преподавателями, на которые может прийти каждый, фестивалях, ознакомительных уроках, которые помогут сделать первые шаги в новой профессии, и новых наборах на курсы Bang Bang Education.
→ Присоединяйтесь к каналу «BBE: IT-продукт», чтобы развиваться в сфере технологий вместе!
Реклама. ООО «СИЛА ЗНАНИЯ», ИНН: 9701158240, erid: LjN8KB94X
#ссылка дня
Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.
У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.
https://codelabs.developers.google.com/
Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.
Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.
Моя рекомендация, в общем.
#google #dev #education #бородач
#библиотека дня
— А что, если типы надо проверять в рантайме?
— Да не, херня какая-то...
Впрочем, создателям библиотеки Typia так совсем не кажется. Да и вам, в целом, казаться не должно: TypeScript, конечно, большой молодец, но типы проверяет только на этапе компиляции. И, конечно же, мы все верим в святые контракты :)
Библиотека предлагает не только проверку входящих данных, но и соответствие JSON описанию.
Есть как простые is и equals, возвращающие логическое соответствие, так и assert и assertEquals, кидающие ошибку.
Отличие is от equals в том, что is менее строгий и позволяет расширение объекта свойствами, которых нет в интерфейсе. Но описанные при этом должны соответствовать. const input: unknown = {
id: v4(),
email: "samchon.github@gmail.com",
age: 30,
extra: "superfluous property", // extra
};
const is: boolean = typia.is<IMember>(input);const
equals: boolean = typia.equals<IMember>(input);
console.log(is, equals); // true, false
Как-то так. Кто использовал уже?
#typescript #types
#такое дня
Ничего необычного на иллюстрации не замечаете?
А здесь происходит ого-го какая драма!
Итак, я понятия не имею, зачем это всё делается, но всеми так любимый виджет выбора aka select до сих пор получает обновления!
У select только два плюса, которые могут заставить вас его выбрать: исключительное удобство на мобильных устройствах и возможность длинному списку вылезти за пределы не только видимой области браузера, но и окна вообще.
Впрочем, из-за этой особенности он не отображается в Zoom- и Meet- и прочих презентациях.
Ладно, к делу. Вы в курсе, что начиная с Chrome 119, Firefox 122 и Safari 17 вы можете использовать горизонтальный разделитель чтобы разбить список для выбора?
Да-да, больше никаких <option disabled>-----</option>! Просто ставите <hr> и всё.
Ну, типа... ну ок.
Все, конечно, ждём popover и selectlist. Эта игра в доделки раздражает.
#css #select #form #widget
#codepen дня
Мне сегодня захотелось поделиться одной своей старой работой на WebGL: https://codepen.io/alinaki/pen/NWbBbEG
Это пульсирующая сетка из шестиугольников (гексагональная). Заодно и на мышь реагирует. Принимаю предложения по улучшению, перенесено как было.
Во всяком случае, благодаря этой работе я узнал о прекрасной библиотеке для составления подобных: https://github.com/vonWolfehaus/von-grid
Там же, кстати, есть ссылка на математическое описание шестиугольных сеток: https://www.redblobgames.com/grids/hexagons/
Учитывая, что они часто используются в играх – почему бы и нет.
#webgl #three #hexagonal #бородач
#фишка дня от Jhey
Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
#статья дня
Забудьте всё, что вы знали о режимах смешивания aka mix-blend-mode в CSS. А если не знали ничего, почитайте пару моих постов, и возвращайтесь обратно. Например, вот: /channel/htmlshit/1757
Лучшее, для чего их обычно применяют, это убирание белого фона под логотипами. Не видели? Потом покажу, сейчас о другом.
Что если я вам скажу, что изображение выше — это, кстати, реализация циферблата с Apple Watch — целиком и полностью реализовано режимами смешивания и градиентом?
Верится с трудом, да? Весь секрет в том, чтобы выйти за рамки двух слоёв и смешать несколько за раз. Можно добиться потрясающих эффектов, вплоть до dithering.
Статья Скотта Вэндехе как раз об этом: https://cloudfour.com/thinks/the-power-of-css-blend-modes/
Была бы в 2013 году поддержка mix-blend-mode пошире, можно было бы такой техникой сделать имитацию гравировки в моём невыпущенном конструкторе надгробий, кек
#css #mix #blend #бородач
#фишка дня
Итак, в комментариях к предыдущему посту уже выяснили, что пасхалка — это игра Breakout. Или Арканоид по-нашему.
Появиться она должна 1 апреля. По крайней мере, это следует из кода (в комментариях).
Но за этой пасхалкой скрыта ещё одна: собственно, активация игры до 1 апреля.
1. Открываем профайлер
2. Записываем секунд 5-7
3. Вводим команду fixme (чтобы было интереснее, оставлю вам самим разбираться, как)
4. ...
5. Играем!
Чем хуже производительность сайта — тем лучше игра :)
P. S. Мне не удалось активировать игру на сайтах от Google 🫠 Но по профайлеру, у них всё очень плохо.
С 2 по 27 апреля программа Garage Digital запускает мастерскую по креативному программированию. Она предназначена как для начинающих программистов, так и для тех, кто впервые будет работать с кодом.
Авторы и ведущие мастерской Степан Кухарский и Алина Черейская — основатели SA lab — расскажут о том, как при помощи кода создавать автоматически генерируемые и разнообразные элементы цифровых миров. Результатом станет проект, разработанный участниками самостоятельно.
Подробнее о программе — на сайте. Купить абонемент можно по ссылке.
Токен:
Реклама. Частное учреждение культуры «Музей современного искусства «Гараж». Erid: 2VtzqvtnFiD
#фишка дня
Показать цвет белее белого? Легко!
На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...
Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.
А ещё она очень бесит в тиктоке и инстаграме.
Суть её в том, что можно увеличивать яркость отдельных участков без увеличения яркости всего изображения. Но для этого, конечно, ваш дисплей должен поддерживать такую возможность.
Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode
Выкрутите яркость экрана пониже и увидите, как левый код ярче правого! Белее белого, буквально.
Вполне можно применять в билетных сервисах...
Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite
Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...
#hdr #video #ios #macos #бородач
#ссылка дня
Типизирование React-компонентов, рефов и хуков может обернуться большой болью. Особенно если в первый раз. Но к счастью, у нас есть GitHub, который добрые люди используют не только как хранилище кода, но и как идеальный универсальный блог :)
Встречайте: https://github.com/typescript-cheatsheets/react
Буквально, из описания: «Cheatsheets for experienced React developers getting started with TypeScript».
Впрочем, у ребят есть и более привычная веб-версия, разбитая на секции: https://react-typescript-cheatsheet.netlify.app/
Мне, например, недавно понадобилось сделать полиморфичный компонент, который в зависимости от условий мог становиться то ссылкой, то кнопкой (какой прекрасный повод для холивара). Я не нашёл решения непосредственно здесь, зато нашёл в обсуждениях и PR. Что тоже показывает, как удобен GitHub для коллективного блога.
В общем, всем типов, котаны.
#typescript #react #бородач
#такое дня
Не думаю, что автор оригинального твита спрашивал серьезно, но всё же.
1. Конструктор RegExp принимает только строки, а {}.toString() это '[object Object]'
2. Квадратные скобки [] устанавливают соответствие любому символу внутри них
3. Ну и mom приводит к совпадению по o, а dad — нет 🫠
#фишка дня
Заканчивайте использовать JSON.parse(JSON.stringify(obj)) для дублирования (aka глубокого копирования aka deep copy) объектов в JavaScript.
Такой метод игнорирует даты, неопределённые значения и не работает с циклическими зависимостями.
Уже достаточно давно имеется structuredClone.
Наличествует во всех современных браузерах, есть полифилл.
P. S. вот тока не надо мне про лодаш тут плиз) все же использовали JSON-решение из-за скорости ⚡️
#js #clone #бородач
#фишка дня
Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().
Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.
Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.
Так вот, к чему это я. С выходом Firefox 115 в июле 2023 года мы получили иммутабельные методы работы с массивами во всех браузерах:.toReversed()
.toSorted()
.toSpliced()
.with()
Если что, with — это про замену элементов по индексам.
Есть и полифиллы на core-js, так что без работы никто не останется.
И это прекрасно.
#js #array #sort #бородач