Фронтендер от бога – Telegram
Фронтендер от бога
3.88K subscribers
1.12K photos
19 videos
1.08K links
Божественные дайджесты по фронтенду и немного юмора.

По всем вопросам: @godinmedia
Download Telegram
Чеклист для tsconfig.json

#почитать

В этой статье я расскажу о настройках TypeScript, определяемых в файле tsconfig.json, которых я использую в своих проектах.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51🔥1
Deeplink в React Native: Полное руководство

#почитать

Deeplinking — технология, которая позволяет открывать конкретные экраны или контент внутри мобильного приложения через URL-ссылки. Она особенно полезна для прямых переходов из уведомлений, ссылок с веб-сайтов, поделённых ссылок через социальные сети и интеграций с маркетинговыми кампаниями. В этой статье мы подробно рассмотрим, как настроить и использовать deeplinks в React Native.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
Облачные IDE: тестируем лучшие онлайн-редакторы кода

#почитать

Полезные сервисы: Replit, CodeSandbox, GitHub Codespaces, JetBrains Fleet, StackBlitz. Обзор возможностей, плюсы и минусы, какие задачи лучше решать в каждой среде.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Работа с JavaScript Scheduler API

#почитать

Откройте для себя возможности управления приоритетами и контроля выполнения задач в JavaScript с помощью нового Scheduler API. Новый подход поможет вам стать более продуктивными и эффективными в своей работе.

Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Модернизация с Web-платформой: производительность изображений

#почитать

Демонстрация того, как современная Web-платформа может радикально упростить и обогатить старую кодовую базу.

Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Несколько интересных вещей о @counter-style

#почитать

Недавно читал статью Хуана в Almanac, посвящённую at-правилу @counter-style, и готов поклясться, что он раскрыл и разобрал некоторые чрезвычайно интересные вещи, которые можно сделать для стилизации списков, в частности, маркер списка. Вы, вероятно, уже знаете о псевдоэлементе ::marker. Возможно, вам доводилось работать с кастомными счётчиками, использующими counter-reset и counter-increment. А может быть, вы предпочитаете удалять list-style (будьте осторожны!) и вручную добавлять маркер в псевдоэлемент ::before элемента списка.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
NEST.js — уродливый монстр или мощный энтерпрайз?

#почитать

Если, когда вы смотрите на NEST.js вас гнетёт необъяснимая тоска. Если вы не можете понять воодушевления и радости от использования декораторов. Если рассмотрение очередного NEST-инструмента вызывает лёгкое недоумение — не стесняйтесь, вы не одиноки.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51
Вебсокеты на FastAPI: реализация простого чата с комнатами за 20 минут

#почитать

Хотите освоить WebSocket и создать собственный чат с комнатами? В этой статье мы разберем:
• В чем разница между WebSocket и классическим HTTP
• Как реализовать сервер на FastAPI с поддержкой WebSocket
• Как создать простой FullStack-чат для мгновенного обмена сообщениями
• Как всего за пару минут развернуть готовое приложение на облачном сервисе
Статья написана с учетом новичков, но и опытные разработчики найдут здесь полезные инсайты.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2
Особенности национальной верстки: PWA

#почитать

В этой статье мы не будем в очередной раз размышлять о том, почему бизнес и пользователи все чаще начинают отдавать предпочтение PWA вместо мобильных приложений, какие у них есть плюсы, минусы и так далее.
Сегодня мы сосредоточимся на проблемах (а точнее на одной конкретной), с которой вы можете столкнуться, решив сделать свое веб-приложение прогрессивным.
Забегая вперед, сразу скажу, кому статья может быть полезна. Не столько важно, являетесь вы владельцем продукта или разработчиком. Если вы создаете PWA-приложение, в котором планируется реализовать открытие ссылок на сторонние ресурсы в браузере, вы можете столкнуться с неочевидной проблемой в верстке.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
Изучение Символов JavaScript

#почитать

