Javascript Tip
Более удобный способ найти элемент с конца массива
Чистый и быстрый способ найти элемент с конца массива — использовать метод findLast().
Если нужен не сам элемент, а индекс, то можно использовать метод findLastIndex().
Оба этих метода поддерживаются всеми популярными браузерами и JS-рантаймами с сентября 2022 года🎉
@WebDev_Plus
Более удобный способ найти элемент с конца массива
Чистый и быстрый способ найти элемент с конца массива — использовать метод findLast().
const logs = [
{ category: 'error', description: 'Error 1', timestamp: 1705276800000 },
{ category: 'warning', description: 'Warning 1', timestamp: 1705363200000 },
{ category: 'error', description: 'Error 2', timestamp: 1705449600000 },
{ category: 'info', description: 'Info 1', timestamp: 1707523200000 },
];
const lastError = logs.findLast(log => log.category === 'error');
console.log(lastError);
// 👉 { category: 'error', description: 'Error 2', timestamp: 1705449600000 }
Если нужен не сам элемент, а индекс, то можно использовать метод findLastIndex().
Оба этих метода поддерживаются всеми популярными браузерами и JS-рантаймами с сентября 2022 года
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
У тебя сейчас мозг взорвётся.
Кликаешь по компоненту в React, и сразу открывается его код в VS Code
С такой штукой пишешь код заметно быстрее
@WebDev_Plus
Кликаешь по компоненту в React, и сразу открывается его код в VS Code
С такой штукой пишешь код заметно быстрее
@WebDev_Plus
❤4
Библиотека Javascript для создания потоков данных без зависимостей
https://github.com/jerosoler/Drawflow/
@WebDev_Plus
https://github.com/jerosoler/Drawflow/
@WebDev_Plus
❤1
С 34-м днем рождения, HTML-теги.
29 октября 1991 года Тим Бернерс-Ли опубликовал документ под названием HTML Tags.
В нем было описание первых 18 тегов HTML: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…, <address>, <hp1>…, <dl>, <dt>, <dd>, <ul>, <li>, <menu> и <dir>.
@WebDev_Plus
29 октября 1991 года Тим Бернерс-Ли опубликовал документ под названием HTML Tags.
В нем было описание первых 18 тегов HTML: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…, <address>, <hp1>…, <dl>, <dt>, <dd>, <ul>, <li>, <menu> и <dir>.
@WebDev_Plus
❤12
This media is not supported in your browser
VIEW IN TELEGRAM
Хотите отображать PDF-файлы на своем веб-сайте? Обратите внимание на это
Работает с React, Svelte, Solid и Vanilla JavaScript.
@WebDev_Plus
Работает с React, Svelte, Solid и Vanilla JavaScript.
$ npm install @pdfslick/react
@WebDev_Plus
❤6😭1
This media is not supported in your browser
VIEW IN TELEGRAM
Мой любимый терминал — Warp. Я до сих пор нахожу в нём мелкие фишки, которые помогают работать быстрее. Знал, что там есть встроенный файловый менеджер?
@WebDev_Plus
@WebDev_Plus
❤2
Вот небольшой совет, не про Angular.
Не обязательно держать submit/reset кнопки прямо внутри формы. Можно повесить на кнопку атрибут form.
Этот атрибут связывает кнопку с нужной формой, и тогда её можно разместить где угодно в документе, независимо от её позиции.
Надеюсь, пригодится.
@WebDev_Plus
Не обязательно держать submit/reset кнопки прямо внутри формы. Можно повесить на кнопку атрибут form.
Этот атрибут связывает кнопку с нужной формой, и тогда её можно разместить где угодно в документе, независимо от её позиции.
Надеюсь, пригодится.
@WebDev_Plus
❤1👍1
Разработчик экспериментирует с HTMX и нашёл способ комбинировать JSX, TypeScript и кастомные HTML-элементы… без привычной фронтовой сборки. Стили и небольшой клиентский код он просто инлайнит прямо с сервера. Звучит странновато, но есть плюсы: всё лежит рядом, не нужно возиться с бандлерами, а работа идёт быстрее.
Фокус в одном трюке: клиентские функции можно передавать в <script> как есть, забрав их исходник через Function.prototype.toString(). То же работает и для CSS. Получается, будто пишешь фронт прямо в браузере, но все плюшки TypeScript и JSX получаешь на сервере.
Метод, конечно, не для гигантских приложений. Но для маленьких виджетов, кастомных элементов или отдельных фич без тонны зависимостей — вполне себе вариант. Минификацию можно отдать CDN или вообще забить, если кода немного. С внешними библиотеками помогут import maps.
Автор задумки признаёт: это не серебряная пуля. Просто ещё один инструмент, который делает разработку чуть приятнее, когда он уместен.
@WebDev_Plus
Фокус в одном трюке: клиентские функции можно передавать в <script> как есть, забрав их исходник через Function.prototype.toString(). То же работает и для CSS. Получается, будто пишешь фронт прямо в браузере, но все плюшки TypeScript и JSX получаешь на сервере.
Метод, конечно, не для гигантских приложений. Но для маленьких виджетов, кастомных элементов или отдельных фич без тонны зависимостей — вполне себе вариант. Минификацию можно отдать CDN или вообще забить, если кода немного. С внешними библиотеками помогут import maps.
Автор задумки признаёт: это не серебряная пуля. Просто ещё один инструмент, который делает разработку чуть приятнее, когда он уместен.
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Свежак в ChromeDevTools! Отладка полной performance-трейсы с помощью Gemini.
Записал трейс, а дальше просто общаешься с Gemini про весь этот трейс: связанные Performance Insights и даже данные из поля. И главное.. не надо заранее выделять контекст, Gemini сам разберется
@WebDev_Plus
Записал трейс, а дальше просто общаешься с Gemini про весь этот трейс: связанные Performance Insights и даже данные из поля. И главное.. не надо заранее выделять контекст, Gemini сам разберется
@WebDev_Plus
❤1😁1
Менять HTML на лету еще никогда не было так просто.
Bun HTMLRewriter API дает низкоуровневый контроль для парсинга, модификации и улучшения HTML через CSS-селекторы, и все это на бешеной скорости. Реализация в Bun основана на Cloudflare lol-html.
Можно переписывать контент из строк, Blob, ArrayBuffer, файлов или даже HTTP-ответов. Есть тонкое управление элементами, текстовыми нодами и комментариями. Идеально, когда нужно подправить HTML прямо в процессе обработки.
@WebDev_Plus
Bun HTMLRewriter API дает низкоуровневый контроль для парсинга, модификации и улучшения HTML через CSS-селекторы, и все это на бешеной скорости. Реализация в Bun основана на Cloudflare lol-html.
Можно переписывать контент из строк, Blob, ArrayBuffer, файлов или даже HTTP-ответов. Есть тонкое управление элементами, текстовыми нодами и комментариями. Идеально, когда нужно подправить HTML прямо в процессе обработки.
@WebDev_Plus
❤2
Bun.password упрощает безопасное хеширование и проверку паролей.
Алгоритм, который используется для генерации хеша, хранится внутри самого хеша. Если используется bcrypt, возвращаемый хеш кодируется в Modular Crypt Format для совместимости с большинством существующих реализаций bcrypt. Если применяется argon2, результат кодируется в более новом PHC формате. Функция verify автоматически определяет алгоритм по входному хешу и использует правильный метод проверки. Она корректно определяет алгоритм как из PHC-, так и из MCF-кодированных хешей.
По умолчанию библиотека bcrypt обрезает пароли длиннее 72 байт. В Bun, если передать Bun.password.hash пароль длиннее 72 байт и использовать алгоритм bcrypt, пароль сначала будет захеширован через SHA-512, а затем уже отправлен в bcrypt. То есть вместо того чтобы отправить в bcrypt 500-байтный пароль, который без предупреждения обрежется до 72 байт, Bun сначала прогонит его через SHA-512 и передаст в bcrypt уже получившийся хеш (только если длина превышает 72 байта). Это более безопасное поведение по умолчанию.
@WebDev_Plus
Алгоритм, который используется для генерации хеша, хранится внутри самого хеша. Если используется bcrypt, возвращаемый хеш кодируется в Modular Crypt Format для совместимости с большинством существующих реализаций bcrypt. Если применяется argon2, результат кодируется в более новом PHC формате. Функция verify автоматически определяет алгоритм по входному хешу и использует правильный метод проверки. Она корректно определяет алгоритм как из PHC-, так и из MCF-кодированных хешей.
По умолчанию библиотека bcrypt обрезает пароли длиннее 72 байт. В Bun, если передать Bun.password.hash пароль длиннее 72 байт и использовать алгоритм bcrypt, пароль сначала будет захеширован через SHA-512, а затем уже отправлен в bcrypt. То есть вместо того чтобы отправить в bcrypt 500-байтный пароль, который без предупреждения обрежется до 72 байт, Bun сначала прогонит его через SHA-512 и передаст в bcrypt уже получившийся хеш (только если длина превышает 72 байта). Это более безопасное поведение по умолчанию.
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Отличный веб-компонент для создания эффекта спойлера на вашем веб-сайте. Совместим с React, Vue, Angular, Svelte и другими.
@WebDev_Plus
> npm install spoilerjs
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Шарь свой localhost кому угодно прямо из VS Code 🤯
В VS Code есть встроенная фишка с портами, которая позволяет открыть твой локальный сервер в интернет без всяких сторонних тулз.
Как это юзать:
Открой вкладку Ports в терминальной панели
Жми Forward a Port
Введи номер локального порта (у меня был 5173, у тебя может быть 3000, 3001 и т. д.)
VS Code сгенерит ссылку — правой кнопкой и Make Public
Копируй ссылку и кидай кому надо
Идеально для демо, тестов на других девайсах или чтобы показать работу клиентам и команде :)
В видео есть пошаговый разбор, как это делается👌
@WebDev_Plus
В VS Code есть встроенная фишка с портами, которая позволяет открыть твой локальный сервер в интернет без всяких сторонних тулз.
Как это юзать:
Открой вкладку Ports в терминальной панели
Жми Forward a Port
Введи номер локального порта (у меня был 5173, у тебя может быть 3000, 3001 и т. д.)
VS Code сгенерит ссылку — правой кнопкой и Make Public
Копируй ссылку и кидай кому надо
Идеально для демо, тестов на других девайсах или чтобы показать работу клиентам и команде :)
В видео есть пошаговый разбор, как это делается
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Очень интересный ресурс для программистов и веб-дизайнеров. Инструмент для создания анимированных фонов с цветовыми градиентами.
https://www.krumzi.com/tools/animated-background-generator
@WebDev_Plus
https://www.krumzi.com/tools/animated-background-generator
@WebDev_Plus
Совет по NgRx на сегодня (и чуть вопрос)
Когда используешь
ты можешь подписаться на события из фичи, которая вообще не инжектит стор.
В таком случае стор может ещё не создаться, и события просто проглотятся😅
В целом логично, это стандартное поведение DI в Angular, но я почему-то предполагал, что в NgRx есть какая-то магия, которая из коробки стартует «глобальные» сторы (срезы состояния) заранее.
Решение: заинжектить глобальные сторы в app.config.ts (или core.ts), чтобы инстанс стора создавался с самого начала.
@WebDev_Plus
Когда используешь
@ngrx/signals/events с{ providedIn: 'root' }ты можешь подписаться на события из фичи, которая вообще не инжектит стор.
В таком случае стор может ещё не создаться, и события просто проглотятся
В целом логично, это стандартное поведение DI в Angular, но я почему-то предполагал, что в NgRx есть какая-то магия, которая из коробки стартует «глобальные» сторы (срезы состояния) заранее.
Решение: заинжектить глобальные сторы в app.config.ts (или core.ts), чтобы инстанс стора создавался с самого начала.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Совет по JavaScript:
Можно обернуть аргументы console.log() в фигурные скобки, чтобы в выводе были видны имена переменных.
@WebDev_Plus
Можно обернуть аргументы console.log() в фигурные скобки, чтобы в выводе были видны имена переменных.
@WebDev_Plus
❤10👍4😁1