🔥16👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Попап
Создание попапа — распространённая задача для разработчика. Попапы или модальные окна привлекают внимание. Это может быть полезно как для самого пользователя, так и для заказчика. Например, попап — это удобный способ предупреждения о невозвратности действия при попытке перезагрузки страницы, а также хороший инструмент для сбора контактов пользователей.
В статье показывается простой и понятный способ создания попапа с использование тега
👉 @frontendInterview
Создание попапа — распространённая задача для разработчика. Попапы или модальные окна привлекают внимание. Это может быть полезно как для самого пользователя, так и для заказчика. Например, попап — это удобный способ предупреждения о невозвратности действия при попытке перезагрузки страницы, а также хороший инструмент для сбора контактов пользователей.
В статье показывается простой и понятный способ создания попапа с использование тега
<dialog>👉 @frontendInterview
❤3👎2👍1
Основные принципы разработки
В этой объемной статье рассматриваются и объясняются основные принципы, которые используются в программировании (SOLID, KISS, YAGNI, DRY) и менее известные (BDUF, APO, LOD)
👉 @frontendInterview
В этой объемной статье рассматриваются и объясняются основные принципы, которые используются в программировании (SOLID, KISS, YAGNI, DRY) и менее известные (BDUF, APO, LOD)
👉 @frontendInterview
👍3👎1
Каким образом браузер выбирает наиболее подходящее изображение из набора, указанного в image-set()?
Anonymous Quiz
8%
По размеру файла.
51%
По плотности пикселей экрана устройства.
30%
По указанному явному порядку.
11%
По метаданным изображения.
👍4
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 14 мая.
Реклама. ИП Чернова О. А., ИНН:771399721044
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 14 мая.
Реклама. ИП Чернова О. А., ИНН:771399721044
👍1
Ключевое слово revert-layer в CSS
revert-layer — это ключевое слово или значение CSS, которое позволяет откатить назад каскадный слой, вернувшись к значению соответствующего свойства предыдущего каскадного слоя. Иными словами, это откат к исходному значению, заданному автором.
Но если для этого свойства не задан соответствующий набор стилей, произойдёт возврат к стилям браузера по умолчанию.
В этом коде у нас есть заголовочный элемент и список элементов. Теперь давайте напишем наш CSS:
Здесь у нас два слоя. Все элементы будут красными (red), потому что в схеме слоя special — с максимальным приоритетом — для свойства color задано значение red.
Если мы поменяем порядок слоёв и сделаем приоритетным
Чтобы использовать ключевое слово revert-layer, давайте добавим эти стили:
Внутри нашего слоя special мы задаём цвет для значения revert-layer в селекторе элемента .feature.
В результате весь список элементов становится красным, а элемент .feature — зелёным, потому что происходит откат к соответствующему свойству предыдущего каскадного слоя, для которого мы задали значение green.
👉 @frontendInterview
revert-layer — это ключевое слово или значение CSS, которое позволяет откатить назад каскадный слой, вернувшись к значению соответствующего свойства предыдущего каскадного слоя. Иными словами, это откат к исходному значению, заданному автором.
Но если для этого свойства не задан соответствующий набор стилей, произойдёт возврат к стилям браузера по умолчанию.
<body>
<h1>Hello World</h1>
<ul>
<li class="item feature">Item one</li>
<li class="item">Item two</li>
<li class="item">Item three</li>
</ul>
</body>В этом коде у нас есть заголовочный элемент и список элементов. Теперь давайте напишем наш CSS:
@layer base, special;
@layer special {
.item {
color: red;
}
}
@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}Здесь у нас два слоя. Все элементы будут красными (red), потому что в схеме слоя special — с максимальным приоритетом — для свойства color задано значение red.
Если мы поменяем порядок слоёв и сделаем приоритетным
*@layer* special, base;, то все элементы станут синими, за исключением первого элемента, который будет зелёным. Это произойдёт из-за приоритета специфичности, так как стиль .feature следует после стиля .itemЧтобы использовать ключевое слово revert-layer, давайте добавим эти стили:
@layer base, special;
@layer special {
.item {
color: red;
}
.feature {
color: revert-layer;
}
}
@layer base {
.item {
color: blue;
}
.feature {
color: green;
}
}Внутри нашего слоя special мы задаём цвет для значения revert-layer в селекторе элемента .feature.
В результате весь список элементов становится красным, а элемент .feature — зелёным, потому что происходит откат к соответствующему свойству предыдущего каскадного слоя, для которого мы задали значение green.
👉 @frontendInterview
👍4
JavaScript и Node.js для веб-разработчиков
Книга рассказывает о языке программирования JavaScript, разработке на нем как программ общего назначения, выполняющихся в среде Node.js, так и скриптов для веб-страниц. Даны основы JavaScript: типы данных, операторы, работа с числами, строками, датой и временем, массивами, функции, классы (как старого, так и нового синтаксиса), итераторы, генераторы и класс Promise. Объяснена работа с отладчиком, встроенным в редактор Visual Studio Code. Рассказано о модулях, средствах для работы с файловой системой и программирования веб-серверов. Описана объектная модель документа. Рассмотрены средства для работы с элементами веб-страницы, самой страницей и браузером и технология AJAX (в том числе Fetch API), а также готовые программные пакеты для разработки веб-сайтов, в частности Webpack.
👉 @frontendInterview
Книга рассказывает о языке программирования JavaScript, разработке на нем как программ общего назначения, выполняющихся в среде Node.js, так и скриптов для веб-страниц. Даны основы JavaScript: типы данных, операторы, работа с числами, строками, датой и временем, массивами, функции, классы (как старого, так и нового синтаксиса), итераторы, генераторы и класс Promise. Объяснена работа с отладчиком, встроенным в редактор Visual Studio Code. Рассказано о модулях, средствах для работы с файловой системой и программирования веб-серверов. Описана объектная модель документа. Рассмотрены средства для работы с элементами веб-страницы, самой страницей и браузером и технология AJAX (в том числе Fetch API), а также готовые программные пакеты для разработки веб-сайтов, в частности Webpack.
👉 @frontendInterview
👍6
Correct the time-string
Нужно создать метод, который корректирует заданную временную строку.
При добавлении возникла проблема, поэтому многие временные строки сломаны.
Время форматируется с использованием 24-часовых часов, то есть с 00:00:00 до 23:59:59.
Пример:
👉 @frontendInterview
Нужно создать метод, который корректирует заданную временную строку.
При добавлении возникла проблема, поэтому многие временные строки сломаны.
Время форматируется с использованием 24-часовых часов, то есть с 00:00:00 до 23:59:59.
Пример:
"09:10:01" -> "09:10:01" "11:70:10" -> "12:10:10" "19:99:99" -> "20:40:39" "24:01:01" -> "00:01:01"👉 @frontendInterview
❤1
Кастомные свойства в CSS
Давайте предположим, что у нас есть веб-страница, на которой много элементов с текстом одного и того же цвета. Дизайнер создал фирменный стиль, руководство утвердило, мы начали верстать. Наш CSS мог бы выглядеть примерно так
Конкретный оттенок чёрного
Во-первых, если завтра по какой-то причине нужно будет немного изменить оттенок чёрного, придётся это делать во многих местах.
Во-вторых, приходится копировать и вставлять HEX-значение цвета, ну или запоминать первые несколько символов, чтобы текстовый редактор сумел нам подсказать.
Все эти неудобства уходят, если использовать CSS-переменные. Чаще их называют кастомные свойства.
Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var().
Стандартное свойство:
Кастомное свойство:
Кастомных свойств не существует в спецификации CSS. По способам применения они больше всего похожи на переменные в языках программирования. Если мы определили кастомное свойство, то в дальнейшем можно его переиспользовать сколько угодно раз.
👉 @frontendInterview
Давайте предположим, что у нас есть веб-страница, на которой много элементов с текстом одного и того же цвета. Дизайнер создал фирменный стиль, руководство утвердило, мы начали верстать. Наш CSS мог бы выглядеть примерно так
.header-primary {
font-size: 2em;
color: #18191C;
margin-bottom: .5em;
}
.header-secondary {
font-size: 1.6em;
color: #18191C;
}Конкретный оттенок чёрного
#18191C используется по всей странице в совершенно разных элементах: заголовках, тексте, кнопках, полях ввода. Кажется, что это не должно создавать никаких проблем, но на самом деле есть ряд неудобств, которых хотелось бы избежать.Во-первых, если завтра по какой-то причине нужно будет немного изменить оттенок чёрного, придётся это делать во многих местах.
Во-вторых, приходится копировать и вставлять HEX-значение цвета, ну или запоминать первые несколько символов, чтобы текстовый редактор сумел нам подсказать.
Все эти неудобства уходят, если использовать CSS-переменные. Чаще их называют кастомные свойства.
Кастомное свойство — это произвольное свойство с определённым значением. Оно отличается от стандартного CSS-свойства способом записи. Чтобы применить кастомное свойство, нужно передать его в CSS-функцию var().
Стандартное свойство:
.list-item {
margin-left: 10px;
}
.list-item .link {
margin-left: 10px;
}Кастомное свойство:
.list {
--element-gap: 10px;
}
.list-item {
margin-left: var(--element-gap);
}
.list-item .link {
margin-left: var(--element-gap);
}Кастомных свойств не существует в спецификации CSS. По способам применения они больше всего похожи на переменные в языках программирования. Если мы определили кастомное свойство, то в дальнейшем можно его переиспользовать сколько угодно раз.
👉 @frontendInterview
👍5❤2
Какое значение свойства background-color у элемента div?
Anonymous Quiz
3%
black
4%
blue
57%
red
35%
transparent
👍14
Колонка с контентом по центру экрана
Колонка с контентом определённой ширины по центру экрана — частый паттерн в веб-дизайне. В этом рецепте разбирается, как и какими способами можно это сделать. Также рассматривается ситуация, когда некоторые секции должны быть растянуты на весь экран.
👉 @frontendInterview
Колонка с контентом определённой ширины по центру экрана — частый паттерн в веб-дизайне. В этом рецепте разбирается, как и какими способами можно это сделать. Также рассматривается ситуация, когда некоторые секции должны быть растянуты на весь экран.
👉 @frontendInterview
🤔3❤1👍1👎1
О лени в обучении
В этой статье преподаватель английского рассказывает про проблему лени, разбирает виды лени и советует как с ней жить.
👉 @frontendInterview
В этой статье преподаватель английского рассказывает про проблему лени, разбирает виды лени и советует как с ней жить.
👉 @frontendInterview
👍4
Что вернёт код c картинки?
Anonymous Quiz
43%
{ oklch: [ ... ], rgb: [ ... ] }
31%
[ { oklch: [ ... ] }, { rgb: [ ... ] } ]
16%
'oklch,rgb'
11%
undefined
🔥8
Frontend meetup
1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.
2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.
3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.
Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf
➖➖➖
🗓 22 мая, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие
Реклама, ООО "Эвроне.ру", ИНН 3663057399
1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.
2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.
3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.
Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf
➖➖➖
🗓 22 мая, начало в 19:00 мск, Среда
🌐 ОНЛАЙН
✅ Регистрация на мероприятие
Реклама, ООО "Эвроне.ру", ИНН 3663057399
👍1👎1