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
加入频道
Совет по Javascript 💡

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

👉 @frontend_1
👍7
Совет по CSS 💡

Создайте креативный текст с помощью всего 3 строк CSS-кода

👉 @frontend_1
👍8
React, Visualized

Интерактивное руководство по основным концепциям React

Для того чтобы по-настоящему оценить React, необходимо понять исторический контекст его создания. От jQuery до Backbone и AngularJS - каждая эпоха по-своему вдохновляла React.

https://react.gg/visualized

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

Системное администрирование 📌
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


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

https://yangx.top/rust_lib Полезный контент по программированию на Rust
https://yangx.top/golang_lib Библиотека Go (Golang) разработчика

https://yangx.top/itmozg Программисты, дизайнеры, новости из мира IT.
https://yangx.top/phis_mat Обучающие видео, книги по Физике и Математике

https://yangx.top/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://yangx.top/nodejs_lib Подборки по Node js и все что с ним связано
https://yangx.top/ruby_lib Библиотека Ruby программиста

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/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT

Чат программистов📌
https://yangx.top/developers_ru

Библиотеки 📌
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 Полезные советы по программированию

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 Канал по математике

Excel лайфхак📌
https://yangx.top/Excel_lifehack
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS 💡

Код в одну строку, чтобы сделать iframe отзывчивым 🤩

👉 @frontend_1
👍10🔥2
Отменить нельзя продолжить

Как описать асинхронную цепочку запросов и не сломать всё? Просто? Не думаю!

Я автор менеджера состояния Reatom и сегодня хочу вам рассказать про главную киллер-фичу redux-saga и rxjs и как теперь её можно получить проще, а так же про грядущие изменения в стандарте ECMAScript.

Речь пойдёт об автоматической отмене конкурентных асинхронных цепочек — обязательном свойстве при работе с любым REST API и другими более общими асинхронными последовательными операциями.

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

👉 @frontend_1
👍3
Css em vs rem

👉 @frontend_1
👍7
Media is too big
VIEW IN TELEGRAM
Принцип работы async/await в JavaScript

Если вам доводилось работать с JavaScript, то вы наверняка встречались с синтаксисом async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая тем самым её понимание. Некоторым ветеранам JS известно, что async/await – это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в данной статье.

Rus https://habr.com/ru/companies/ruvds/articles/759772/

Eng https://akashhamirwasia.com/blog/internals-of-async-await-in-javascript/

👉 @frontend_1
👍5🥱2
Совет по Javascript 💡

Легко выбрать последний элемент массива с помощью этого нового метода 🤩

👉 @frontend_1
👍14
Овладейте всем потенциалом анимирования с Vue

Vue позволяет разработчикам писать более гибкий и переиспользуемый код за счёт наличия дополнительных возможностей для организации компонентов. И одной из областей применения этих возможностей являются анимации. В текущей статье мы разберём использование Composition API для создания анимаций в Vue с помощью CSS и JS библиотеки GSAP (GreenSock Animation Platform).

Rus https://habr.com/ru/companies/ruvds/articles/728746/

Eng https://medium.com/@khalidoghli7/unleashing-your-power-with-vue-animation-33a1cd0aa9c7

👉 @frontend_1
👍1
Самый приятный в мире переключатель

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

Мне нравится видеть в Интернете маленькие кусочки игривой интерактивности. Компоненты, которые могут служить функциональным целям, но в то же время являются игрушками, с которыми можно взаимодействовать ради удовольствия.

https://svarden.se/post/the-worlds-most-satisfying-toggle

👉 @frontend_1
🔥8👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по работе с инструментами Chrome Dev Tools 💡

Возможно, вы не знаете об этом приеме, позволяющем легко выбрать 5 последних проверенных элементов в Chrome Dev Tools 🤩.

👉 @frontend_1
👍9
Signals vs. Observables, о чем вся эта шумиха?

В последнее время много говорится о сигналах внутри фреймворков. Но естественно задать вопрос, чем сигналы отличаются от observables. Это хороший вопрос и цель данной статьи, так что читайте дальше!

https://www.builder.io/blog/signals-vs-observables

👉 @frontend_1
👍7
Ranger: JS Range Syntax для всего, что угодно

В продолжение своего небольшого эксперимента с базовым синтаксисом диапазона чисел в JS я решил (как и в случае с Metho и Turboprop) обобщить эту идею и сделать из нее библиотеку, которая может оказаться полезной (или хотя бы интересной) другим...
Ranger - это небольшая JS-библиотека, позволяющая использовать синтаксис, подобный диапазону, с любым объектом. Все, что вам нужно сделать, это определить функцию, которая строит требуемый "диапазон", задавая начальный и конечный объекты (+ дополнительные параметры по желанию).
https://dev.to/jonrandy/ranger-js-range-syntax-for-anything-4djc

👉 @frontend_1
👍2👎2
Совет по CSS 💡

Простое создание текста с градиентной обводкой в CSS 🤩

👉 @frontend_1
👍5
Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений.

На профессии «Фронтенд-разработчик» вы за 10 месяцев:

✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
 ✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.

Оцените формат и решите, стоит ли продолжать! Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!
👎6
Совет по производительности веб-сайтов 💡

Улучшите время загрузки страницы, реализовав "ленивую" загрузку для сторонних вложений 🚀.

👉 @frontend_1
👍9
Forwarded from React
Как оптимизировать производительность приложения React

1. Использование средств повышения производительности браузера
2. Использование React.Suspense и React.Lazy для компонентов с lazy loading
3. Мемоизация компонентов React с помощью Memo
4. Tree-shaking
5. Оптимизация изображений

https://dev.to/devland/how-to-optimize-your-react-apps-performance-1045

✍️ @React_lib
👍2
Как преобразовать компоненты Figma в Next.js с помощью Tailwind CSS

В эпоху быстрой разработки стандарты дизайна могут представлять серьезную проблему для разработчиков. В этой статье мы рассмотрим, существует ли простой автоматический способ преобразования дизайна Figma в код Next.js. Затем мы рассмотрим быстрый метод преобразования Figma в Next.js с помощью Tailwind CSS. Давайте приступим!

https://blog.logrocket.com/convert-figma-components-next-js-tailwind-css/

👉 @frontend_1
👍3🔥1