Frontend Developer

Код TypeScript для использования GPT5 с режимом рассуждений в вашем API

import { openai, type OpenAIResponsesProviderOptions } from "@ai-sdk/openai"
import { generateText } from "ai"

const result = await generateText({
  model: openai("gpt-5"),
  prompt: '¿Es mayor 5.11 que 5.9?', // «Больше ли 5.11 чем 5.9?»
  providerOptions: {
    openai: {
      serviceTier: 'auto',          // 'auto', 'flex', 'priority'
      reasoningEffort: 'high',      // 'minimal', 'medium', 'high'
      reasoningSummary: 'detailed'  // 'auto', 'concise', 'detailed'
    } satisfies OpenAIResponsesProviderOptions,
  },
})

// извлекаем текст внутреннего рассуждения модели
console.log(result.reasoningText)
// извлекаем ответ модели
console.log(result.text)

➡️ @byFrontDeveloper

НАКОНЕЦ-ТО! 👍 В VSCode добавили то, чего давно не хватало. Checkpoints для восстановления состояния чата и кода в любой момент. ➡️ @byFrontDeveloper

JavaScript Tip Более простой способ выбрать последний элемент массива

const todos = ['exercise', 'eat', 'work', 'sleep'];

/* Обычный способ */
todos[todos.length - 1]; // sleep

/* Новый способ */
todos.at(-1); // sleep

ES2022 представил новый метод для массивов: at(index) Здесь index может быть положительным или отрицательным. Отрицательный индекс выбирает элемент с конца массива. Таким образом, -1 выбирает последний элемент массива. Метод работает в последних версиях всех основных браузеров, выпущенных с марта 2022 года. Также доступен в Node.js и Deno с июля 2021 года. ➡️ @byFrontDeveloper

Трюк для освобождения места на жестком диске Если вы программист и используете npm, запустите это:

npx npkill

Вы удалите папки node_modules нужных вам проектов и увидите, как давно вы их не использовали ➡️ @byFrontDeveloper

Совет по CSS Иногда проще задать поворот, используя единицу turn вместо deg, особенно когда нужно указать значение больше 360 градусов.

1 turn = 360 deg

➡️ @byFrontDeveloper

Возможно, ты годами пользуешься Google Chrome, но знал ли ты об этом простом, но мощном приёме? 🤯 В инструментах разработчика браузера есть встроенная возможность делать скриншоты веб-страниц — без дополнительных расширений и сторонних утилит :) ➡️ @byFrontDeveloper

Совет по HTML Вы можете добавить темный режим на свой сайт с помощью всего одной строки кода. ➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

will-change — не всегда панацея. Иногда он только усугубляет ситуацию. Попробуй вместо него использовать transform: translateZ(0), если сталкиваешься с проблемами при анимации. И даже это крайняя мера 🙏 Часто можно просто переосмыслить решение и изменить структуру, чтобы избежать проблем вовсе. В этом конкретном кейсе я отказался от изначальной идеи и перенёс эффект на другой элемент в другом слое стека и это полностью решило проблему. P.S. Решил поделиться, потому что, когда кто-то упоминает will-change, у меня обычно нет хороших примеров, когда он вредит, а не помогает 🥲 Для справки: всё работало в Chrome и Firefox, но Safari как обычно подвёл ➡️ @byFrontDeveloper

Google запускает свой шрифт для программистов Он называется Google Sans Code и является открытым исходным кодом: → http://github.com/googlefonts/googlesans-code ➡️ @byFrontDeveloper

Это как использовать GitHub на стероидах Просто добавь explain перед github в URL любого репозитория — и ты сможешь задавать вопросы по коду, общаться с репозиторием в чате и даже скопировать всю структуру директорий. ☺️ ➡️ @byFrontDeveloper

Хочешь добавить эффект жидкого стекла в свой CSS-проект? 😬 Этот бесплатный инструмент позволяет сгенерировать эффект с множеством настроек :) ➡️ @byFrontDeveloper

Сегодня выходит версия Node.js с нативной поддержкой запуска TypeScript-файлов Хотя теперь Node.js может запускать TypeScript-файлы без предварительной компиляции, он только удаляет типовую аннотацию, которую можно отбросить без генерации кода. ❌Он не выполняет type checking ❌И не учитывает tsconfig.json ➡️ @byFrontDeveloper

«Как сделать так, чтобы пиксель-арт не был размытым в Chrome?» Попробуй image-rendering: pixelated Свойство image-rendering указывает браузеру, как интерполировать изображение при изменении его размера. Интерполяция применяется при масштабировании, чтобы изменить количество пикселей и избежать искажений Можно использовать с изображениями, фоновыми картинками, <video> и <canvas>. Подробнее о свойстве тут ➡️ @byFrontDeveloper

CSS совет Знаешь поле для одноразового пароля (OTP)? Его можно реализовать с помощью всего одного input и нескольких строк CSS. HTML: <input type="text" maxlength="6"> Код и демо: https://css-tip.com/single-digit-inputs/ Количество символов можно контролировать через атрибут maxlength ➡️ @byFrontDeveloper

Отличная демонстрация функции if() в CSS Функция if() в CSS позволяет использовать условную логику прямо внутри значений CSS-свойств. CSS постепенно превращается в полноценный язык программирования :) ➡️ @byFrontDeveloper

Прощай, dotenv 💔 В Node теперь можно читать .env файл без установки каких-либо зависимостей. С помощью метода: process.loadEnvFile() ➡️ @byFrontDeveloper

200+ ресурсов для веб-разработчиков 🔸Ссылка: http://web-dev-resources.com 🔸Репо: http://github.com/markodenic/web-development-resources Cохраняем имбу 🌟 ➡️ @byFrontDeveloper

Полезные сайты для разработчиков:

~ HTML-шаблоны http://htmlrev.com ~ Хостинг http://sevalla.com ~ Иконки http://lineicons.com ~ CSS-анимации http://animista.net ~ UI-инспирация (примеры интерфейсов) http://websitevice.com ~ UI-компоненты http://flowbite.com ~ Удалённая работа http://workremote.cc ~ Фрагменты кода (code snippets) http://snappify.com ~ Иллюстрации http://undraw.co ~ Фотографии http://unsplash.com ~ 100+ вариантов кнопок http://markodenic.com/tools/buttons-generator/ ~ Цветовые палитры http://coolors.co ~ Графики и диаграммы http://chartjs.org ~ SEO-анализ сайта http://seotest.me

Сохраняй и ставь лайк 🙂 ➡️ @byFrontDeveloper

Хочешь понять любой GitHub-репозиторий, не теряя полдня? Вот тебе инструмент. Бесплатный. Вставил ссылку — и пусть работает 🙂 > Источник: http://gitforme.tech ➡️ @byFrontDeveloper