This media is not supported in your browser
VIEW IN TELEGRAM
Как работает CSS Flexbox: элегантная система макетов с визуальным разбором
Для новичков в вебе стоит сказать, что CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии можно прочитать здесь.
Мы же решили объяснить возможности CSS Flexbox с использованием гифок, чтобы получилась настоящая наглядная flex-шпаргалка. Что получилось, можно увидеть в статье: https://tproger.ru/translations/how-css-flexbox-works
#фронтенд #css #flexbox
Для новичков в вебе стоит сказать, что CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии можно прочитать здесь.
Мы же решили объяснить возможности CSS Flexbox с использованием гифок, чтобы получилась настоящая наглядная flex-шпаргалка. Что получилось, можно увидеть в статье: https://tproger.ru/translations/how-css-flexbox-works
#фронтенд #css #flexbox
🔥9👍4💩2❤1
Forwarded from Метод утёнка
Где жить знаниям: 6 альтернатив Notion для команд
Чем больше знаний накапливается у команды, тем важнее становится наличие удобного инструмента для их хранения. Раньше многие пользовались Notion, но из-за санкций им стало сложнее пользоваться. Да и подходит он не всем. Где-то тормозит, где-то — неудобен для технарей.
В статье мы собрали 6 альтернатив, которые подойдут для разных сценариев и команд:
— если нужна база под Markdown и git;
— если хочется вики с правами и тегами;
— если нужен локальный и безопасный вариант.
#инструменты
Чем больше знаний накапливается у команды, тем важнее становится наличие удобного инструмента для их хранения. Раньше многие пользовались Notion, но из-за санкций им стало сложнее пользоваться. Да и подходит он не всем. Где-то тормозит, где-то — неудобен для технарей.
В статье мы собрали 6 альтернатив, которые подойдут для разных сценариев и команд:
— если нужна база под Markdown и git;
— если хочется вики с правами и тегами;
— если нужен локальный и безопасный вариант.
#инструменты
😁3🔥1
Функциональное программирование от А до Я на примере JavaScript: монады, функторы, каррирование, композиция
Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.
Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4
#javascript #лучшиепрактики
Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.
Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4
#javascript #лучшиепрактики
🤩8❤6👍4👎2💩1🤣1
This media is not supported in your browser
VIEW IN TELEGRAM
MetaExplorer — наглядный просмотр мета-тегов любого сайта
Этот инструмент показывает, как сайт выглядит для соцсетей, мессенджеров и поисковых систем. Работает прямо в браузере в качестве расширения. Просто нажмите на иконку и получите наглядную раскладку всех мета-тегов: title, description, Open Graph, Twitter-карточки, favicons и прочее. Также показывает проблемы: битые ссылки, дубли, проблемы с доступностью и так далее.
Если хотите убедиться, что ваш сайт работает как надо с точки зрения SEO, то стоит попробовать.
#фронтенд #seo #инструменты
Этот инструмент показывает, как сайт выглядит для соцсетей, мессенджеров и поисковых систем. Работает прямо в браузере в качестве расширения. Просто нажмите на иконку и получите наглядную раскладку всех мета-тегов: title, description, Open Graph, Twitter-карточки, favicons и прочее. Также показывает проблемы: битые ссылки, дубли, проблемы с доступностью и так далее.
Если хотите убедиться, что ваш сайт работает как надо с точки зрения SEO, то стоит попробовать.
#фронтенд #seo #инструменты
❤10👍2
Инструменты, которые снимают рутину с команды разработчиков и помогают управлению
Когда команда растёт, задачи разбегаются по десяткам сервисов, а важное ускользает из виду. Чтобы не тратить часы на поиски нужного тикета или документа, нужен единый инструмент для управления, коммуникаций и рутины.
Мы собрали 4 сервиса, которые позволяют сократить время на организационные процессы — без лишней нагрузки и переходов между платформами. Они помогут централизовать работу с задачами, упростить доступ к данным и навести порядок в команде.
Подробнее в подборке.
#инструменты
Когда команда растёт, задачи разбегаются по десяткам сервисов, а важное ускользает из виду. Чтобы не тратить часы на поиски нужного тикета или документа, нужен единый инструмент для управления, коммуникаций и рутины.
Мы собрали 4 сервиса, которые позволяют сократить время на организационные процессы — без лишней нагрузки и переходов между платформами. Они помогут централизовать работу с задачами, упростить доступ к данным и навести порядок в команде.
Подробнее в подборке.
#инструменты
🗿6
Какой российский хостинг выбрать в 2025 году: подборка с примерами и нюансами
Выбор хостинга — такая же непростая задача, как и создание проекта, который будет на нём размещён. При запуске важно учитывать и доступность поддержки, и юридические риски, и стабильность работы под нагрузкой.
В этой подборке мы собрали актуальных российских провайдеров на любой случай: для сайтов на CMS, pet‑проектов, корпоративных порталов, бэкапов и даже VPS с ручной настройкой. У каждого — свои условия, бонусы и ограничения.
#подборка #хостинг
Выбор хостинга — такая же непростая задача, как и создание проекта, который будет на нём размещён. При запуске важно учитывать и доступность поддержки, и юридические риски, и стабильность работы под нагрузкой.
В этой подборке мы собрали актуальных российских провайдеров на любой случай: для сайтов на CMS, pet‑проектов, корпоративных порталов, бэкапов и даже VPS с ручной настройкой. У каждого — свои условия, бонусы и ограничения.
#подборка #хостинг
❤5💩5
5 VPS-хостингов в 2025, которые держат нагрузку
Сегодня любой рабочий или MVP-проект может столкнуться с пиками нагрузки, которые нужно выдержать. Это касается как физических, так и виртуальных серверов. Поэтому важно уметь правильно выбрать подходящий.
В этой статье мы рассказали, на что обращать внимание при выборе, какие сегодня цены и кто сегодня предоставляет самое современное оборудование.
#хостинг #vps
Сегодня любой рабочий или MVP-проект может столкнуться с пиками нагрузки, которые нужно выдержать. Это касается как физических, так и виртуальных серверов. Поэтому важно уметь правильно выбрать подходящий.
В этой статье мы рассказали, на что обращать внимание при выборе, какие сегодня цены и кто сегодня предоставляет самое современное оборудование.
#хостинг #vps
😁5
Создание приложения для macOS с React Native — пошаговое руководство
Хотите научиться создавать продвинутые приложения для macOS?
В курсе по ссылке вы узнаете, как с помощью React Native разработать приложение для поиска и управления книгами, используя Google Books API.
Вы также интегрируете ИИ для создания автоматических аннотаций и освоите навигацию и управление состоянием.
К видеокурса у вас будет полностью функциональное приложение и понимание того, как создавать собственные приложения для macOS.
https://youtu.be/-kizZZrh1zM?si=aObldPOK4RWkjGku
#видео #reactnative
Хотите научиться создавать продвинутые приложения для macOS?
В курсе по ссылке вы узнаете, как с помощью React Native разработать приложение для поиска и управления книгами, используя Google Books API.
Вы также интегрируете ИИ для создания автоматических аннотаций и освоите навигацию и управление состоянием.
К видеокурса у вас будет полностью функциональное приложение и понимание того, как создавать собственные приложения для macOS.
https://youtu.be/-kizZZrh1zM?si=aObldPOK4RWkjGku
#видео #reactnative
YouTube
React Native MacOS App Tutorial – Book Management System
Learn how to use React Native to build a sophisticated MacOS app that allows users to search and explore books using the Google Books API and manage their personal bookshelves. You'll also implement AI-powered summaries and ensure smooth navigation and state…
🤩4❤3
Как React‑Query упрощает архитектуру проектов на React + TypeScript
Все приложения, которые в той или иной мере имеют связь с сервером требуют выполнение стандартного набора действий:
0️⃣ загружать данные;
1️⃣ хранить эти данные;
2️⃣ информировать о том что идет загрузка;
3️⃣ информировать о том что произошла ошибка.
Когда в проекте растет количество запросов, состояний загрузки и повторяющегося кода — контролировать и поддерживать это всё становится сложно. В этой статье вы узнаете, как с помощью React Query выстроить чистую архитектуру: избавиться от проп‑дриллинга, централизовать работу с сервером и сократить бойлерплейт.
#фронтенд #react #react‑query
Все приложения, которые в той или иной мере имеют связь с сервером требуют выполнение стандартного набора действий:
Когда в проекте растет количество запросов, состояний загрузки и повторяющегося кода — контролировать и поддерживать это всё становится сложно. В этой статье вы узнаете, как с помощью React Query выстроить чистую архитектуру: избавиться от проп‑дриллинга, централизовать работу с сервером и сократить бойлерплейт.
#фронтенд #react #react‑query
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩5👎4👍3
Forwarded from Точка входа в программирование
Полный курс Tailwind CSS v4 с нуля
Если вы уже знакомы с HTML и CSS и готовы освоить Tailwind — этот видеокурс идеален. В нём собраны все ключевые темы — от установки и настройки до работы с утилитами, адаптивностью и тёмной темой. Более 20 важных тем, включая Flex, Grid, фильтры и новые возможности версии v4 — всё доступно в формате одного ролика.
#tailwindcss #фронтенд #видео
Если вы уже знакомы с HTML и CSS и готовы освоить Tailwind — этот видеокурс идеален. В нём собраны все ключевые темы — от установки и настройки до работы с утилитами, адаптивностью и тёмной темой. Более 20 важных тем, включая Flex, Grid, фильтры и новые возможности версии v4 — всё доступно в формате одного ролика.
#tailwindcss #фронтенд #видео
YouTube
ПОЛНЫЙ КУРС TAILWIND CSS v4 с нуля!
🔥 Наши интенсивы и мастер-классы — без воды, только практика:
РФ - https://htmllessons.ru/intensives
Мир - https://htmllessons.io/intensives
❤️ Отзывы тут - https://xn--r1a.website/htmllessons_reviews
🦋 Наш ТГ канал - https://xn--r1a.website/redgroup
Поддержи видео лайком, 1500…
РФ - https://htmllessons.ru/intensives
Мир - https://htmllessons.io/intensives
❤️ Отзывы тут - https://xn--r1a.website/htmllessons_reviews
🦋 Наш ТГ канал - https://xn--r1a.website/redgroup
Поддержи видео лайком, 1500…
👎15💩10🔥2
Навыки фронтендера, которые не заменит ИИ
AI автоматизирует всё — от генерации кода до тестов. И многое не без оснований переживают о своём будущем. Кто-то считает, что ИИ заменит людей, а другие препочитают думать, что людей заменяет люди, использующие ИИ. Оба варианта выглядят не слишком привлекательно.
Но отставить панику! В этой статье разбираются навыки, которые по‑прежнему остаются за человеком. Развивая их, вы можете гарантировать себе, что вам ничего не угрожает в ближайшем будущем.
#фронтенд #ии
AI автоматизирует всё — от генерации кода до тестов. И многое не без оснований переживают о своём будущем. Кто-то считает, что ИИ заменит людей, а другие препочитают думать, что людей заменяет люди, использующие ИИ. Оба варианта выглядят не слишком привлекательно.
Но отставить панику! В этой статье разбираются навыки, которые по‑прежнему остаются за человеком. Развивая их, вы можете гарантировать себе, что вам ничего не угрожает в ближайшем будущем.
#фронтенд #ии
❤7👍1
Что новенького есть в CSS в 2025 году
Вы уверены, что используете все возможности CSS? Скорее всего сегодня вы можете делать гораздо больше благодаря современным свойствам и функциям таблицы.
В этой статье автор разобрал актуальные фишки CSS, о которых вы могли не знать.
#css #фронтенд
Вы уверены, что используете все возможности CSS? Скорее всего сегодня вы можете делать гораздо больше благодаря современным свойствам и функциям таблицы.
В этой статье автор разобрал актуальные фишки CSS, о которых вы могли не знать.
#css #фронтенд
👍5🔥2
Пробуем новую рубрику. Будем задавать вам вопросы и давать правильные ответы, чтобы вы могли проверить свои знания
Только чур сначала попробовать ответить самому, а потом лезть в ответ!
Вопрос 1. Что такое Virtual DOM?
Virtual DOM — это виртуальное представление HTML‑структуры в виде обычных JavaScript‑объектов, которые хранятся в оперативной памяти и используются внутри фреймворка или библиотеки (например, React). Вместо того, чтобы сразу вносить изменения в настоящий DOM, фреймворк сначала обновляет Virtual DOM, сравнивает его с предыдущим состоянием и вносит только нужные изменения в реальное дерево элементов.
Такой подход позволяет оптимизировать производительность, потому что операции с реальным DOM ресурсоёмкие, а работа с Virtual DOM — быстрая и дешёвая с точки зрения вычислений.
#вопросответ
Только чур сначала попробовать ответить самому, а потом лезть в ответ!
Вопрос 1. Что такое Virtual DOM?
Такой подход позволяет оптимизировать производительность, потому что операции с реальным DOM ресурсоёмкие, а работа с Virtual DOM — быстрая и дешёвая с точки зрения вычислений.
#вопросответ
🔥32👍9❤1
This media is not supported in your browser
VIEW IN TELEGRAM
KeyUX — удобная визуализация пользовательских нажатий клавиш
Если вы разрабатываете UI, где важно поведение клавиш (например, горячие сочетания или модальные окна), этот инструмент поможет наглядно отображать, что именно нажимает пользователь. KeyUX улучшает пользовательскую навигацию с помощью клавиатуры и показывает визуальные подсказки о вводе прямо в интерфейсе, работает без зависимостей, легко подключается и кастомизируется под нужный стиль.
#фронтенд #библиотека
Если вы разрабатываете UI, где важно поведение клавиш (например, горячие сочетания или модальные окна), этот инструмент поможет наглядно отображать, что именно нажимает пользователь. KeyUX улучшает пользовательскую навигацию с помощью клавиатуры и показывает визуальные подсказки о вводе прямо в интерфейсе, работает без зависимостей, легко подключается и кастомизируется под нужный стиль.
#фронтенд #библиотека
👍9😁2👎1💩1
This media is not supported in your browser
VIEW IN TELEGRAM
Созвоны, видео, аудио-лекции — всё это теперь можно быстро перевести в текст ⚡️
Собрали для вас 9 ИИ-инструментов для транскрибации и сравнили их точность, скорость работы, тарифы.
Будет полезно для:
🔘 разработчиков, чтобы делать саммари из долгих осуждений;
🔘 студентов и преподавателей, чтобы превратить лекции в тексты;
🔘 людей, которые хотят сэкономить время и быстро добраться до сути контента.
https://tprg.ru/b5oU
#ии #карьера
Собрали для вас 9 ИИ-инструментов для транскрибации и сравнили их точность, скорость работы, тарифы.
Будет полезно для:
https://tprg.ru/b5oU
#ии #карьера
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤1
Media is too big
VIEW IN TELEGRAM
Практика JavaScript: делаем целый сайт за 2 часа с нуля
Ловите полезный двухчасовой курс по созданию сайта с JavaScript, где вы:
— напишите с нуля приложение, которое сможете добавить в портфолио;
— научитесь настраивать рабочее окружение;
— поймёте зачем на самом деле нужны классы в JavaScript);
— разберётесь как принципы SOLID помогают писать расширяемый и поддерживаемый код;
— поработаете над оптимизацией приложения;
— задеплоите приложение на хостинг и сделаете многое другое.
Видео взято с YouTube, поэтому если предпочитаете смотреть там, то вот ссылка: youtu.be/0ViiJ8qTCFM
#видео #курс #javascript
Ловите полезный двухчасовой курс по созданию сайта с JavaScript, где вы:
— напишите с нуля приложение, которое сможете добавить в портфолио;
— научитесь настраивать рабочее окружение;
— поймёте зачем на самом деле нужны классы в JavaScript);
— разберётесь как принципы SOLID помогают писать расширяемый и поддерживаемый код;
— поработаете над оптимизацией приложения;
— задеплоите приложение на хостинг и сделаете многое другое.
Видео взято с YouTube, поэтому если предпочитаете смотреть там, то вот ссылка: youtu.be/0ViiJ8qTCFM
#видео #курс #javascript
🔥9👍1
Паттерны современного Node.js
Node.js претерпел впечатляющее преобразование с момента своего появления. Если вы пишете на Node.js уже несколько лет, то, вероятно, сами наблюдали эту эволюцию - от эпохи колбэков и повсеместного использования CommonJS до современного, чистого и стандартизированного подхода к разработке.
Изменения затронули не только внешний вид — это фундаментальный сдвиг в самом подходе к серверной разработке на JavaScript. Давайте разберёмся, в чём заключаются эти изменения и почему они важны для ваших приложений в 2025 году.
Подробности в статье.
#nodejs
Node.js претерпел впечатляющее преобразование с момента своего появления. Если вы пишете на Node.js уже несколько лет, то, вероятно, сами наблюдали эту эволюцию - от эпохи колбэков и повсеместного использования CommonJS до современного, чистого и стандартизированного подхода к разработке.
Изменения затронули не только внешний вид — это фундаментальный сдвиг в самом подходе к серверной разработке на JavaScript. Давайте разберёмся, в чём заключаются эти изменения и почему они важны для ваших приложений в 2025 году.
Подробности в статье.
#nodejs
👍7🔥1
Forwarded from Типичный программист
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по анимациям CSS
Не забывайте про инструмент animation inspector в DevTools — он отлично подходит для отладки анимаций и точного просмотра временных шкал. Можно быстро дебажить, видеть все ключевые кадры и скрупулёзно скрабить по таймлайну.
Если не использовали — самое время попробовать😏
Не забывайте про инструмент animation inspector в DevTools — он отлично подходит для отладки анимаций и точного просмотра временных шкал. Можно быстро дебажить, видеть все ключевые кадры и скрупулёзно скрабить по таймлайну.
Как открыть вкладку Анимации👇 :🔘 Откройте DevTools, нажав F12 или CTRL+SHIFT+I.🔘 В DevTools перейдите в меню (три вертикальные точки в правом верхнем углу) и выберите "Дополнительные инструменты" → "Анимации".🔘 Если вы впервые открываете вкладку, она может быть пустой, пока на странице не будет запущена анимация
Если не использовали — самое время попробовать
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13🔥8👍5