Frontender's notes [ru]

2023-04-30 18:07:08 Использование переменных в 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);
}

Собственно как то так, удачи вам в экспериментах! Открыть/Комментировать

2023-04-30 15:07:27 ​​ Обучение веб-разработке на практике: пишем слайдер на JavaScript

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

Читать... Открыть/Комментировать

2023-04-29 20:07:24 ​​ Как написать свою поисковую систему для быстрого поиска личной информации

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

Читать... Открыть/Комментировать

2023-04-29 15:07:24 ​​ Инструкция по установке бесплатного SSL-сертификата на сайте

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

Читать... Открыть/Комментировать

2023-04-29 12:37:03 ​​ Тест по Node JS от OTUS

Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS

Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript

РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА
Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js

Время прохождения теста ограниченно 30 минут

ПРОЙТИ ТЕСТ 

Курс доступен в рассрочку.

Пройдете успешно тест, получите доступ к открытым урокам курса.

Нативная интеграция. Информация о продукте www.otus.ru Открыть/Комментировать

2023-04-28 20:37:10 ​​Исповедь CSS-программиста!

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

Смотреть... Открыть/Комментировать

2023-04-28 15:07:59 ​​ Domain Driven Design: давайте не будем усложнять

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

Читать... Открыть/Комментировать

2023-04-28 10:37:08 ​​Записывайтесь на курс от Хекслета, пройдите 5 бесплатных уроков профессии и получитескидку 10% на курс!

Мы заинтересованы в успешном трудоустройстве наших студентов — гарантируем стажировки от компаний-партнеров и участие в Карьерном треке. Вернем деньги, если после учебы не получилось найти работу

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

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

Оцените формат и решите, стоит ли продолжать! Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации! Открыть/Комментировать

2023-04-27 20:08:06 Изменения в 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);

Мне кажется это очень клевая штука которая всем нам может облегчить написание некоторых кусков кода. Открыть/Комментировать

2023-04-27 16:37:45 ​​ Использование адаптивных изображений в веб-разработке

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

Читать... Открыть/Комментировать