Совет по HTML

Вы можете добавить темный режим на свой сайт с помощью всего одной строки кода.

➡️ @byFrontDeveloper

Возможно, ты годами пользуешься Google Chrome, но знал ли ты об этом простом, но мощном приёме? 🤯

В инструментах разработчика браузера есть встроенная возможность делать скриншоты веб-страниц — без дополнительных расширений и сторонних утилит :)

➡️ @byFrontDeveloper

Совет по CSS

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

1 turn = 360 deg

➡️ @byFrontDeveloper

Трюк для освобождения места на жестком диске

Если вы программист и используете npm, запустите это:

npx npkill

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

➡️ @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

НАКОНЕЦ-ТО! 👍

В VSCode добавили то, чего давно не хватало. Checkpoints для восстановления состояния чата и кода в любой момент.

➡️ @byFrontDeveloper

Код 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

Совет по CSS

Возможно, ты не знал об этом псевдоклассе в CSS.

Псевдокласс :out-of-range выбирает элементы <input>, значение которых выходит за пределы, указанные в атрибутах min и max

➡️ @byFrontDeveloper

Здесь собрано больше 1400 открытых API, которые можно использовать для реальных проектов и прокачки своих скиллов.

Сохрани себе на потом 👍

https://publicapis.dev/

➡️ @byFrontDeveloper

Поставил себе одно расширение в VS Code и залип

Реально выручает

- Генерит дерево проекта в один клик
- Можно выгрузить в JSON SVG Markdown или ASCII
- Иконки включаются или отключаются по вкусу

Чертовски удобно для ревью доков и вики 🔥

➡️ @byFrontDeveloper

Это наглядная шпаргалка по основным командам Git с примерами - от начальной настройки и создания репозитория до работы с ветками, отмены изменений, синхронизации с удалённым репо и использования Git Flow.

Кидай в закладки 😎

➡️ @byFrontDeveloper

Удалёнщик собирается в офис первый раз за год

➡️ @byFrontDeveloper

Совет по HTML

Можно использовать теги <details> и <summary>, если нужно сделать на странице сворачиваемый блок с контентом

Тег <details> создаёт контейнер для скрытого содержимого, а <summary> добавляет кликабельный заголовок, по которому этот контент можно показать или скрыть

➡️ @byFrontDeveloper

Совет по Chrome Dev Tools

Недавно я нашёл новый способ разбирать, как на сайтах реализованы разные крутые CSS-эффекты.

Для этого можно использовать функцию "Ask AI" прямо в Chrome Dev Tools.

Просто инспектируешь нужный элемент, чтобы подтянуть его в контекст, и начинаешь задавать вопросы, чтобы понять, как всё устроено.

➡️ @byFrontDeveloper

Chrome добавил ИИ в DevTools

Пишешь промпт → он сразу меняет твой сайт и выдаёт код.

Веб-разработка вышла на новый уровень

Огромное спасибо команде ChromiumDev за то, что сделали это возможным

➡️ @byFrontDeveloper

Функции в CSS! Уже доступны в Chrome 139

/* Функции в CSS */

/* Возвращает полупрозрачный цвет */
@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

/* Используем нашу функцию --opacity */
div {
  background: --opacity(blue, 80%);
}

/* Также можно использовать с кастомными свойствами */
.article {
  border-color: --opacity(
    var(--color-primary),
    var(--semi-transparent)
  );
}

Теперь можно создавать собственные функции прямо в CSS, передавать в них параметры и использовать вместе с custom properties

Вот хорошая статья с примерами использования: 5 полезных CSS-функций с использованием нового правила @function

➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Безумный трюк в VS Code, о котором 99% юзеров даже не догадываются 👀

Можно спокойно менять местами элементы боковой панели и терминала просто перетащив их мышкой

Мелочь, а кастомизация VS Code сразу выходит на новый уровень :)

➡️ @byFrontDeveloper

5 сайтов которые должен знать каждый веб-разработчик

- http://reactplay.io — учи React через практические проекты
- http://warp.dev — альтернатива Claude Code
- http://sevalla.com — фуллстек хостинг для Python, JavaScript, PHP, Go
- http://uiverse.io — бесплатные компоненты на Tailwind CSS
- http://animista.net — генератор CSS-анимаций с визуализацией

➡️ @byFrontDeveloper

Вау, отличная подборка чисто CSS-переключателей

Можно посмотреть кучу креативных вариантов, скопировать код и сразу использовать в своих веб-проектах.

Подходит для:

- кнопок переключения темы
- переключателей в настройках
- интерактивных UI-компонентов

Источник : themedevhub.com/tools/css-switch-collection

Надеюсь, будет полезно. 🌼

➡️ @byFrontDeveloper