Frontend разработчик
11.7K subscribers
1.75K photos
489 videos
44 files
2.7K links
Полезные материалы для фронтендера по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS.

По всем вопросам @evgenycarter

РКН clck.ru/3KoFrk
加入频道
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем меню профиля с использованием HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/dropdown-menu-09

👉 @frontend_1
👍5
Какие возможности и преимущества предлагают Node.js и Deno? Хотите узнать, какая из этих сред лучше подходит для ваших проектов? 👀

Всего за пару часов вы научитесь уверенно использовать Node.js и Deno для создания эффективных и современных приложений. Вы узнаете, какие паттерны и инструменты применять в зависимости от задач.

Присоединяйтесь к открытому вебинару 2 сентября в 20:00 мск.

Урок предназначен для разработчиков, которые хотят использовать среды Node.js и Deno в своей работе.

Встречаемся в преддверии старта курса «JavaScript Developer. Professional». Все участники вебинара получат специальную цену на обучение! Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/czQMYo
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
VS Code (Copilot) против Cursor (Claude-3.5-Sonnet) для Next.js App Router

👉 @frontend_1
👍32😁2🔥1
Сборка мусора в JavaScript

Каждый из нас, хотя бы раз, слышал о сборке мусора. Мы знаем, что где-то там работает сборщик мусора, убирая за нами ненужные объекты. Но сколько из нас знают, как он устроен под капотом?

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

Поехали убираться!

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

👉 @frontend_1
👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡

Легко реализуйте закрепленный заголовок таблицы 🤩

https://www.codewithshripal.com/playground/css/sticky-table-headers

👉 @frontend_1
👍7👌2
Магия CSS на практике: советы по вёрстке от гика

Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.


Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.


Сегодня я расскажу:
🔵как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
🔵про свойство inset, сокращающее код на целых три строки;
🔵мой сниппет для расширения интерактивной области у кнопок и ссылок;
стиль написания медиа-запросов, позволяющий сократить количество правил;
🔵альтернативный способ центрирования элемента без свойства transform.

https://habr.com/ru/companies/ruvds/articles/822461/

👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4👏31😁1👌1
Магия CSS на практике: советы по вёрстке от гика. Часть 2
Часть 1

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

Сегодня я расскажу:
🔵какие правила у меня есть при именовании CSS-переменных для дизайн-систем;
🔵на какие логические свойства вам стоит обратить внимание;
🔵зачем нужно делать прозрачные рамки;
🔵как я делаю зависимость значения одного свойства от других более явным;
🔵про пользу «внутренних» переменных.
Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/829174/

👉 @frontend_1
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Использование CSS Grid и grid-template-areas для создания отзывчивого двухколоночного макета 🧑‍💻🚀

👉 @frontend_1
👍62
This media is not supported in your browser
VIEW IN TELEGRAM
Встроенный ИИ (AI) в Chrome (dev channel)

👉 @frontend_1
👍4🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Создааем адаптивный макет панели управления с помощью HTML и CSS 🚀

👉 @frontend_1
👍7
Сложность алгоритмов. Разбор Big O

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

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

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

👉 @frontend_1
👍3🔥2
Подборка Telegram каналов для программистов

Системное администрирование 📌

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

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

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

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

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

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

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

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

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

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

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

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

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

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

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

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

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

Английский 📌
https://yangx.top/UchuEnglish Английский с нуля

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

Excel лайфхак📌
https://yangx.top/Excel_lifehack

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

Вакансии 📌
https://yangx.top/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT
This media is not supported in your browser
VIEW IN TELEGRAM
Полное визуальное руководство по пониманию цикла событий Node.js

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

Если вы похожи на меня, то вы провели бесчисленное количество часов, читая документацию и просматривая видео, пытаясь понять цикл событий. Но даже опытному разработчику бывает трудно получить полное представление о том, как все это работает. Именно поэтому я подготовил это наглядное руководство, которое поможет вам полностью понять цикл событий Node.js. Усаживайтесь поудобнее, возьмите чашку кофе, и давайте погрузимся в мир цикла событий Node.js.

https://www.builder.io/blog/visual-guide-to-nodejs-event-loop#asynchronous-programming-in-java-script

👉 @frontend_1
👍52
This media is not supported in your browser
VIEW IN TELEGRAM
Route Handlers vs Server Actions для получения данных

👉 @frontend_1
👍2
<snow-fall> Web Component

«snow-fall» — это веб-компонент на JavaScript без зависимостей, который позволяет добавить снег на ваш веб-сайт (или на элемент вашего веб-сайта). Это веб-компонентная реализация Codepen от пользователя alphardex.

Использование


<script type="module" src="snow-fall.js"></script>

<!-- Add snow to the page -->
<snow-fall></snow-fall>

<!-- Add snow to the first child element -->
<snow-fall>
<div style="width: 300px; height: 300px">
</snow-fall>


Demo https://zachleat.github.io/snow-fall/demo.html

GitHub https://github.com/zachleat/snow-fall

https://www.zachleat.com/web/snow-fall/

👉 @frontend_1
👍9
Это быстрое решение для случаев, когда вы рефакторите кодовую базу для использования App Router и хотите быстро добавить метаданные к существующим страницам с интерактивностью.

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

👉 @frontend_1
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Как использовать метаданные Next.js, если страница является клиентским компонентом

👉 @frontend_1
👍3