Шпаргалка по CSS для начинающих фронтендеров
В одном месте собрали все самые важные темы, которые приходится гуглить во время верстки:
• Flexbox и основные термины
• CSS Grid (
•
• Единицы измерения
• Viewport-единицы
• Работа с осями и адаптивностью
Сохраняем в закладки.
В одном месте собрали все самые важные темы, которые приходится гуглить во время верстки:
• Flexbox и основные термины
• CSS Grid (
grid-row, grid-column)•
min-content и max-content• Единицы измерения
em и rem• Viewport-единицы
• Работа с осями и адаптивностью
Сохраняем в закладки.
Media is too big
VIEW IN TELEGRAM
Преобразуй свой TypeScript-код в визуальные диаграммы
Этот опенсорсный инструмент позволяет вставить любой TS-файл и мгновенно превратить его в аккуратную визуальную диаграмму всех ваших интерфейсов, типов, классов и связей
Отлично подходит для обучения, понимания новой кодовой базы и объяснения вашей архитектуры кому-то без необходимости что-либо рисовать вручную👍
GitHub: tsdiagram
Этот опенсорсный инструмент позволяет вставить любой TS-файл и мгновенно превратить его в аккуратную визуальную диаграмму всех ваших интерфейсов, типов, классов и связей
Отлично подходит для обучения, понимания новой кодовой базы и объяснения вашей архитектуры кому-то без необходимости что-либо рисовать вручную
GitHub: tsdiagram
Please open Telegram to view this post
VIEW IN TELEGRAM
Шпаргалка по проектированию веб систем System Design 101
Подробное руководство по архитектуре веб‑сервисов, которое обязательно стоит сохранить. Это перевод статьи от ByteByteGo опубликованный на Хабре.
Подробное руководство по архитектуре веб‑сервисов, которое обязательно стоит сохранить. Это перевод статьи от ByteByteGo опубликованный на Хабре.
«SVG Tutorial – How to Code Images with 12 Examples» как писать изображения прямо в HTML
Полезное руководство познакомит вас с миром SVG: вы узнаете, как писать изображения прямо в HTML, рисовать простые фигуры, группировать и переиспользовать элементы, добавлять текст и анимацию
Практичные примеры шаг за шагом делают материал доступным даже новичкам.
Полезное руководство познакомит вас с миром SVG: вы узнаете, как писать изображения прямо в HTML, рисовать простые фигуры, группировать и переиспользовать элементы, добавлять текст и анимацию
Практичные примеры шаг за шагом делают материал доступным даже новичкам.
Онлайн книга «Total TypeScript Essentials»
Если ты хочешь уверенно разбираться в TypeScript эта книга именно для тебя. Matt Pocock простым языком объясняет даже сложные темы: от установки до крутых типовых фишек.
С этой книгой ты научишься писать безопасный код, понимать что делает TypeScript под капотом и использовать его возможности по максимуму.📚
https://www.totaltypescript.com/books/total-typescript-essentials
Если ты хочешь уверенно разбираться в TypeScript эта книга именно для тебя. Matt Pocock простым языком объясняет даже сложные темы: от установки до крутых типовых фишек.
С этой книгой ты научишься писать безопасный код, понимать что делает TypeScript под капотом и использовать его возможности по максимуму.
https://www.totaltypescript.com/books/total-typescript-essentials
Please open Telegram to view this post
VIEW IN TELEGRAM
Хотите, чтобы сайт ощущался мгновенно отзывчивым?
Например, когда пользователь наводит курсор на ссылку.
Это веб-стандарт. Просто HTML. Без библиотек.
Минус: поддержка сейчас около 70% – Safari и Firefox пока не поддерживают.
Плюс: если браузер не поддерживает эту возможность, тег просто игнорируется. И всё
<script type="speculationrules"> позволяет пререндерить следующую страницу ещё ДО того, как пользователь кликнет по ссылке.Например, когда пользователь наводит курсор на ссылку.
Это веб-стандарт. Просто HTML. Без библиотек.
Минус: поддержка сейчас около 70% – Safari и Firefox пока не поддерживают.
Плюс: если браузер не поддерживает эту возможность, тег просто игнорируется. И всё
Предложение Await Dictionary для ECMAScript перешло на Stage 3 в TC39
Сейчас
Сейчас
Promise.all возвращает результаты в виде массива, где значения определяются их позициями. Новый метод Promise.allKeyed позволит получать именованные результаты в объекте – это сделает код более читаемым и упростит работу с несколькими промисамиКубернетес для норм пацанов
Автор взял и развернул себе Kubernetes на виртуалке, но сделал это не абы как, а по красоте — с нормальной сеткой, OSPF, Calico и даже BGP
Всё пошагово: сначала сеть поднял, потом мастер и воркеры прикрутил, и в итоге три ноды бодро стали в строй. Получилась инструкция «для своих» — без лишних слов, но с кучей полезных деталей.
Автор взял и развернул себе Kubernetes на виртуалке, но сделал это не абы как, а по красоте — с нормальной сеткой, OSPF, Calico и даже BGP
Всё пошагово: сначала сеть поднял, потом мастер и воркеры прикрутил, и в итоге три ноды бодро стали в строй. Получилась инструкция «для своих» — без лишних слов, но с кучей полезных деталей.
This media is not supported in your browser
VIEW IN TELEGRAM
Этот универсальный SEO-скилл для Claude Code включает 25 специализированных скиллов и 18 ИИ-агентов, которые охватывают:
→ техническое SEO
→ E-E-A-T
→ Schema-разметку
→ GEO — оптимизацию под ИИ-поиск
→ обратные ссылки
→ локальное SEO
→ оптимизацию изображений
→ и многое другое...
Если вы используете Claude Code для разработки или поддержки сайтов, это точно стоит попробовать✌️
→ техническое SEO
→ E-E-A-T
→ Schema-разметку
→ GEO — оптимизацию под ИИ-поиск
→ обратные ссылки
→ локальное SEO
→ оптимизацию изображений
→ и многое другое...
Если вы используете Claude Code для разработки или поддержки сайтов, это точно стоит попробовать
Please open Telegram to view this post
VIEW IN TELEGRAM
MDN запустила собственный MCP-сервер
Теперь AI-агенты для программирования могут напрямую обращаться к актуальной документации MDN и данным о совместимости браузеров. Благодаря этому они генерируют более точные и актуальные ответы по веб-разработке.
→ официальный MCP-сервер от MDN
→ доступ к самой свежей веб-документации
→ работает с Claude Code, Cursor, VS Code и другими инструментами
Отличное решение для веб-разработчиков и вайб-кодеров, которые активно используют ИИ при написании кода и хотят, чтобы модели опирались на актуальную документацию, современные практики, рекомендации и свежие данные о совместимости браузеров. :)
http://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server
Теперь AI-агенты для программирования могут напрямую обращаться к актуальной документации MDN и данным о совместимости браузеров. Благодаря этому они генерируют более точные и актуальные ответы по веб-разработке.
→ официальный MCP-сервер от MDN
→ доступ к самой свежей веб-документации
→ работает с Claude Code, Cursor, VS Code и другими инструментами
Отличное решение для веб-разработчиков и вайб-кодеров, которые активно используют ИИ при написании кода и хотят, чтобы модели опирались на актуальную документацию, современные практики, рекомендации и свежие данные о совместимости браузеров. :)
http://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server
А ты знал про заголовок Clear-Site-Data? 👀
Один HTTP-заголовок, который позволяет очистить cookies, хранилище или кэш для твоего сайта. Идеально подходит для реализации logout-флоу
Подробнее:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data
Один HTTP-заголовок, который позволяет очистить cookies, хранилище или кэш для твоего сайта. Идеально подходит для реализации logout-флоу
Подробнее:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data
Please open Telegram to view this post
VIEW IN TELEGRAM
Мне этот Chrome DevTools теперь абсолютно понятен
Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирования, тестирования и анализа веб-приложений. С его помощью можно глубоко изучать DOM, стили, JavaScript, сетевые запросы, оптимизировать производительность и управлять данными пользователя.
Хорошая статья. Читайте тут✌️
Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирования, тестирования и анализа веб-приложений. С его помощью можно глубоко изучать DOM, стили, JavaScript, сетевые запросы, оптимизировать производительность и управлять данными пользователя.
Хорошая статья. Читайте тут
Please open Telegram to view this post
VIEW IN TELEGRAM
Нашёл платформу для абсолютных начинающих в веб-разработке
В сети появилось пространство, где новичков учат программировать не через термины, а через метафоры
CodeAnalogies превращает абстрактные концепции веб-разработки в понятные жизненные ситуации, благодаря чему обучение становится не только проще, но и заметно увлекательнее📖
В сети появилось пространство, где новичков учат программировать не через термины, а через метафоры
CodeAnalogies превращает абстрактные концепции веб-разработки в понятные жизненные ситуации, благодаря чему обучение становится не только проще, но и заметно увлекательнее
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Вот полезный совет по TypeScript:
Используйте шаблонные строковые литералы, чтобы убедиться, что ваши заголовки Authorization правильно отформатированы
Используйте шаблонные строковые литералы, чтобы убедиться, что ваши заголовки Authorization правильно отформатированы
Бесплатная онлайн-книга «Красноречивый JavaScript»
Книга для формирования прочной базы знаний по программированию на JavaScript. Она охватывает весь путь от базовых конструкций языка до более сложных тем, таких как замыкания, асинхронность и взаимодействие с браузером📚
Книга для формирования прочной базы знаний по программированию на JavaScript. Она охватывает весь путь от базовых конструкций языка до более сложных тем, таких как замыкания, асинхронность и взаимодействие с браузером
Please open Telegram to view this post
VIEW IN TELEGRAM
Полный курс по веб-разработке от Google: «Webdev Learn»
Наткнулся на мощный ресурс команды Chrome - всё про HTML, CSS, JS, UX, скорость и доступность. Отличный старт и для джунов, и для тех, кто хочет освежить знания.
Наткнулся на мощный ресурс команды Chrome - всё про HTML, CSS, JS, UX, скорость и доступность. Отличный старт и для джунов, и для тех, кто хочет освежить знания.