​​👩‍💻Пишем сложный Page object для playwright тестов вместе с Dorama

В этой статье я расскажу о том, как удобно организовать Page Object для большого проекта с использованием Playwright и библиотеки Dorama.

Читать...


Original post link: t.me/frontendnoteschannel/3332
Forwarded and filtered by @smartfeed_bot

🔥 Годнота

Наткнулся на базу с 1400 вопросов с собеседований на Frontend разработчика. Фишка в том что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам.


Original post link: t.me/seniorFront/3833
Forwarded and filtered by @smartfeed_bot

Switch Day and Night - Cat

Вся сцена реализована на HTML и CSS.

👉 @seniorFront


Original post link: t.me/seniorFront/3834
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 7 messages
Today you received: 7 messages
Our filtering prevented you from: 0 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Сайтодел | GitHub, Макеты, Шрифты, JavaScript, Figma: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

Если вам были нужны встраиваемые комментарии для сайта, то вот отличный проект на React — Replyke

Replyke — бесплатный, готовый к использованию компонент комментариев, который легко настраивается и интегрируется с существующими React-проектами. Сами комментарии подключаются по системе Plug’n’Play, а настроить их можно прямо на веб-сайте проекта.

#react #инструменты


Original post link: t.me/tproger_web/4392
Forwarded and filtered by @smartfeed_bot

​Итератор

Итератор — это объект, который умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая своё текущее положение внутри этой последовательности.
Иными словами итератор — это такой механизм, который позволяет перемещаться (итерироваться) по элементам коллекции в определённом порядке и делает их доступными.

В JavaScript итератор — это объект, который возвращает следующий элемент последовательности, через метод next(). Этот метод возвращает объект с двумя свойствами:
- value — значение текущего элемента коллекции.
- done — индикатор, указывающий, есть ли ещё в коллекции значения, доступные для перебора.

