Articles / Bookmarks / Profile of siandreev / Habr

Sergey Andreev @siandreev

Frontend developer

Profile Publications 1Comments 6Bookmarks 207

melnik909 Aug 27 at 12:00

Неизвестно полезный CSS. Часть 4

Medium

6 min

7.8K

RUVDS.com corporate blogWebsite development*CSS*

Tutorial

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах.

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

Сегодня мы рассмотрим:

сброс стилей до значений, взятых из веб-стандартов;
возврат значений свойств, установленных в браузере;
что можно сделать с прыжками контента при открытии и закрытии модального окна;
возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
способ стилизации элементов на языке, отличающимся от основного.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →

+53

Deathsslave Aug 20 at 09:53

Автоматизировать LinkedIn за месяц без команды разработчиков? Легко! Делюсь своей историей

Easy

5 min

3.4K

Node.JS*

Case

Привет, меня зовут Леша Шамшур, я разработчик ПО LiSeller. Еще недавно я думал, что разработка IT-продукта стоит денег — от 4–5 млн рублей в месяц, и собрать приличный MVP «на коленке» не получится. Но оказалось, что реализацию любого стартапа можно сильно удешевить благодаря low-code-инструментам.

Да, разработчики скептически относятся к таким инструментам, отдавая предпочтение классическому коду, но они идеальны для быстрой проверки гипотезы. Например, у меня от идеи до реализации MVP прошел всего месяц. В статье расскажу, что получилось реализовать и как сильно low-code помог сэкономить деньги и время.

+24

ph_piter Jun 26 at 16:21

Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях

9 min

7.8K

Издательский дом «Питер» corporate blogHigh performance*JavaScript*Programming*

Translation

Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация.

Читать дальше →

+22

Sber Jun 11 at 12:35

Когда проснулся и узнал, что существуют PWA

Easy

8 min

14K

Сбер corporate blogWebsite development*Development of mobile applications*

Tutorial

Всем привет. Меня зовут Антон, я фронтендер в Сбере. Если вы ещё не осваивали технологию PWA, но хотели бы — или вдруг срочно понадобилось, — то я вам помогу и объясню, что это и как начать с ней работать.

+32

aantrue Jun 3 at 10:30

await vs yield на примере Effection 3.0 и React

Medium

11 min

7.9K

JavaScript*ReactJS*TypeScript*

From sandbox

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

+20

Pavlov_dog Jan 18 2017 at 16:41

Bitcoin in a nutshell — Cryptography

12 min

119K

Cryptography*Python*Programming*Billing systems*

Одна из причин, почему Bitcoin продолжает привлекать столько внимания — это его исключительная «математичность». Сатоши Накамото удалось создать систему, которая способна функционировать при полном отсутствии доверия между ее участниками. Все взаимодействия основаны на строгой математике, никакого человеческого фактора — вот в чем была революционность идеи, а не в одноранговой сети, как многие думают. Поэтому первую главу я решил посвятить именно математическим основам Bitcoin.

Ниже я постараюсь объяснить вам самые базовые вещи — эллиптические кривые, ECC, приватные / публичные ключи и так далее. По возможности я буду иллюстрировать свои слова примерами кода, преимущественно на Python 2.7, если что-то непонятно — спрашивайте в комментариях.

intro

Читать дальше →

+33

LkiZt May 18 at 16:20

Анимации CSS, основанные на времени

Easy

4 min

4.7K

Web design*Website development*CSS*Programming*HTML*

Review

Translation

Демонстрация анимаций

В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.

После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.

+16

Vordgi May 16 at 07:23

React Conf 2024. React v19

6 min

9.2K

Website development*JavaScript*ReactJS*Conferences

Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.

В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.

Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.

+11

melnik909 Apr 23 at 16:00

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

Medium

10 min

10K

RUVDS.com corporate blogWebsite development*CSS*Studying in IT

Review

Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»

Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.

Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.

А теперь переходим к статье.

Читать дальше →

+53

aio350 Apr 16 at 11:01

Руководство по Next.js. 1/3

Medium

45 min

16K

Timeweb Cloud corporate blogWebsite development*JavaScript*ReactJS*

Review

Hello world!

Представляю вашему вниманию первую часть обновленного руководства по Next.js.

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

Читать дальше →

+19

ru_vds Dec 11 2023 at 16:00

Вам не нужен для этого JavaScript

Medium

11 min

29K

RUVDS.com corporate blogWeb design*CSS*JavaScript*HTML*

Opinion

Translation

Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю ~~JSX~~ HTML. Я люблю все эти три технологии по причине, которая называется…

▍ Правило наименьших полномочий

Это один из базовых принципов веб-разработки, означающий, что следует выбирать наименее мощный язык, подходящий для решения задачи.

В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.

Читать дальше →

+93

chikuyonok Feb 16 at 12:45

Анимация в браузерах и как с ней работать

Medium

10 min

6.1K

ОК corporate blogVK corporate blogWebsite development*Browsers

Case

Многие разработчики умеют создавать красивые и плавные анимации, но далеко не все понимают, как на самом деле они работают и что происходит «под капотом» браузера в момент их отрисовки и запуска. Вместе с тем, работа с анимацией без знания основных нюансов нередко заканчивается появлением лагов и чрезмерным потреблением ресурсов.

