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
加入频道
Подборка 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
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Parallel Routes в Next.js 13: наглядный пример для фронтенд-разработчика.

👉 @frontend_1
👍4🎉1
Внутреннее представление и оптимизации строк в JavaScript-движке V8: «отмываем» строки, «обгоняем» C++

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

В этой статье я хочу рассмотреть, как могут быть представлены строки в движке V8. Попытаюсь продемонстрировать их эффект, обогнав C++ в очень честном бенчмарке. А также покажу, в каких случаях они могут, наоборот, привести к проблемам с производительностью, и что в таких случаях можно сделать.

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

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

👉 @frontend_1
👍12🔥31
Forwarded from React
Понимание компонентов React Server

Изучите основы React Server Components, чтобы лучше понять, зачем (и когда) их внедрять.

https://vercel.com/blog/understanding-react-server-components

✍️ @React_lib
👍2
Cовет💡

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

👉 @frontend_1
👍21🔥31
This media is not supported in your browser
VIEW IN TELEGRAM
Craft.js

🚀 React Framework для создания расширяемых редакторов с возможностью drag and drop страниц

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

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

Craft.js решает эту проблему за счет модульного подхода к строительным блокам редактора страниц. Он поставляется с системой drag-n-drop и управляет тем, как пользовательские компоненты должны быть отображены, обновлены и перемещены - среди прочего. Благодаря этому вы сможете создать свой собственный редактор страниц именно так, как вы хотите, чтобы он выглядел и вел себя.

https://github.com/prevwong/craft.js

👉 @Githublib
👍5🔥3
Schema

Библиотеке для определения и использования схем для проверки и преобразования данных в TypeScript.

https://github.com/Effect-TS/schema

👉 @frontend_1
👍3🥰2🎉1
Croner

Запускайте функции или обрабатывайте выражения cron на JavaScript или TypeScript. Никаких зависимостей. Большинство функций. Node. Deno. Bun. Браузер.

// Basic: Run a function at the interval defined by a cron expression
const job = Cron('*/5 * * * * *', () => {
console.log('This will run every fifth second');
});

// Enumeration: What dates do the next 100 sundays occur on?
const nextSundays = Cron('0 0 0 * * 7').nextRuns(100);
console.log(nextSundays);

// Days left to a specific date
const msLeft = Cron('59 59 23 24 DEC *').nextRun() - new Date();
console.log(Math.floor(msLeft/1000/3600/24) + " days left to next christmas eve");

// Run a function at a specific date/time using a non-local timezone (time is ISO 8601 local time)
// This will run 2024-01-23 00:00:00 according to the time in Asia/Kolkata
Cron('2024-01-23T00:00:00', { timezone: 'Asia/Kolkata' }, () => { console.log('Yay!') });


https://github.com/hexagon/croner

👉 @frontend_1
👍3
SVG в вебе. Практическое руководство.

Мы живём в век пикселей. Как дизайнеры и разработчики в вебе, пиксели могут быть нам как друзьями, так и врагами. Мы хотим, чтобы всё выглядело красиво и чётко для всех, кто пользуется нашими сайтами, и нам необходимо уменьшать размеры файлов для улучшения производительности. В общем-то, есть только один способ для иконок, логотипов и иллюстраций — это SVG. Масштабируемая векторная графика (Scalable Vector Graphics) позволяет изображению выглядеть чётко на мониторе с любым разрешением, при этом иметь очень маленький размер файла и легко поддаваться редактированию и изменениям.

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

https://svgontheweb.com/ru/#preparation

👉 @frontend_1
👍9
This media is not supported in your browser
VIEW IN TELEGRAM
Знаете ли вы, что в CSS можно определить поворот с помощью блока `turn`? 🤩

👉 @frontend_1
🔥23👍10
Разбираем HTTP/2 по байтам

Откройте любую статью с обзором HTTP/1.1. Скорее всего, там найдётся хотя бы один пример запроса и ответа, допустим, такие:


GET / HTTP/1.1
Host: localhost


HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Content-Length: 38
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<h1>Привет!</h1>

https://habr.com/ru/companies/timeweb/articles/751338/

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

Для большей безопасности и конфиденциальности пользователей всегда устанавливайте rel="noreferrer" для всех внешних ссылок на важных страницах .

👉 @frontend_1
👍10🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools 💡

Иногда бывает сложно разработать/отладить стили для различных состояний элемента, таких как hover, focus, active и т. д.
Узнайте, как можно принудительно перевести элемент в такие состояния, чтобы легко разрабатывать/отлаживать стили для этих состояний 👆

👉 @frontend_1
👍8🥰2🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
Создание отзывчивого макета с помощью областей CSS grid 👨‍💻🚀

👉 @frontend_1
👍10🔥4👎3🎉1
Подборка 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
1💩1👾1
Совет по использованию инструментов Chrome Dev Tools 💡

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

👉 @frontend_1
👍8🥰1
TypeScript: infer и conditional types. Продвинутый TS на примерах

Продолжаем погружаться в продвинутый TypeScript. В этой статье рассмотрим conditional types, посмотрим на реализацию с примерами, узнаем какую роль играют ключевые слова extends и infer.

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

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

👉 @frontend_1
👍7👎1
Slice vs. Splice в JavaScript

👉 @frontend_1
👍8🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Узнайте о селекторах CSS nth-child из этого урока 🚀

👉 @frontend_1
👍10🔥3