Шпаргалка по выравниванию в CSS Grid 👨‍💻

👉 @frontend_1

Совет по Javascript 💡

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

👉 @frontend_1

7 способов скрыть элемент с помощью CSS 🎨💻

Разбираем 7 различных методов скрытия элементов в CSS и их особенности! 🔥

1️⃣ Использование display

.hide {
  display: none;
}

❌ Не видно скринридерам
❌ Не занимает место
❌ Не принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется

📌 Использование: Полное скрытие элементов, например, скрытие полей в зависимости от выбранного метода оплаты.



2️⃣ Использование visibility

.hide {
  visibility: hidden;
}

✅ Видимо скринридерам
✅ Занимает место
❌ Не принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется

📌 Использование: Для скрытия сообщений об ошибках под формами.



3️⃣ Использование opacity

.hide {
  opacity: 0;
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
✅ Принимает события мыши
✅ Анимируется

📌 Использование: Например, для скрытия ссылок, которые появляются при наведении.



4️⃣ Использование scale

.hide {
  transform: scale(0);
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется

📌 Использование: Для скрытия элементов в анимации увеличения.



5️⃣ Использование translate

.hide {
  transform: translateX(-9999px);
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется

📌 Использование: Например, для бокового меню на мобильных сайтах в сочетании с position: absolute.



6️⃣ Использование clip-path

.hide {
  clip-path: circle(0);
}

✅ Видимо скринридерам
✅ Занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
✅ Анимируется

📌 Использование: Можно скрывать элементы полностью, но они остаются доступными для скринридеров.



7️⃣ Использование position absolute

.hide {
  position: absolute;
  left: -9999px;
}

✅ Видимо скринридерам
❌ Не занимает место
✅ Принимает клавиатурные события
❌ Не принимает события мыши
❌ Не анимируется

📌 Использование: Полезно для навигации скринридеров (например, ссылка «Пропустить к содержимому»).



🔥 Бонус: скрытие элемента визуально, но доступность для скринридеров!
Используем CSS-хак, чтобы элемент был скрыт, но оставался доступным:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: circle(0);
  clip: rect(0 0 0 0); /* для IE */
}

📌 Использование: Например, для скрытия <h1>, если логотип используется в качестве заголовка.

💡 Подписывайтесь, чтобы получать больше полезных лайфхаков по CSS и фронтенду! 🚀✨

👉 @frontend_1

💡 Простой кейс создания закругленных углов в CSS

👉 @frontend_1

Подборка Telegram каналов для программистов

https://www.tgoop.com/lifeproger Жизнь программиста. Авторский канал.
https://www.tgoop.com/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://www.tgoop.com/rabota1C_rus 1С Работа

Системное администрирование 📌
https://www.tgoop.com/sysadmin_girl Девочка Сисадмин
https://www.tgoop.com/srv_admin_linux Админские угодья
https://www.tgoop.com/linux_srv Типичный Сисадмин

https://www.tgoop.com/linux_odmin Linux: Системный администратор
https://www.tgoop.com/devops_star DevOps Star (Звезда Девопса)
https://www.tgoop.com/i_linux Системный администратор
https://www.tgoop.com/linuxchmod Linux
https://www.tgoop.com/sys_adminos Системный Администратор
https://www.tgoop.com/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://www.tgoop.com/sysadminof Книги для админов, полезные материалы
https://www.tgoop.com/i_odmin Все для системного администратора
https://www.tgoop.com/i_odmin_book Библиотека Системного Администратора
https://www.tgoop.com/i_odmin_chat Чат системных администраторов
https://www.tgoop.com/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://www.tgoop.com/sysadminoff Новости Линукс Linux

1C разработка 📌
https://www.tgoop.com/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://www.tgoop.com/cpp_lib Библиотека C/C++ разработчика
https://www.tgoop.com/cpp_knigi Книги для программистов C/C++
https://www.tgoop.com/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://www.tgoop.com/pythonofff Python академия. Учи Python быстро и легко🐍
https://www.tgoop.com/BookPython Библиотека Python разработчика
https://www.tgoop.com/python_real Python подборки на русском и английском
https://www.tgoop.com/python_360 Книги по Python Rus

Java разработка 📌
https://www.tgoop.com/BookJava Библиотека Java разработчика
https://www.tgoop.com/java_360 Книги по Java Rus
https://www.tgoop.com/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://www.tgoop.com/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://www.tgoop.com/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://www.tgoop.com/developer_mobila Мобильная разработка
https://www.tgoop.com/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://www.tgoop.com/frontend_1 Подборки для frontend разработчиков
https://www.tgoop.com/frontend_sovet Frontend советы, примеры и практика!
https://www.tgoop.com/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://www.tgoop.com/game_devv Все о разработке игр

Библиотеки 📌
https://www.tgoop.com/book_for_dev Книги для программистов Rus
https://www.tgoop.com/programmist_of Книги по программированию
https://www.tgoop.com/proglb Библиотека программиста
https://www.tgoop.com/bfbook Книги для программистов
https://www.tgoop.com/books_reserv Книги для программистов

БигДата, машинное обучение 📌
https://www.tgoop.com/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://www.tgoop.com/bookflow Лекции, видеоуроки, доклады с IT конференций
https://www.tgoop.com/coddy_academy Полезные советы по программированию
https://www.tgoop.com/rust_lib Полезный контент по программированию на Rust
https://www.tgoop.com/golang_lib Библиотека Go (Golang) разработчика
https://www.tgoop.com/itmozg Программисты, дизайнеры, новости из мира IT
https://www.tgoop.com/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://www.tgoop.com/nodejs_lib Подборки по Node js и все что с ним связано
https://www.tgoop.com/ruby_lib Библиотека Ruby программиста

QA, тестирование 📌
https://www.tgoop.com/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://www.tgoop.com/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://www.tgoop.com/thehaking Канал о кибербезопасности
https://www.tgoop.com/xakep_1 Статьи из "Хакера"

Книги, статьи для дизайнеров 📌
https://www.tgoop.com/ux_web Статьи, книги для дизайнеров

Английский 📌
https://www.tgoop.com/UchuEnglish Английский с нуля

Математика 📌
https://www.tgoop.com/Pomatematike Канал по математике
https://www.tgoop.com/phis_mat Обучающие видео, книги по Физике и Математике

Excel лайфхак📌
https://www.tgoop.com/Excel_lifehack

https://www.tgoop.com/tikon_1 Новости высоких технологий, науки и техники💡
https://www.tgoop.com/mir_teh Мир технологий (Technology World)

Вакансии 📌
https://www.tgoop.com/sysadmin_rabota Системный Администратор
https://www.tgoop.com/progjob Вакансии в IT

🚀 Оптимизация JavaScript: ускоряем код и улучшаем производительность

Хотите писать более быстрый и эффективный JavaScript-код? В этой статье рассматриваются ключевые методы оптимизации, которые помогут вам повысить производительность ваших приложений.

🔹 Избегайте лишних вычислений – кэшируйте результаты и используйте мемоизацию.
🔹 Эффективно работайте с DOM – минимизируйте количество обращений к нему.
🔹 Асинхронность и ленивые вычисления – загружайте данные только тогда, когда они действительно нужны.
🔹 Используйте современные API – например, requestAnimationFrame вместо setTimeout.
🔹 Минимизируйте и сжимайте код – инструменты вроде Terser помогут уменьшить размер скриптов.

https://romgrk.com/posts/optimizing-javascript

👉 @frontend_1

Сохрани эти 4 CSS-анимации для своего следующего проекта 👨‍💻

👉 @frontend_1

📌 Как работать с em и rem в CSS?

Данный пост о двух важных единицах измерения в CSS — em и rem. Часто новички путаются в их использовании, а ведь это мощные инструменты для адаптивного дизайна!

🔹 em — зависит от родительского элемента
em — это относительная единица, которая зависит от размера шрифта родителя. Например:

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

Здесь 1.5em означает 1.5 * 20px = 30px.

⚠️ Будьте осторожны! Использование em для вложенных элементов может привести к неожиданному увеличению шрифта.

🔹 rem — зависит от корневого элемента
В отличие от em, rem (root em) всегда рассчитывается относительно font-size у <html>. Например:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem; /* 24px */
}

Здесь 1.5rem означает 1.5 * 16px = 24px, независимо от родителя!

🧐 Что выбрать?
✔ rem — удобен для глобального масштабирования (например, для всей страницы).
✔ em — полезен для элементов внутри компонентов (например, padding, margin).

А вы чаще используете em или rem? Напишите в комментариях!

👉 @frontend_1

JavaScript наглядно: выполнение промисов

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

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

https://www.lydiahallie.com/blog/promise-execution

👉 @frontend_1

Синхронизация React с API браузера

👉 @frontend_1

CSS Совет 💡

Возможно, ты не знал об этом более удобном и понятном синтаксисе для диапазонов в медиазапросах 🤩

👉 @frontend_1

Card :hover spotlight effect with background-attachment 🤙

Используем background-attachment, чтобы прикрепить фон к области просмотра

https://codepen.io/jh3y/pen/RwqZNKa

👉 @frontend_1

Подборка Telegram каналов для программистов

https://www.tgoop.com/bash_srv Bash Советы
https://www.tgoop.com/win_sysadmin Системный Администратор Windows
https://www.tgoop.com/lifeproger Жизнь программиста. Авторский канал.
https://www.tgoop.com/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://www.tgoop.com/rabota1C_rus Вакансии для программистов 1С

Системное администрирование 📌
https://www.tgoop.com/sysadmin_girl Девочка Сисадмин
https://www.tgoop.com/srv_admin_linux Админские угодья
https://www.tgoop.com/linux_srv Типичный Сисадмин

https://www.tgoop.com/linux_odmin Linux: Системный администратор
https://www.tgoop.com/devops_star DevOps Star (Звезда Девопса)
https://www.tgoop.com/i_linux Системный администратор
https://www.tgoop.com/linuxchmod Linux
https://www.tgoop.com/sys_adminos Системный Администратор
https://www.tgoop.com/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://www.tgoop.com/sysadminof Книги для админов, полезные материалы
https://www.tgoop.com/i_odmin Все для системного администратора
https://www.tgoop.com/i_odmin_book Библиотека Системного Администратора
https://www.tgoop.com/i_odmin_chat Чат системных администраторов
https://www.tgoop.com/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://www.tgoop.com/sysadminoff Новости Линукс Linux

1C разработка 📌
https://www.tgoop.com/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://www.tgoop.com/DevLab1C 1С:Предприятие 8

Программирование C++📌
https://www.tgoop.com/cpp_lib Библиотека C/C++ разработчика
https://www.tgoop.com/cpp_knigi Книги для программистов C/C++
https://www.tgoop.com/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://www.tgoop.com/pythonofff Python академия. Учи Python быстро и легко🐍
https://www.tgoop.com/BookPython Библиотека Python разработчика
https://www.tgoop.com/python_real Python подборки на русском и английском
https://www.tgoop.com/python_360 Книги по Python Rus

Java разработка 📌
https://www.tgoop.com/BookJava Библиотека Java разработчика
https://www.tgoop.com/java_360 Книги по Java Rus
https://www.tgoop.com/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://www.tgoop.com/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://www.tgoop.com/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://www.tgoop.com/developer_mobila Мобильная разработка
https://www.tgoop.com/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://www.tgoop.com/frontend_1 Подборки для frontend разработчиков
https://www.tgoop.com/frontend_sovet Frontend советы, примеры и практика!
https://www.tgoop.com/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://www.tgoop.com/game_devv Все о разработке игр

Библиотеки 📌
https://www.tgoop.com/book_for_dev Книги для программистов Rus
https://www.tgoop.com/programmist_of Книги по программированию
https://www.tgoop.com/proglb Библиотека программиста
https://www.tgoop.com/bfbook Книги для программистов
https://www.tgoop.com/books_reserv Книги для программистов

БигДата, машинное обучение 📌
https://www.tgoop.com/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://www.tgoop.com/bookflow Лекции, видеоуроки, доклады с IT конференций
https://www.tgoop.com/coddy_academy Полезные советы по программированию
https://www.tgoop.com/rust_lib Полезный контент по программированию на Rust
https://www.tgoop.com/golang_lib Библиотека Go (Golang) разработчика
https://www.tgoop.com/itmozg Программисты, дизайнеры, новости из мира IT
https://www.tgoop.com/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://www.tgoop.com/nodejs_lib Подборки по Node js и все что с ним связано
https://www.tgoop.com/ruby_lib Библиотека Ruby программиста

QA, тестирование 📌
https://www.tgoop.com/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://www.tgoop.com/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://www.tgoop.com/thehaking Канал о кибербезопасности
https://www.tgoop.com/xakep_2 Хакер Free

Книги, статьи для дизайнеров 📌
https://www.tgoop.com/ux_web Статьи, книги для дизайнеров

Математика 📌
https://www.tgoop.com/Pomatematike Канал по математике
https://www.tgoop.com/phis_mat Обучающие видео, книги по Физике и Математике

Excel лайфхак📌
https://www.tgoop.com/Excel_lifehack

https://www.tgoop.com/tikon_1 Новости высоких технологий, науки и техники💡
https://www.tgoop.com/mir_teh Мир технологий (Technology World)

Вакансии 📌
https://www.tgoop.com/sysadmin_rabota Системный Администратор
https://www.tgoop.com/progjob Вакансии в IT

Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀.

👉 @frontend_1

📌Как работает Javascript: шпаргалка для разработчика


🔹 Интерпретируемый язык
JavaScript выполняется браузером или движком JavaScript, а не компилируется заранее в машинный код. Это делает его высоко портируемым между платформами. Современные движки, такие как V8, используют технологию Just-In-Time (JIT) для компиляции кода непосредственно в исполняемый машинный код.

🔹 Функции — объекты первого класса
В JavaScript функции рассматриваются как объекты первого класса, что означает, что их можно хранить в переменных, передавать в качестве аргументов другим функциям и возвращать из функций.

🔹 Динамическая типизация
JavaScript — это язык с динамической (слабой) типизацией, что означает, что тип переменной можно не объявлять заранее, и он может изменяться во время выполнения программы.

🔹 Клиентская (асинхронная) обработка
JavaScript поддерживает асинхронное программирование, позволяя выполнять операции, такие как чтение файлов, HTTP-запросы или взаимодействие с базами данных, в фоновом режиме. Эти операции запускают коллбэки или промисы по завершении, что особенно полезно для веб-разработки, повышая производительность и удобство использования.

🔹 Прототипное ООП
В отличие от классического объектно-ориентированного программирования, JavaScript использует прототипное наследование. Это означает, что объекты могут наследовать свойства и методы от других объектов, а не от классов.

🔹 Автоматическая сборка мусора
JavaScript автоматически управляет памятью, удаляя объекты, которые больше не используются программой. Это помогает предотвращать утечки памяти и оптимизировать производительность приложения.

🔹 Сравнение с другими языками
JavaScript отличается от таких языков, как Python или Java, своей ключевой ролью в веб-разработке.

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

🔹 Связь с TypeScript
TypeScript является надмножеством JavaScript, добавляя в него новые возможности, в том числе аннотации типов. Это означает, что любой корректный JavaScript-код также будет валидным TypeScript-кодом.

🔹 Популярные фреймворки JavaScript
- React — гибкий, с большим количеством плагинов, созданных сообществом.
- Vue — чистый и интуитивно понятный, с хорошо интегрированными реактивными возможностями.
- Angular — строгий в плане структуры, идеально подходит для корпоративной разработки.

👉 @frontend_1

⚡️Освойте Vue.js и ускорьте разработку в разы!

Vue.js — это быстрый, гибкий и удобный фреймворк для фронтенда. С ним можно быстро создавать сложные веб-приложения, не тратя месяцы на освоение новых концепций. Хотите научиться писать чистый код, разрабатывать SPA и внедрять современные подходы к UI?

На этом обучении вы разберетесь в архитектуре Vue.js, освоите Vue-router, Vuex, Webpack и TypeScript. Научитесь создавать масштабируемые приложения, работать с GraphQL, Firebase и тестировать код с Jest и Cypress.

Vue проще в освоении, чем Angular, и предоставляет более декларативный подход по сравнению с React. Вы научитесь работать с реактивностью, шаблонами и API, которые позволят писать чистый и поддерживаемый код. Этот курс поможет вам выделиться среди других фронтенд-разработчиков.

👉Пройдите вступительное тестирование прямо сейчас и получите скидку на обучение: https://vk.cc/cJUPMO

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Улучшение CSS: синтаксис относительных цветов теперь поддерживается во всех браузерах.

Последним браузером, присоединившимся к списку, стал Firefox, выпустивший на прошлой неделе версию 128.

https://www.stefanjudis.com/notes/new-in-css-relative-colors/

👉 @frontend_1

Знаете ли вы, что можно изменить метод формы в HTML-форме, указав атрибут formMethod на кнопке?

👉 @frontend_1

Как создать чат, который работает в реальном времени? На открытом вебинаре 25 марта в 20:00 мск разберем WebSockets — технологию, которая делает общение мгновенным и позволяет строить интерактивные веб-приложения.

За 1,5 часа напишем с нуля свой минималистичный, но функциональный чат. Разберем код, подключим сервер на Node.js, научимся отправлять и получать сообщения через WebSockets.

Этот урок поможет фронтенд-разработчикам освоить real-time технологии, прокачать навыки работы с WebSockets и интегрировать их в свои проекты. Урок особенно полезен тем, кто хочет перейти на новый уровень в JavaScript.

Регистрируйтесь и получите скидку на большое обучение «JavaScript Developer. Professional»: https://vk.cc/cJUTrc

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576