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

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

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

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

👉 @frontend_1

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

👉 @frontend_1

CSS Совет 💡

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

👉 @frontend_1

Card :hover spotlight effect with background-attachment 🤙

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

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

👉 @frontend_1

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

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

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

https://yangx.top/linux_odmin Linux: Системный администратор
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С
https://yangx.top/DevLab1C 1С:Предприятие 8

Программирование 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_2 Хакер Free

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

Математика 📌
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

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

👉 @frontend_1

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

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

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

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

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

👉 @frontend_1

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

👉 @frontend_1

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

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

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

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

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

Cовет💡

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

👉 @frontend_1

Как использовать зависящие от языка кавычки в 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

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

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

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

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

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

Совет по HTML 💡

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

👉 @frontend_1

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

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

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

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


👉 @frontend_1

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

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

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

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

Совет по CSS 💡

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

👉 @frontend_1

Совет по CSS 💡

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

👉 @frontend_1

🚀Совет по JavaScript

Преобразование массивов в формат CSV упрощает экспорт и обмен данными, делая структурированные данные более доступными и универсальными.📊🔁

👉 @frontend_1