Frontend по-флотски 👨‍💻 @frontend_pasta Channel on Telegram

Frontend по-флотски 👨‍💻

@frontend_pasta


Новости, идеи и знания из мира разработки интерфейсов

Контакт: @qmzik

Frontend по-флотски 👨‍💻 (Russian)

Вы увлечены разработкой интерфейсов? Хотите быть в курсе последних новостей, идей и знаний из мира frontend? Тогда канал "Frontend по-флотски 👨‍💻" (@frontend_pasta) именно для вас! Здесь вы найдете актуальную информацию о технологиях, трендах и лучших практиках в сфере разработки интерфейсов

Мы стремимся поделиться с вами самыми интересными материалами, вдохновить новыми идеями и помочь развить ваши знания. Канал открыт для всех, кто увлечен frontend и хочет быть в курсе последних тенденций в этой области

Присоединяйтесь к нам в "Frontend по-флотски 👨‍💻" и будьте в курсе самых свежих и интересных новостей и идей из мира разработки интерфейсов! Контакт для связи: @qmzik

Frontend по-флотски 👨‍💻

21 Nov, 19:23


Typescript для React 👨‍💻

В этой статье Jacob Paris рассказал как правильно готовить TypeScript в комбинации с React, а я её перевёл для тебя ❤️

https://habr.com/ru/articles/860418/

Frontend по-флотски 👨‍💻

21 Nov, 07:47


Дата-ориентированное программирование, что это и зачем? 🥸

На Holy был доклад на эту тему, как раз он меня и замотивировал написать этот пост, так как про этот подход я ничего не знал. Постараюсь описать главные тезисы в этом посте. Также есть книга, которая изображена на картинке, если захочешь стать ДОП-ниндзя 😄

Краткое описание:
Дата-ориентированное программирование (Data-Oriented Programming, DOP) — это подход, при котором вы проектируете приложение вокруг данных, а не вокруг функций или объектов. Основная идея — разрабатывать структуры данных, которые определяют поведение приложения, минимизировать сложность и повысить читаемость кода.

🔑 Принципы ДОП:
Иммутабельность данных: Данные не изменяются напрямую, создаются новые версии

Явная структура данных: Используйте простые, плоские структуры, понятные без дополнительных комментариев

Минимизация сложностей: Логика отделяется от данных и максимально упрощается

Разберём пример ООП и ДОП:

ООП подход:
class Task {
constructor(
public id: number,
public title: string,
public completed: boolean
) {}

toggle() {
this.completed = !this.completed;
}
}

const task = new Task(1, "Написать статью", false);
task.toggle();
console.log(task.completed); // true


ДОП подход:
type Task = {
id: number;
title: string;
completed: boolean;
};

const toggleTask = (task: Task): Task => ({
...task,
completed: !task.completed,
});

const task: Task = { id: 1, title: "Написать статью", completed: false };
const updatedTask = toggleTask(task);

console.log(updatedTask.completed); // true


👉 Что изменилось?

— Данные теперь иммутабельны: task остаётся неизменным
— Логика (функция toggleTask) отделена от данных
— Код проще тестировать и понимать (субъективно)

💬 Что думаешь про этот подход? Применил бы его и в каких случаях?

#dop #cs

Frontend по-флотски 👨‍💻

20 Nov, 15:01


Встречаем победителя 🍀

@chopsqd, я скоро свяжусь с тобой!

Всем участникам большое спасибо за фидбэк, я постараюсь оставить всё хорошее и внести пожелания (например, тэги уже начал ставить ❤️)

Планирую провести ещё один розыгрыш ближе к Новому году, поэтому включай оповещения, чтобы не пропустить 🤗

Frontend по-флотски 👨‍💻

20 Nov, 12:03


Приветствуем Angular v19 🚀

Что-то они прям ускорили релизы, 18-ая версия выходила в мае, го глянем что там появилось нового

Ключевые обновления:
🌿 Инкрементальная гидратация: улучшенная производительность в режиме разработчика

🪄 Контроль рендеринга маршрутов: возможность выбирать, где рендерить маршруты — на клиенте, сервере или во время сборки

🪅 Обновленные схематики: инструменты для миграции на последние лучшие практики

📈 Расширение реактивных примитивов: стабилизация текущих и добавление новых, таких как linkedSignal и resource

Мелкие улучшения интерфейса: например, компонент выбора времени и автоматическое удаление неиспользуемых импортов

Улучшение DX:
🔥Горячая замена модулей для стилей, а также экспериментальная поддержка шаблонов

🔍 Строгая проверка API для обеспечения использования актуальных подходов

🧪Интеграция с Jest и Web Test Runner для удобного юнит-тестирования

Обновления Angular Material и CDK:
🎨 Новая API для настройки тем позволяет проще адаптировать компоненты под нужды приложения

🗽 Поддержка двухмерного перетаскивания и перераспределения вкладок

Официальный анонс 👇
https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

#angular

Frontend по-флотски 👨‍💻

20 Nov, 10:48


Что нового в Chrome 131? 😎