Symbol отличается от других примитивов JavaScript тем, что они гарантированно уникальны.
Когда создаёте символ с помощью Symbol('denoscription'), вы получаете нечто, что никогда не будет равно ни одному другому символу, даже созданному с тем же denoscription. Эта уникальность и делает их мощными для определённых случаев использования.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
7
ООП: худшее, что случалось с программированием

#почитать

К сожалению, программирование достаточно далеко от науки (как и я), поэтому многие термины могут быть интерпретированы по-разному, так что давайте сначала с ними определимся. Сразу предупреждаю, что эти определения — мое субъективное мнение, попытка навести порядок и заполнить пробелы. Конструктивная критика приветствуется.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
7🤨2👍1
SSL и SSL-сертификаты для новичков

#почитать

Я долго разбирался с SSL, сертификатами, центрами сертификации - это единственная статья, после которой у меня что-то отложилось в голове :) Поэтому возникла идея перевести ее и донести до широких масс.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1👌1
Three.js с нуля на практике

#почитать

В сети есть множество статей и уроков по Three.js для начинающих, но большинство из них — это теоретический материал. Я же хочу показать, как создавать 3D-анимации на практике.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
Ramda.js — библиотека, которая избавит вас от reduce и map-каши

#почитать

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
7👎3👍1
Обработка ошибок Axios

#почитать

Недавно передо мной встала задача улучшения пользовательского опыта обработки ошибок запросов к бэкенду. Я решила комплексно исследовать эту тему на примере HTTP-клиента Axios.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62🔥1
Symfony + React: основные проблемы и методы их решения

#почитать

Symfony, как PHP-фреймворк, обеспечивает надежный серверный бэкенд: работу с базой данных, бизнес-логику, REST API и безопасность. React же отвечает за динамичный интерфейс на стороне клиента, позволяя создавать богатые Single Page Application (SPA) с мгновенной реакцией на действия пользователя. Используя их вместе, разработчики получают гибкость разделения фронтенда и бэкенда, что упрощает поддержку и масштабирование. Например, бэкенд на Symfony можно переиспользовать для мобильного приложения или другого клиента, пока React обеспечивает отличное UX в браузере.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1👌1
Каррируем React-компоненты: функциональные паттерны на фронтенде

#почитать

Ежедневно мы пользуемся подходами из мира ФП, зачастую даже не подозревая об этом.
Эти паттерны плотно укоренились в сознании фронтенд-разработчиков, делая наш код значительно чище, читаемее и предсказуемее.

Вот лишь некоторые из них:

Декларативный код. Мы не говорим как рендерить, мы говорим что.
UI = f(state). Интерфейс  –  функция от состояния.
Композиция. Сложные компоненты собираются из простых независимых блоков.
Мемоизация. Функцию можно переиспользовать, пока данные не изменятся.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥1
Web3 для JavaScript-разработчиков на примере Solana

#почитать

Шутки шутками, но мир web3 разросся в индустрию со своими вакансиями. И в ней востребован JavaScript, причём не только на фронтенде. Так что у JS-разработчиков появился смысл обращать внимание на этот сегмент, а на нашей конференции HolyJS появились доклады об этом.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥1
Отладка JavaScript в Chrome DevTools для начинающих фронтендеров

#почитать

Мне не понаслышке известно, насколько ресурсозатраным (в плане времени и сил) может быть поиск и исправление ошибок в JS. Новичкам этот процесс может показаться неподъёмным камнем, но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней я и расскажу, причём затрону не console.log, а куда более эффективную альтернативу.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Борьба с перерендерами в React

#почитать

Функциональный компонент — это обычная JavaScript-функция, и часто при обсуждении, когда говорят «компонент рендерится», имеют в виду само выполнение этой функции.
При создании компонента, когда функция выполняется впервые, говорят, что компонент «рендерится». А когда в компоненте что-то изменилось, то говорят, что компонент «перерендеривается».
С изначальным рендерингом все хорошо, это необходимый шаг, чтобы компонент создался. Но вот перерендеры могут быть лишними, и с ними можно (а иногда нужно) бороться.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4