Месячная аудитория ОК достигает 36 млн пользователей, и почти половина из них заходит в соцсеть из браузеров — как мобильных, так и десктопных. Поэтому для нас важно, чтобы сайт со всей графикой хорошо работал на любом устройстве и в любом формате. Непрерывная работа над этой задачей позволила нам выработать экспертизу, которой мы готовы поделиться.

Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации.

+43

kaufmanendy Jan 25 at 13:30

Коллекция утилит NestJS-mod для унификации приложений и модулей на NestJS

Medium

18 min

2.8K

Node.JS*API*TypeScript*NestJS*Nx*

Review

From sandbox

Коллекция утилит NestJS-mod предназначена для унификации приложений и модулей NestJS, а также представляет новые логические возможности разделения обязанностей между модулями (System, Core, Feature, Integration, Infrastructure).

aio350 Feb 17 2023 at 11:01

Полное руководство по Remix. Часть 1

Medium

50 min

9.8K

Timeweb Cloud corporate blogWebsite development*JavaScript*ReactJS*TypeScript*

Review

Привет, друзья!

В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.

Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:

почти весь код приложения "живет" на сервере;
приложение остается функциональным даже при отсутствии JS;
JS используется только для прогрессивного улучшения UX (User Experience — пользовательский опыт).

Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.

Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.

К слову, здесь вы найдете полное руководство по Next.js.

В первой части мы пройдемся по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.

Это часть номер раз.

Часть номер два.

Читать дальше →

+14

Parker0 Jan 12 at 20:20

Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево

Hard

19 min

20K

Website development*ReactJS*

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

На момент написания статьи, последняя стабильная версия React 18.2.0. За 10 лет разработчики Facebook проделали колосальный объем работы, было реализовано много фич и сделано не мало оптимизаций. За эти годы, так же, происходили и кардинальные архитектурные изменения. Очевидно, одной статьи мало, чтобы покрыть всю механику React, поэтому, данная публикация станет первой в серии статей о внутреннем устройстве React. Здесь мы познакомимся с основными сущностями и архитектурными решениями.

+14

DistributedLab Jun 8 2018 at 15:33

Иерархическая генерация ключей

16 min

45K

Distributed Lab corporate blogInformation Security*Cryptography*Payment systems*Cryptocurrencies

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

Читать дальше →

+10

PatientZero Sep 6 2017 at 12:24

Дизайн и математика игр-кликеров

25 min

90K

Game development*

Translation

Инкрементные игры потрясающи и загадочны. Кажется, что они нарушают привычную логику хорошего геймдизайна, и тем не менее, им удаётся привлекать солидную базу игроков. Давайте изучим их более подробно, чтобы раскрыть их секрет.

Что такое инкрементная игра?

Игрок нажимает на кнопку, число увеличивается. Нажимает снова, число снова увеличивается. Игрок продолжает нажимать, и постепенно разблокирует функцию, увеличивающую число за игрока. Числа растут, даже когда вы не играете. И этот процесс повторяется вечно.

В сущности, такова общая структура «инкрементной» игры. Она кажется простой, даже примитивной, но в игровом процессе есть неожиданная глубина и привлекательность. Стили игры могут быть разными — от коммерчески успешных и казуальных Clicker Heroes и AdVenture Capitalist до более экспериментальных или хардкорных примеров, таких как Candy Box, Cookie Clicker и Sandcastle Builder.

Cookie Clicker, самое начало.

Что же самое важное в инкрементной игре? Хотя в этом жанре есть множество вариаций и экспериментов, фундаментальными аспектами дизайна являются:

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

Именно цикл накопления, реинвестиций и ускорения определяет основы жанра и отличает его от игр, в которых присутствует просто увеличивающийся счёт. Например, в примечательной Cookie Clicker игрок стремится к росту количества «печенек», которое изначально увеличивается нажатием на огромное печенье, а потом тратит печенье на покупку апгрейдов, позволяющих создавать ещё больше печенья.

Читать дальше →

+53

u4aew Oct 16 2023 at 09:01

Как настроить push-уведомления в Safari на iOS

Medium

5 min

Website development*JavaScript*Development for iOS*ReactJS*

From sandbox

Привет! В этой статье мы разберемся, как отправлять push-уведомления пользователям iOS, даже если ваше приложение временно недоступно в App Store. С выходом Safari 16.4, появилась возможность получать уведомления в Progressive Web Apps (PWA)

Fines_Unes Sep 30 2023 at 00:37

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов

Easy

3 min

7.1K

JavaScript*Programming*ReactJS*TypeScript*Text editors and IDEs*

Tutorial

В статье рассмотрим как создавать шаблоны в продуктах Jesbrains (WebStorm, PhpStorm, Intellij, PyCharm).

+11

nin-jin Sep 15 2023 at 16:32

Натальная травматология фронтенда S1 E1-14

Easy

3 min

6.7K

Website development*CSS*JavaScript*System Analysis and Design*ReactJS*

Digest

Здравствуйте, меня зовут Дмитрий Карловский, и меня хлебом не корми, а дай поиздеваться над хайповыми технологиями. И сейчас я расскажу вам, как я провёл лето.

В этом сезоне ко мне на операционный стол попались разные JS, CSS и тест фреймворки да методологии, менеджеры состояний и потоков исполнения, коллекции виджетов и даже приложений. Приготовьтесь, далее вас ждёт целых 32 часа отборного кринжа!

Погрузится в эпидерсию

2 3 ...

10 11