— Изменения в наследовании CSS для псевдоклассов ::selection и ::target-text, обеспечивающие более предсказуемое поведение

— Дополнительные опции стилизации элементов <details> и <summary>, включая поддержку свойств display и нового псевдоэлемента ::details-content

— Поддержка @page margin boxes для кастомизации полей при печати документов

— Расширенная поддержка SVG в свойствах clip-path, fill, stroke, marker

— Добавлено свойство font-variant-emoji

— Улучшен WebHID

Подробнее 👇
https://developer.chrome.com/blog/new-in-chrome-131

#chrome

Frontend по-флотски 👨‍💻

19 Nov, 10:47


Ждём фронтендеров на Yet Another Frontend Night!

📅 23 ноября мы приглашаем разработчиков интерфейсов провести вечер в офисе Яндекса на Льва Толстого.

О мероприятии:

YAFN — это митап, на котором вы можете послушать экспертов из Яндекса, узнать о вакансиях в наших командах и развлечься в кругу коллег.

Если вы не в Москве, мы всё равно вас ждём — на онлайн-трансляции.

О программе:

🔶 Выступление Руслана Муфтиева, руководителя разработки интерфейсов Ecom-сценариев

🔶 Батл — ведущие эксперты Яндекса попробуют разобраться, должен ли фронтендер понимать продукт и нужны ли ему навыки менеджера

🔶 Презентация вакансий — узнайте, к каким фронтенд-командам можно присоединиться

🔶 Code in the Dark — победитель получит Яндекс Станцию Дуо Макс, а финалисты — станции Лайт 2. А ещё будет «Доббль»!

🔶 Афтерпати и нетворкинг — под закуски, напитки и музыку

🔗 Оставить заявку на участие можно по ссылке. Дождитесь подтверждения вашего участия.

❤️ Ждём вас!

Реклама. ООО "Яндекс", ИНН 7736207543.

Frontend по-флотски 👨‍💻

18 Nov, 14:02


Хм, за час всего 1 участник, видимо футболка не настолько интересна как я предполагал 😅

Тогда немного поменяю приз: Либо футболка, либо Telegram Premium на 1 год ⭐️ на твой выбор

P.S. участвуем под постом выше ❤️

Frontend по-флотски 👨‍💻

18 Nov, 12:55


Объявляю конкурс на футболку от X5 с конфы Holy JS 🐸

От сердца отрываю эту футболочку, так как удалось получить только один экземпляр 🥺

Условия:
— Быть подписанным на канал
— Написать в комментариях фидбэк по каналу (необязательно позитивный), он должен соответствовать полноте по Тьюрингу по-флотски: "Что нравится на канале? Что было бы здорово добавить? Что не нравится на канале и как это можно было бы исправить?"
— Будет выбран случайный комментарий через генератор
— Итоги подведу 20 ноября

Без проблем отправлю футболку по РФ, в другие страны будем обсуждать индивидуально

Футболка размера S, но она оверсайз, поэтому будет как M/L

P.S. наверное, ты обратил внимание, что в последнее время много рекламы. Я немного облажался с датами (думал, что октябрь это 11-ый месяц), поэтому в ноябре получилось в 2 раза больше рекламных постов, чем планировалось ☺️

Frontend по-флотски 👨‍💻

17 Nov, 11:00


По традиции делюсь нафармленным лутом с HolyJS

Если был там, то делись своим 😄

P.S. скоро верну полезный тех. контент, не переживай ❤️

Frontend по-флотски 👨‍💻

16 Nov, 16:21


Soft Weekend — офлайн-конференция для айтишников про развитие софт скиллов 🛋

Андрей Смирнов пробует своими силами организовать доступную по финансам конфу (ты можешь его знать по шоу 600к в секунду или по подкасту Frontend Weekend)

Спикерами будут знакомые тебе лица из биг теха + сам Андрей там будет спикером

Что там будет?
14 докладов разделены на два поток, практический нетворкинг, где даже самый интровертный айтишник почувствует себя комфортно

Где и когда?
Москва, 23 ноября, 10:30

Цена: 7к если пойдёшь один или 12к за двоих

Подробнее 👇
https://softweekend.ru/

Frontend по-флотски 👨‍💻

15 Nov, 16:14


Как фронтендеру расти от мидла и выше, избежав застоя в своем развитии

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

О том, как продолжать развиваться и двигаться вперёд (и, конечно, улучшать карьеру и доход), рассказывает Андрей Кобец в своём канале. С 20-летним опытом в разработке он делится статьями, где подробно разбирает технические темы, которые помогут вам прокачать навыки и перейти на новый уровень.

Подписывайтесь на канал про современный фронтенд и базу в программировании

Реклама ИП Кобец Дарья Дмитриевна ОГРН: 322237500264561 erid: 2VtzqwiKdVx

Frontend по-флотски 👨‍💻

15 Nov, 14:12


Вайб на докладе LaranaJS😁

Frontend по-флотски 👨‍💻

14 Nov, 12:31


Ребусы от Сибур Диджитал 🤓

Frontend по-флотски 👨‍💻

14 Nov, 11:08


