Как настроить VSCode для удобной работы с проектом Tauri. Установим пару плагинов и настроим launch.json и tasks.json.
Sergey Andreev @siandreev
Frontend developer
Почему я больше не буду работать наставником на IT-курсах
Простой
4 мин
Меня всегда тянуло к обучению людей и шарингу знаний. Когда я был разработчиком, то охотно становился ментором у стажеров. И даже сейчас, работая тимлидом, я являюсь пипл-менеджером уже у senior-разработчиков. Но у меня никогда не было опыта работы преподавателем или наставником сразу для большой аудитории. Мне всегда казалось это чем-то интересным и вдохновляющим. Но мои ожидания не оправдались, как вы уже поняли из названия статьи.
Неизвестно полезный CSS. Часть 4
Средний
6 мин
Туториал
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.
Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
- сброс стилей до значений, взятых из веб-стандартов;
- возврат значений свойств, установленных в браузере;
- что можно сделать с прыжками контента при открытии и закрытии модального окна;
- возможность отобразить текст «красиво» с помощью ключевого слова
system-ui; - способ стилизации элементов на языке, отличающимся от основного.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Автоматизировать LinkedIn за месяц без команды разработчиков? Легко! Делюсь своей историей
Простой
5 мин
Кейс
Привет, меня зовут Леша Шамшур, я разработчик ПО LiSeller. Еще недавно я думал, что разработка IT-продукта стоит денег — от 4–5 млн рублей в месяц, и собрать приличный MVP «на коленке» не получится. Но оказалось, что реализацию любого стартапа можно сильно удешевить благодаря low-code-инструментам.
Да, разработчики скептически относятся к таким инструментам, отдавая предпочтение классическому коду, но они идеальны для быстрой проверки гипотезы. Например, у меня от идеи до реализации MVP прошел всего месяц. В статье расскажу, что получилось реализовать и как сильно low-code помог сэкономить деньги и время.
Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях
9 мин
Перевод
Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука
useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация.
Когда проснулся и узнал, что существуют PWA
Простой
8 мин
Туториал
Всем привет. Меня зовут Антон, я фронтендер в Сбере. Если вы ещё не осваивали технологию PWA, но хотели бы — или вдруг срочно понадобилось, — то я вам помогу и объясню, что это и как начать с ней работать.
await vs yield на примере Effection 3.0 и React
Средний
11 мин
18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).
В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:
- Race condition
- AbortController
- Clean up
- Debounce
Bitcoin in a nutshell — Cryptography
12 мин
Одна из причин, почему Bitcoin продолжает привлекать столько внимания — это его исключительная «математичность». Сатоши Накамото удалось создать систему, которая способна функционировать при полном отсутствии доверия между ее участниками. Все взаимодействия основаны на строгой математике, никакого человеческого фактора — вот в чем была революционность идеи, а не в одноранговой сети, как многие думают. Поэтому первую главу я решил посвятить именно математическим основам Bitcoin.
Ниже я постараюсь объяснить вам самые базовые вещи — эллиптические кривые, ECC, приватные / публичные ключи и так далее. По возможности я буду иллюстрировать свои слова примерами кода, преимущественно на Python 2.7, если что-то непонятно — спрашивайте в комментариях.
Ниже я постараюсь объяснить вам самые базовые вещи — эллиптические кривые, ECC, приватные / публичные ключи и так далее. По возможности я буду иллюстрировать свои слова примерами кода, преимущественно на Python 2.7, если что-то непонятно — спрашивайте в комментариях.
Анимации CSS, основанные на времени
Простой
4 мин
Обзор
Перевод
В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.
После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.
React Conf 2024. React v19
6 мин
Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.
В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.
Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.
Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display
Средний
10 мин
Обзор
Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»
Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.
Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.
А теперь переходим к статье.
Руководство по Next.js. 1/3
Средний
45 мин
Обзор
Hello world!
Представляю вашему вниманию первую часть обновленного руководства по Next.js.
На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.
Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.
Обратите внимание: руководство актуально для Next.js версии 14.
При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉
Парочка полезных ссылок:
Вам не нужен для этого JavaScript
Средний
11 мин
Мнение
Перевод
Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю
▍ Правило наименьших полномочий
Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.
В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.
В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.
Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.
Анимация в браузерах и как с ней работать
Средний
10 мин
Кейс
Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.
Месячная аудитория ОК достигает 36 млн пользователей, и почти половина из них заходит в соцсеть из браузеров — как мобильных, так и десктопных. Поэтому для нас важно, чтобы сайт со всей графикой хорошо работал на любом устройстве и в любом формате. Непрерывная работа над этой задачей позволила нам выработать экспертизу, которой мы готовы поделиться.
Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации.
Коллекция утилит NestJS-mod для унификации приложений и модулей на NestJS
Средний
18 мин
Обзор
Коллекция утилит NestJS-mod предназначена для унификации приложений и модулей NestJS, а также представляет новые логические возможности разделения обязанностей между модулями (System, Core, Feature, Integration, Infrastructure).
Полное руководство по Remix. Часть 1
Средний
50 мин
Обзор
Привет, друзья!
В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.
Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:
- почти весь код приложения "живет" на сервере;
- приложение остается функциональным даже при отсутствии JS;
- JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).
Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.
Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.
К слову, здесь вы найдете полное руководство по Next.js.
В первой части мы пройдемся по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.
Это часть номер раз.
Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево
Сложный
19 мин
В сети можно найти огромное количество статей, мануалов и книг по основам React, включая официальную документацию от разработчиков. В этой статье мы не будем писать HelloWorld и изучать общеизвестные концепции. Сегодня мы заглянем под капот библиотеки и попытаемся понять, как она устроена внутри, как хранит данные, и как, на самом деле выглядит её виртуальное дерево.
На момент написания статьи, последняя стабильная версия React 18.2.0. За 10 лет разработчики Facebook проделали колосальный объем работы, было реализовано много фич и сделано не мало оптимизаций. За эти годы, так же, происходили и кардинальные архитектурные изменения. Очевидно, одной статьи мало, чтобы покрыть всю механику React, поэтому, данная публикация станет первой в серии статей о внутреннем устройстве React. Здесь мы познакомимся с основными сущностями и архитектурными решениями.
Иерархическая генерация ключей
16 мин
В этой статье мы поговорим о детерминистических кошельках, иерархической генерации ключей, а также о том, как это математически работает и в каких случаях это удобно применять на практике. Данный материал будет полезен специалистам, чья деятельность связана с платежными шлюзами, Биткоин кошельками и другими хранилищами монет. Кроме того, материал будет интересен тем, кто увлекается эллиптической криптографией и схемами развертывания ключей электронной подписи.
Дизайн и математика игр-кликеров
25 мин
Перевод
Инкрементные игры потрясающи и загадочны. Кажется, что они нарушают привычную логику хорошего геймдизайна, и тем не менее, им удаётся привлекать солидную базу игроков. Давайте изучим их более подробно, чтобы раскрыть их секрет.
Что такое инкрементная игра?
Игрок нажимает на кнопку, число увеличивается. Нажимает снова, число снова увеличивается. Игрок продолжает нажимать, и постепенно разблокирует функцию, увеличивающую число за игрока. Числа растут, даже когда вы не играете. И этот процесс повторяется вечно.
В сущности, такова общая структура «инкрементной» игры. Она кажется простой, даже примитивной, но в игровом процессе есть неожиданная глубина и привлекательность. Стили игры могут быть разными — от коммерчески успешных и казуальных Clicker Heroes и AdVenture Capitalist до более экспериментальных или хардкорных примеров, таких как Candy Box, Cookie Clicker и Sandcastle Builder.
Cookie Clicker, самое начало.
Что же самое важное в инкрементной игре? Хотя в этом жанре есть множество вариаций и экспериментов, фундаментальными аспектами дизайна являются:
- наличие хотя бы одной валюты или числа,
- которые увеличиваются с заданной скоростью с минимальными усилиями, или вообще без усилий,
- и которые можно тратить на увеличение скорости прироста.
Именно цикл накопления, реинвестиций и ускорения определяет основы жанра и отличает его от игр, в которых присутствует просто увеличивающийся счёт. Например, в примечательной Cookie Clicker игрок стремится к росту количества «печенек», которое изначально увеличивается нажатием на огромное печенье, а потом тратит печенье на покупку апгрейдов, позволяющих создавать ещё больше печенья.
Как настроить push-уведомления в Safari на iOS
Средний
5 мин
Привет! В этой статье мы разберемся, как отправлять push-уведомления пользователям iOS, даже если ваше приложение временно недоступно в App Store. С выходом Safari 16.4, появилась возможность получать уведомления в Progressive Web Apps (PWA)