Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

#инструменты #css

Скрытые возможности элемента input

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

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

Создаём анимацию при скролле на HTML, CSS и JS

Анимация при прокрутке (скролле) страницы может быть очень эффектной, а иногда и полезной для вашего сайта. В этом видео вы пошагово научитесь анимировать элементы при прокрутке страницы без тяжелых библиотек, используя только HTML, CSS и JavaScript.

#видео #фронтенд

10 инструментов для облегчения backend-разработки

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

Сегодня вы познакомитесь с 10 инструментами, которые сделают backend-разработку проще. Среди них:

— Encore. Фреймворк для TypeScript и Go, облегчающий создание надежных и типобезопасных приложений.
— Cursor. Форк VSCode с ИИ-функциями для программирования и генерации кода.
— Datadog. Сервис мониторинга инфраструктуры для любого стека и масштабируемости.
— Copycat. Генератор детерминированных фейковых данных для тестирования API.
— Infisical. Платформа для управления секретами с централизованным хранением данных.

Ознакомиться со всем список и узнать подробности можно по ссылке.

#бэкенд

SSE vs WebSocket: разобрались, что где лучше работает

В вебе есть множество способов обмена данными. Но наиболее популярные из них сегодня — SSE и WebSocket. При этом у них есть кардинальные различия. Например, SSE это односторонняя технология для общения сервера с клиентом, в то время как WebSocket позволяет взаимодействовать им в двухстороннем режиме.

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

#sse #websocket

Создатель JSON раскритиковал использование ИИ

Дуглас Крокфорд на своей странице в LinkedIn жёстко прошёлся по тому, как человечество использует искусственный интеллект сегодня.

По его словам каждое обращение к ИИ является актом плагиата и потенциальным нарушением авторских прав. Свою позицию он объясняет тем, что ИИ обучается по контенту, который не является общественным достоянием.

Также у гуру JavaScript есть претензии к качеству материалов, по которым ИИ учится. Часто это неправильный или токсичный контент.

Более подробно можно прочитать здесь. А вы согласны с ним?

upd. В комментарии добавил «точку зрения» ChatGPT по этому вопросу.

#новости

Давайте голосовать, подсказывайте!

Помните, мы обещали, что автор лучшей статьи месяца получит наш мерч? Теперь пришло время выбрать победителя! Мы определили три лучших материала за ноябрь, но решать вам.

Здесь можно с ними ознакомиться, а следующим постом будет опрос:
1) Django vs FastAPI в 2025 году: какой фреймворк выбрать?
2) Гайд: как настроить API для распознавания документов за 30 минут
3) Как пополнить кошелёк Steam в России в 2024 году

Автор статьи, набравшей больше всего голосов, получит наш фирменный мерч. Голосуйте — завтра подведём итоги!

#конкурс #tproger

Берите на заметку. Особенно актуально на Новый Год

Как создать свой шрифт прямо в браузере

Этот пост пригодится как фронтендерам, которые работают над своим проектом и хотят добавить туда уникальный шрифт, так и дизайнерам.

Чтобы сделать свой шрифт вам понадобится сайт typlr.app. Этот инструмент позволяет настраивать форму и кернинг для каждой буквы. Здесь очень простой и интуитивно понятный интерфейс, так что справится даже новичок.

А ещё его также можно установить как PWA на ваш компьютер. Пробуем тут: typlr.app

#инструменты #фронтенд #дизайн

Используем JS для поиска ликвидных облигаций

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

Чтобы вы могли сделать это быстрее и проще, автор этого материала подготовил специальный скрипт, работающий с API Московской биржи, который находит такие активы. Подробнее по ссылке.

#javascript

Состоялся релиз React 19

Адепты React, ликуйте! Новая версия принесла множество полезных улучшений:

— улучшения серверных компонентов позволяют уменьшить время первоначальной загрузки страницы, переносимость кода и SEO;
— новые директивы, позволяющие отслеживать, где выполняется код — на сервере или на клиенте;
— функции-операции, заменяющие собой обработчики событий;
— три новых хука;
— обновление в API и многое другое.

Со всеми изменениями, нововведениями и улучшения можно познакомиться тут.

#новости #react

Как спрятать любые данные в PNG

PNG хранит цвет и прозрачность пикселей, и с помощью младших бит (LSB) можно зашифровать данные так, что никто ничего не заметит. Даже размер картинки останется практически тем же.

Внутри PNG можно спрятать текст, файлы или даже запихнуть все свои пароли в фото любимого кота. Тут уже всё зависит от фантазии!

А как это сделать, читайте в статье.

#стеганография #js

Когда облако превращается в шторм: самая громкая кибератака на знаменитостей

The Fappening — взлом, который перевернул интернет и заставил знаменитостей бояться своих телефонов.

Тогда их интимные фото утекли в сеть, а хакеры доказали, что облачные хранилища не так безопасны, как казалось.

Как небольшая группа хакеров смогла устроить глобальный скандал? Чем закончилась эта история для звёзд и самих взломщиков? И чему эта история может научить всех нас?

В новом выпуске «АЙТИ КРАЙМ» мы разобрали одну из самых дерзких атак цифровой эпохи.

Слушайте и смотрите новый выпуск:

Яндекс.Музыка
Apple Music
Spotify
YouTube
Telegram

#подкаст #айтикрайм

Redux для новичков: база, с которой можно стартовать

Redux — это библиотека для управления состоянием приложения. Главный принцип Redux — один источник правды. Все данные приложения хранятся в одном месте — в store.

В этой статье вы узнаете, как она работает, в каких случаях применяется, с какими библиотеками и фреймворками совместима и как начать её использовать в своих проектах.

#фронтенд #redux

Как сделать условный border-radius в CSS

Хотите узнать технику, которая позволяет автоматически настраивать border-radius для карточного компонента в зависимости от размеров экрана?

Вам потребуется прописать одну хитрую формулу. О ней, а также способе её применения рассказали в этой статье.

#фронтенд #css

Однострочник или библиотека: спор жабы и гадюки или в этом есть смысл?

На Reddit появился тред, в котором обсуждается спор автора пакета is-number и разработчика, предложившего PR, заменяющий код пакета однострочником. Разработчик настаивает, что отказ от пакета сэкономит более 440 ГБ трафика в неделю, ведь помимо самого кода в библиотеке лежит ещё README, который занимает лишнее место.

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

Более подробно познакомиться с сутью спора вы можете в треде или в видео.

А как считаете вы?

Машинное обучение на JavaScript

Заняться машинным обучением можно даже, если вы не знакомы с Python. Для этого у JS есть библиотека ml5.js, которая построена на основе TensorFlow.js.

В этом уроке вы познакомитесь с основами использования ml5.js для создания интерактивных и интеллектуальных веб-приложений. Ролик подойдёт даже тем, у кого ещё нет опыта работы с машинным обучением.

#javascript #ml #видео

И мерч отправляется...

Наконец-то подводим итоги конкурса. Борьба была жаркая, но с небольшим отрывом побеждает статья «Как пополнить кошелек Steam в 2024 году», и ее автор Виктор получает мерч от Tproger!

В декабре вы тоже можете выиграть наш приз — к мерчу добавим кое-что интересное!

Выбирайте тему из Флудильни и пишите статью месяца!

#tproger #конкурс