Frontend разработчик 3935

Frontend разработчик

📌 Как работать с 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

3.0K views09:22

Frontend разработчик

8:42

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

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

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

👉 @frontend_1

3.3K views10:00

Frontend разработчик

0:38

This media is not supported in your browser

VIEW IN TELEGRAM

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

👉 @frontend_1

2.8K views12:14

Frontend разработчик

CSS Совет 💡

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

👉 @frontend_1

2.6K viewsedited 06:31

Frontend разработчик

0:21

This media is not supported in your browser

VIEW IN TELEGRAM

Card :hover spotlight effect with background-attachment 🤙

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

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

👉 @frontend_1

2.1K views08:20

Frontend разработчик

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Excel лайфхак📌
https://www.tg-me.com/Excel_lifehack

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

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

Bash Советы

🚀 Секреты и советы по Bash

🔹 Полезные трюки, хитрые однострочники и лайфхаки для работы в терминале.
🔹 Автоматизация, скрипты и оптимизация работы в Linux.
🔹 Стать мастером Bash легко – просто подпишись!

💻 Прокачивай терминал вместе с нами! 👇

2.0K views15:32

Frontend разработчик

0:14

This media is not supported in your browser

VIEW IN TELEGRAM

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

👉 @frontend_1

2.0K views12:23

Frontend разработчик

0:02

This media is not supported in your browser

VIEW IN TELEGRAM

📌Как работает 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

1.7K views07:10

Frontend разработчик

⚡️Освойте 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

1.6K views07:55

Frontend разработчик

0:16

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

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

👉 @frontend_1

1.8K views10:04

Frontend разработчик

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

👉 @frontend_1

1.6K views11:01

Frontend разработчик

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

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

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

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

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

1.9K views12:05

Frontend разработчик

Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

👉 @frontend_1

1.8K views14:03

Frontend разработчик

Как использовать зависящие от языка кавычки в CSS

HTML имеет встроенную поддержку автоматических кавычек, которые зависят от языка.

Вот пример:


<q lang="en">Hello</q>
<q lang="de">Hallo</q>
<q lang="fr">Bonjour</q>

Визуально результат будет таким:


"Hello"
„Hallo“
«Bonjour»

И это работает и в CSS!

Если вы используете селектор ::before и хотите добавить кавычки вручную, вы можете использовать значение open-quote для свойства content.


q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

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

https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/

👉 @frontend_1

1.8K views06:54

Frontend разработчик

🧑🏻‍💻Хотите писать фронтенд быстрее, понятнее и без боли? Vue.js решает эту задачу. Фреймворк, который избавляет от лишнего кода и делает разработку удобной.

На открытом вебинаре 27 марта в 20:00 мск вы увидите разницу между обычным JS и Vue.js. Разберетесь, как директивы упрощают работу с DOM и делают код лаконичнее.

Vue.js уже используют крупнейшие компании, и спрос на разработчиков растет. Освойте фреймворк, который упростит вашу работу и ускорит рост в профессии.

⚡️Регистрируйтесь на вебинар и получите скидку на большое обучение «Vue.js-разработчик»: https://vk.cc/cK8iBy

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

1.9K views08:03

Frontend разработчик

Совет по HTML 💡

Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

👉 @frontend_1

1.7K views07:23

Полный гайд по CSS Flexbox с примерами из практики

Это первая статья по HTML&CSS из серии. И начать я решил именно с Flexbox. В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе.

Если вам больше нравится воспринимать информацию в видео-формате, то можете посмотреть ролик.

https://habr.com/ru/articles/816349/

👉 @frontend_1

1.8K views08:25

Frontend разработчик

Navio — это компания, которая создаёт технологию автономного вождения. Присоединяйтесь к нашей амбициозной команде!

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

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

Смотрите вакансии и отправляйте отклики!

1.6K views09:02

Frontend разработчик

0:08

This media is not supported in your browser

VIEW IN TELEGRAM

Совет по CSS 💡

Узнай, как легко можно использовать видео в качестве фона.

👉 @frontend_1

1.7K views05:30

Frontend разработчик

0:13

This media is not supported in your browser

VIEW IN TELEGRAM

Совет по CSS 💡

Две строчки кода, чтобы изменить размер любого блочного элемента с помощью CSS.

👉 @frontend_1

1.8K views07:02

2025/07/05 03:48:47
Back to Top

HTML Embed Code:

<iframe width="100%" src="https://www.bootg.com/buyppe/web?embed=1" title="Telegram Web" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>