function makeIterator(array) {
let nextIndex = 0

return {
next: function () {
if (nextIndex < array.length) {
const result = { value: array[nextIndex], done: false }
nextIndex++
return result
} else {
return { done: true }
}
}
}

После создания, объект-итератор может быть явно использован, с помощью вызовов метода next():
let iterator = makeIterator(['Hello', 'world'])
console.log(iterator.next().value)
// 'Hello'
console.log(iterator.next().value)
// 'world'
console.log(iterator.next().done)
// true

Как только метод next() завершает перебор, то возвращается { done: true }. Это является сигналом, что итерирование завершено.

👉 @seniorFront

​​👤Как работает автозаполнение в браузерах и что важно учитывать веб-разработчику

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

Читать...


Original post link: t.me/frontendnoteschannel/3334
Forwarded and filtered by @smartfeed_bot

Задача

Дано натуральное число, необходимо преобразовать его в римскую запись.

Римские цифры представлены семью разными символами:

I - 1,
V - 5,
X - 10,
L - 50,
C - 100,
D - 500,
M - 1000

Справка: римские цифры обычно пишутся от наибольшего к наименьшему слева направо. Однако цифра четыре - это не IIII. Вместо этого число четыре записывается как IV. Поскольку единица стоит перед пятью, мы вычитаем ее и получаем четыре. Тот же принцип применяется к числу девять, которое записывается как IX.

Вычитание используется в шести случаях:

- I можно поставить перед V (5) и X (10), чтобы получилось 4 и 9.
- X можно поставить перед L (50) и C (100), чтобы получилось 40 и 90.
- C можно поставить перед D (500) и M (1000), чтобы получилось 400 и 900.

Входные данные: n - натуральное число от 1 до 3000.

Вывод: римская запись числа n.

Ответ


Original post link: t.me/senior_front/1874
Forwarded and filtered by @smartfeed_bot

​​ИИ победил: GitHub Copilot уже может имитировать разработчика уровня сеньор


Original post link: t.me/tproger_web/4394
Forwarded and filtered by @smartfeed_bot

Star Wars Imperial Army's Product Slider

Свёрстано на HTML и SCSS. Функционал слайдера реализован при помощи библиотеки Swiper.

👉 @seniorFront


Original post link: t.me/seniorFront/3836
Forwarded and filtered by @smartfeed_bot

💾 Parallax Depth Cards – карточки, имитирующие объемное изображение под стеклом. Каждая карточка вращается в пространстве и показывает скрытые края картинки.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1676
Forwarded and filtered by @smartfeed_bot

​​🧐Как составить Customer Journey Map и почему не надо игнорировать этот инструмент

В этой статье вы узнаете, CJM может помочь выявить узкие места на пути клиента к достижению цели и оптимизировать этот процесс.

Читать...


Original post link: t.me/frontendnoteschannel/3335
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 8 messages
Our filtering prevented you from: 2 messages

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Веб-страница: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​Интересных codepen-проектов пост: Solar system — анимация описания планет солнечной системы. Проект реализован с помощью CSS и JavaScript.

Исходники: https://codepen.io/DeyJordan/pen/NWOoEOg

#codepen


Original post link: t.me/tproger_web/4396
Forwarded and filtered by @smartfeed_bot

​​🗣К вопросу о современном восприятии методологии 12 Factor App

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

Читать...


Original post link: t.me/frontendnoteschannel/3337
Forwarded and filtered by @smartfeed_bot

​Почему умирает твой пет-проект?

А вы потянете пет-проект в одиночку?
Теперь мы плавно переходим ко второму вопросу в нашей повестке: А вы вообще реально думаете, что сможете реализовать все самостоятельно? Ведь крупные компании располагают тысячами сотрудников и множеством команд, каждая из которых разрабатывает свою часть продукта. И вы считаете, что все это можно сделать в одиночку.
Главным героем в этой небольшой истории будет Иван.
Иван решает реализовать свою криптовалютную биржу с изюминкой, которую мы оставим в секрете. И казалось бы по версии Ивана достаточно фронт на реакте запилить, бек и авторизацию и кошельки, и можно отправляться на минимальном MVP в релиз. Но будет ли так — это большой вопрос.
Для успешной работы ему приходится находится в роли заказчика, аналитика, разработчика, тестировщика и девопса. В дальнейшем он пытается совместить все эти роли, но несмотря на затраченное время, его цель остается далекой. Учитывая, что на разработку крупных продуктов командам требуется годы, в одиночку он может лишь сделать небольшую часть. Возможно, стоило начать с чего‑то более ограниченного или посильного.

А обладаете ли вы временем для работы над пет-проектом?
Давайте опишем персонажа по имени Олег, которого прозвали «Где правки?». Он является весьма успешным и востребованным тимлидом небольшой команды разработки. Помимо рабочей сферы у него есть также настоящая семья: жена и несколько детей. И вот ему поступает предложение о совместной разработке проекта с друзьями, на что он соглашается.
И вот работа над пет‑проектом набирает обороты, и жизнь в нем оживает: друзья уже приступили к выполнению своих первых задач, но Олег пока не может присоединиться. Ведь на его работе требуется закрыть релиз, а после работы он обещал сводить жену в магазин, а также забрать детей из садика. И вообще кровь из носу он завтра точно выполнит свою часть заданий.
В целом всегда важно заранее понимать свои силы. Конечно, всегда хочется участвовать во всех интересных проектах, но если нет возможности, стоит отказаться, чтобы не подводить других. Или определить, что график работы будет не очень напряженный, чтобы вы смогли справиться.

👉 @seniorFront

Social icon animation

После загрузки страницы запускаются несколько анимаций с разной задержкой, созданной при помощи setTimeout.

👉 @seniorFront


Original post link: t.me/seniorFront/3839
Forwarded and filtered by @smartfeed_bot

Перенос, обрезка и ориентация текста в CSS

Из этой статьи вы узнаете, как можно с помощью CSS настроить обработку пробелов в тексте, режим письма, ориентацию текста, перенос слов и расстановку переносов.

https://itchief.ru/html-and-css/text-wrap


Original post link: t.me/senior_front/1875
Forwarded and filtered by @smartfeed_bot

🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1677
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 6 messages
Our filtering prevented you from: 3 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Веб-страница: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​​Если пропустили, тут Максим Дунин, один из ключевых разработчиков Nginx, форкнул проект, чтобы развивать его независимо как freenginx!

Nginx — веб-сервер, который работает под капотом подавляющего большинства сайтов и веб-сервисов. Это разработка российского инженера Игоря Сысоева. 4 года назад её купил американский F5, но в 2022 году московский офис компании закрыли, а Максим как один из основных разработчиков, остался в России и работал над проектом как волонтер.

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

Максим топит за то, что кодом пользуются люди и они имеют право знать, чего ожидать. freenginx должен стать проектом, свободным от корпоративного контроля.

Пока что ничего менять не нужно, nginx, скорее всего, будет развиваться так же, как и раньше. А вот за проектом Максима понаблюдать интересно: https://freenginx.org/pipermail/nginx/2024-February/000007.html

#nginx