✍️ Space Grotesk – пропорциональный шрифт без засечек, основанный на семействе шрифтов Space Mono. Имеет особенности моноширного шрифта. Пример есть на официальном сайте Meteor

Сайтодел | #шрифт


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

Ваш заказ, пожалуйста

Ваша задача — отсортировать переданную строку. Каждое слово в строке будет содержать одно число. Это число обозначает позицию, которую слово должно занимать в результате

Примеры:

 Thi1s T4est 3a"  -->  "Thi1s is2 3a T4est"
"4of Fo1r pe6ople g3ood th5e the2"  -->  "Fo1r the2 g3ood 4of th5e pe6ople"

👉 @seniorFront


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

​​⚡️Релиз Bun Shell (новый shell для JavaScript)

В этой статье вы узнаете о новом shell под названием Bun Shell, который предназначен для использования в JavaScript и TypeScript.

Читать...


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

​​Figma закрыла Dev Mode: пути обхода и их краткий обзор

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим.

Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказали в статье: https://habr.com/ru/companies/selectel/articles/795621/

#дизайн #figma


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

​​👩‍💻Пишем сложный 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