Frontender's notes. Страница 11

CSS фича - контейнерные запросы Алоха товарищи фронты! Одна из самых востребованных функций CSS стала поддерживаться всеми основными браузерами. Если вы раньше не слышали об этой штуке то вот вам пример кода: .panel { container: layers-panel / inline-size; } .card { padding: 1rem; } @container layers-panel (min-width: 20rem) { .card { padding: 2rem; } } 👉 Демка в codepen - ссылка... 👉 Caniuse - ссылка...

​​Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начинаем 11 мая. Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас по ссылке выше или тут —> https://ru.hexlet.io/link/nW0W83

​​Оптимизируем изображения в HTML Допустим, у вас есть классная страница и вы добавляете фоновое изображение: .hero { /* 🚩 */ background-image: url('/image.png'); } С точки зрения производительности страницы — это не лучший вариант. В статье узнаете, какие есть на это причины. Читать...

​​😲Анимация грида в CSS Автор написал несколько примеров анимации грида в css и поделился этим с вами. Статья подойдет как начинающим, так и опытным разработчиком. Читать...

​​⚙️Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий Автор написал  метод решения популярной задачи по программированию. Созданная функция эффективно решает судоку с помощью хэш-карт и рекурсий. Читать...

​​❗Асинхронное поведение в JS В этой статье вы узнаете как правильно писать код асинхронно в JS, что такое асинхронное поведения кода и как можно выполнять задачи отдельно от остального кода. Читать...

​​🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS  Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

​​💡Ошибки, которые совершают начинающие JS-разработчики В этой статье автор расскажет, почему на первый взгляд, синтаксис JS прост и интуитивно понятен, но это не мешает тем, кто делает первые шаги в нём, допускать ошибки, и почему JavaScript проявляет себя не совсем так, как другие языки в разных ситуациях, и иногда это способствует возникновению ошибок, а также вы узнаете почему нестрогая типизация языка и вольная трактовка данных может привести к тому, что данные будут интерпретироваться не так, как предполагает разработчик на этапе создания кода. Читать...

​​🚀Шпаргалка по всем свойствам CSS Flexbox В этой статье автор расскажет, как работает каждое из свойств Flexbox, зачем нужно знать HTML, CSS и уметь работать с VS Code, чтобы создать проект с использованием Flexbox, и почему Flexbox работает только с родительским классом, но не с дочерними классами, а также вы узнаете как читать сокращения свойств Flexbox. Читать...

Использование переменных в CSS Всем привет!  В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров. Как это сделать: Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента. Пример: :root {   --base: #ffc600;   --spacing: 10px;   --blur: 10px; } img {   padding: var(--spacing);   background: var(--base);   -webkit-filter: blur(var(--blur));   filter: blur(var(--blur)); } .hl {   color: var(--base); } Собственно как то так, удачи вам в экспериментах!

​​🚀Обучение веб-разработке на практике: пишем слайдер на JavaScript В этой статье автор расскажет, почему обучение веб-разработке на практике эффективнее теории, и как начать обучении веб-разработке с нуля в онлайн-редакторе, а также вы узнаете почему чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом. Читать...

​​😵Как написать свою поисковую систему для быстрого поиска личной информации В этой статье автор расскажет, почему поиск должен осуществляться подобно гугл поисковику, и зачем нужно каждое слово из запроса проверять на существующий из уже созданного блока информации, а также вы узнаете почему по ключу «теги» у нас будет храниться массив из символов для конкретного блока информации. Читать...

​​🧐Инструкция по установке бесплатного SSL-сертификата на сайте В этой статье автор расскажет, что такое SSL-сертификат, что необходимо для выпуска SSL-сертификата, и почему чтобы выпустить бесплатный SSL-letsencrypt сертификат, нужно установить certbot, а также вы узнаете какие есть особенности использования бесплатного SSL-сертификата. Читать...

​​🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ  Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

​​Исповедь CSS-программиста! Алоха товарищи фронты! Очень клевый видос на тему того почему нам стоит больше времени уделять прокачке своих навыков верстки а не полностью уходить в логику JS. Так же автор видео расписал важные моменты на которые стоит обратить внимание при написании стилей. Смотреть...

​​😵Domain Driven Design: давайте не будем усложнять В этой статье автор расскажет, зачем нужен Domain-Driven Design, почему чтобы сервис корректно работал и выполнял все свои функции, между модулями системы нужно настроить связи, а также вы узнаете почему если команда ранее не работала по Domain-Driven Design, то программистам придется изучать новые для себя инструменты. Читать...

​​Записывайтесь на курс от Хекслета, пройдите 5 бесплатных уроков профессии и получитескидку 10% на курс! Мы заинтересованы в успешном трудоустройстве наших студентов — гарантируем стажировки от компаний-партнеров и участие в Карьерном треке. Вернем деньги, если после учебы не получилось найти работу🔝 На профессии «Фронтенд-разработчик» вы за 10 месяцев: ✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно. ✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров. ✔️Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Sours проектах. Оцените формат и решите, стоит ли продолжать! Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации!

Изменения в async/await - ECMAScript 2022 Уже почти год назад, 22 июня 2022 года официально анонсировали новый стандарт ECMAScript 2022 который содержит в себе довольно интересные изменения о которых знают далеко не все. И одно из этих интересных изменений это то что теперь оператор await можно будет использовать в верхнем уровне скрипта, вне async функции. Как то так: // my-module.js const res = await fetch('https://example.com'); const text = await res.text(); console.log(text); Мне кажется это очень клевая штука которая всем нам может облегчить написание некоторых кусков кода.