Как работает веб-браузер (с картинками)

Браузеры стали частью нашей повседневной жизни. Но задумывались ли вы когда-нибудь о том, как они на самом деле работают?

Эта статья приоткроет завесу магии, скрывающуюся за кулисами веб-браузеров.

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

👉 @frontend_1

evil-icons

Простой и чистый пакет SVG-иконок с кодом для поддержки Rails, Sprockets, Node.js, Gulp, Grunt и CDN

https://github.com/evil-icons/evil-icons

👉 @Githublib

Переходы между HTML-тегами. Еще одна причина для валидации разметки

Если вы занимаетесь созданием веб-приложений, то, скорее всего, пишете HTML. Это может быть JSX, Markdown или даже Dart в вашем редакторе кода, но в конечном итоге он будет скомпилирован в некую разметку. И чем дальше от реальных тегов, тем меньше представления о том, что туда попадает. Для большинства разработчиков это просто артефакт, как бинарный файл.

https://pepelsbey.dev/articles/jumping-html-tags/


👉 @frontend_1

Хотите стать разработчиком, но не определились с языком программирования?

Ждем вас на бесплатном практическом вебинаре 7 сентября в 19:00 по мск.

✔️ Разбираем профессию “Фронтенд-разработчик” и кому она подходит.
✔️ Пробуем на практике: вместе пишем мини-игру на JS.
✔️ Говорим о первой работе для новичков без опыта.

🎁 Дарим “Карту компетенций”, гайд «Как опубликовать страницу в интернете при помощи GitHub Pages» и «Как заговорить на сленге IT-специалистов», а еще бонусы на обучение профессии!

Трюки при работе с SVG

У SVG очень много трюков в рукаве. Это действительно полнофункциональный API для рисования, буквально созданный для Web, но мало кто из нас по-настоящему понимает его и не обращается к нему достаточно часто. Черт возьми, я даже написал об этом книгу. В то время просто заставить людей использовать SVG для иконок казалось нелегкой задачей, но, к счастью, я думаю, что эта задача уже решена.

Давайте посмотрим на несколько классных примеров SVG, которые попали ко мне на стол в последнее время.

https://blog.codepen.io/2023/08/28/chris-corner-even-more-svg-tricks/


👉 @frontend_1

Совет по CSS 💡

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

👉 @frontend_1

Перехват маршрутов в @ nextjs 13.3

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

https://pingthread.com/thread/1644130884323536899

👉 @frontend_1

Совет по Javascript 💡

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

👉 @frontend_1

Совет по CSS 💡

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

👉 @frontend_1

React, Visualized

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

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

https://react.gg/visualized

👉 @frontend_1

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

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


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

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/phis_mat Обучающие видео, книги по Физике и Математике

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 программиста

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

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

Чат программистов📌
https://www.tg-me.com/developers_ru

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

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_1 Статьи из "Хакера"

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

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

Математика 📌
https://www.tg-me.com/Pomatematike Канал по математике

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

Совет по CSS 💡

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

👉 @frontend_1

Отменить нельзя продолжить

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

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

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

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

👉 @frontend_1

Css em vs rem

👉 @frontend_1

Принцип работы 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

Совет по Javascript 💡

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

👉 @frontend_1

Овладейте всем потенциалом анимирования с 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

Самый приятный в мире переключатель

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

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

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

👉 @frontend_1

Совет по работе с инструментами Chrome Dev Tools 💡

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

👉 @frontend_1

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

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

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

👉 @frontend_1