Если вдруг кому-то скучно на работе, то можешь порешать нескучные задачки от Росатома 😜

UPD: они затупили с первым, там должно быть условие: "Лифт не может ездить в холостую"

Frontend по-флотски 👨‍💻

14 Nov, 07:39


Зарегался на Holy, тусня начинается!

По традиции буду делиться эмоциями и задачками 🫡

Кто на Holy, пиши @qmzik, пересечёмся ❤️

Frontend по-флотски 👨‍💻

12 Nov, 10:38


Фронтенд разработчики, пора выходить на новый уровень!

Вы уже мастерски владеете языками программирования и чувствуете, что готовы на большее? Освойте навыки управления проектами и станьте лидером своей команды!

Курс «Менеджер проектов» от Яндекс Практикума поможет вам:

💼 Управлять проектами от идеи до релиза.
🎙 Улучшить коммуникацию с командой и заказчиками.
📊 Организовать процессы так, чтобы сдать проект в срок и без стресса.
🚀 Вырасти в роли и выйти на более высокооплачиваемые позиции.

Перестаньте быть просто частью проекта — начните его возглавлять!

🌟И главное — чтобы понять, ваше ли это, попробуйте бесплатную вводную часть курса! Переходите по ссылке и пройдите первую бесплатную тему до 30 ноября, чтобы получить промокод на скидку 20%.

Frontend по-флотски 👨‍💻

05 Nov, 09:12


Хороший вариант, если надо создать тип для списка, который не может быть пустым 🧑‍🎓

UPD:
Более универсально
type NonEmptyArray<T> = [T, ...T[]];

Frontend по-флотски 👨‍💻

29 Oct, 17:29


Svelte 5 здесь! 👏

Быстрый, модный, молодёжный с рунами и блэкджеком😄

https://habr.com/ru/articles/854480/

Frontend по-флотски 👨‍💻

22 Oct, 09:48


Го работать вместе? 🫶

О компании
Moni — компания и сообщество с разными аналитическими продуктами: Moni Discover – платформа для социальный аналитики проектов, Moni Portfolio – платформа для отслеживания web3 активов, крипто-медиа Moni Talks, + разрабатываем большой новый проект

1) Фронтенд разработчик 💫
Наш стэк: Next.js, TypeScript, MobX

Требования:
— Опыт создания SPA приложений на React
— Умение хорошо верстать
— Виртузное знание JavaScript, TypeScript и понимание SSR
— Большой кругозор по фронтенд технологиям

Плюсом будет:
— Опыт разработки графиков с библиотеками и без
— Знаком с принципами разработки Chrome Extensions

2) Бэкенд разработчик 🔐
Наш стек: python 3.9-3.12, postres 14, rabbitmq, redis, gitlab, kubernetes, GCP

Требования:
— Python (asyncio, aiohttp, pytest)
— Postgres (оптимизация запросов, проектирование БД)
— Redis, RabbitMQ (работа с очередями сообщений, key-value хранилищем)
— База DevOps (Gitlab, Kubernetes)
— Опыт проектирования и масштабирования сервисов под нагрузки

Плюсом будет:
— Опыт с Telegram-ботами (aiogram)
— Знания ML/NLP, web3

3) Фулл стэк разработчик 🚀
Если тебе знаком стэк как фронтенда, так и бэкенда, то мы будем рады рассмотреть твою кандидатуру ❤️

Актуально для всех позиций 👇
Опыт в продакшене от 2 лет
Зарплата: 2000$-3500$

Кидай свой CV мне (@qmzik), пообщаемся ❤️

Frontend по-флотски 👨‍💻

21 Oct, 09:38


Вышел Deno 2.0 🚀

Что там нового?
1. Совместимость с npm: Deno теперь поддерживает работу с пакетами npm и Node.js. Это значит, что разработчики могут использовать обширную экосистему npm без необходимости перехода на другие среды. Пакеты можно легко добавлять и удалять с помощью команд deno add и deno remove.

2. Улучшение стандартной библиотеки: Стандартная библиотека Deno теперь стабилизирована и доступна через JavaScript Registry (JSR). Это означает, что теперь она покрывает большинство основных задач, что облегчает поиск и использование модулей.

3. Поддержка monorepo: Deno теперь поддерживает работу с монорепозиториями, позволяя объединять проекты, работающие как с Deno, так и с npm. Для этого используется функция workspaces в файле конфигурации deno.json.

4. Каналы LTS (Long-Term Support): Для крупных команд, которым необходимо более тщательное тестирование новых версий, вводится поддержка стабильных LTS-релизов с критическими исправлениями в течение шести месяцев.

5. Высокая производительность: Deno 2.0 по-прежнему ориентирован на высокую производительность, предлагая улучшенные результаты как в плане скорости запуска, так и в обработке сложных запросов.

6. Улучшена поддержка TypeScript и встроенные инструменты для форматирования, тестирования и деплоя: Среда теперь включает более гибкую настройку и обновленные стандарты работы с Web API, что делает её более универсальной для различных типов приложений, от CLI до серверов API и веб-приложений

Подробнее туточки 👇
https://deno.com/blog/v2.0