Нашли для вас интересную новость из сферы финтеха

А именно — узнали, что ОТП Банк запустил TG-канал для айтишников. Команда строит финтех в международном банке и теперь можно узнавать прямо у них, как они это делают.

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

Прокачайте свою ленту крутым каналом: OTP Tech

Это #партнёрский пост

Читать полностью…

Как избежать утечек памяти в JavaScript

Скрытые утечки памяти — частая проблема, которая способна вызывать снижение производительности и даже ошибки в работе приложения.

В статье вы узнаете:
— Какие сценарии чаще всего становятся причиной утечек памяти.
— Как выявить эти ошибки и исправить их.
— Как тестировать сервер на высоких нагрузках, чтобы минимизировать риски.

Если вы работаете с JavaScript, эта информация будет полезна для оптимизации вашего кода. Подробнее:

https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript

#javascript

Читать полностью…

Как получить грант за мини-приложения

Популярность миниаппов растёт, ведь их легче писать, чем полностью самостоятельное приложение благодаря уже готовой инфаструктуре. Это снижает количество времени на разработки и порог входа. А ещё на этом можно заработать.

Например, недавно прошёл грантовый конкурс от VK, где 24 победителя получили более 5 млн рублей в качестве грантов. VK Fresh Code проходит уже пять лет и каждый может принять в нём участие.

Посмотреть какие проекты смогли получить грант и оценить свои силы вы можете здесь.

Лично нам понравились вот эти аппки:

— «Битва мемов». Тут можно надолго залипнуть в сражения с пользователями или ботом. А победит тот, кто выберет самые смешные мемы на предложенные ситуации.

— «Кино по факту». Ежё одна соревновательная апка. Тут вам в формате викторины нужно отгадывать хорошо знакомые фильмы по иногда очень нестандартным описаниям. Даже Титаник и Бойцовский клуб не всегда очевидны по описанию, проверьте сами.

Читать полностью…

И мерч отправляется...

Наконец-то подводим итоги конкурса. Борьба была жаркая, но с небольшим отрывом побеждает статья «Как пополнить кошелек Steam в 2024 году», и ее автор Виктор получает мерч от Tproger!

В декабре вы тоже можете выиграть наш приз — к мерчу добавим кое-что интересное!

Выбирайте тему из Флудильни и пишите статью месяца!

#tproger #конкурс

Читать полностью…

Однострочник или библиотека: спор жабы и гадюки или в этом есть смысл?

На Reddit появился тред, в котором обсуждается спор автора пакет is-number и разработчика, предложившего PR, заменяющий код пакет однострочником. Разработчик настаивает, что отказ от пакета сэкономить более 440 ГБ трафика в неделю, ведь помимо самого кода в библиотеке лежит ещё README, который занимает лишнее место.

Автор библиотек же назвал такое решение бесполезным, ведь его библиотеки протестированы и надёжны, а однострочник может могут быть небезопасны и нестабильны.

Более подробно познакомиться с сутью спора вы можете узнать в треде или в видео.

А как считаете вы?

Читать полностью…

Привет, на связи админ

Ситуация такая: ко мне пришёл знакомый, который вкатывается во фронтенд-разработку и спросил, что из фреймворков сейчас стоит изучать. Понятно, что не устаревший jQuery, но вариантов ведь действительно много.

Поэтому я пришёл к вам, чтобы узнать ваше мнение. Что используете вы и что бы вы посоветовали новичку? Может Vue с его HTML-подобным синтаксисом или React, а, может, вообще какой-нибудь Svelte? Поделитесь в комментариях, что на ваш взгляд лучше сейчас и почему 👇

#обсуждение #фронтенд

Читать полностью…

Когда облако превращается в шторм: самая громкая кибератака на знаменитостей

The Fappening — взлом, который перевернул интернет и заставил знаменитостей бояться своих телефонов.

Тогда их интимные фото утекли в сеть, а хакеры доказали, что облачные хранилища не так безопасны, как казалось.

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

В новом выпуске «АЙТИ КРАЙМ» мы разобрали одну из самых дерзких атак цифровой эпохи.

Слушайте и смотрите новый выпуск:

Яндекс.Музыка
Apple Music
Spotify
YouTube
Telegram

#подкаст #айтикрайм

Читать полностью…

Состоялся релиз React 19

Адепты React, ликуйте! Новая версия принесла множество полезных улучшений:

— улучшения серверных компонентов позволяют уменьшить время первоначальной загрузки страницы, переносимость кода и SEO;
— новые директивы, позволяющие отслеживать, где выполняется код — на сервере или на клиенте;
— функции-операции, заменяющие собой обработчики событий;
— три новых хука;
— обновление в API и многое другое.

Со всеми изменениями, нововведениями и улучшения можно познакомиться тут.

#новости #react

Читать полностью…

Как создать свой шрифт прямо в браузере

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

Чтобы сделать свой шрифт вам понадобится сайт typlr.app. Этот инструмент позволяет настраивать форму и кернинг для каждой буквы. Здесь очень простой и интуитивно понятный интерфейс, так что справится даже новичок.

А ещё его также можно установить как PWA на ваш компьютер. Пробуем тут: typlr.app

#инструменты #фронтенд #дизайн

Читать полностью…

Давайте голосовать, подсказывайте!

Помните, мы обещали, что автор лучшей статьи месяца получит наш мерч? Теперь пришло время выбрать победителя! Мы определили три лучших материала за ноябрь, но решать вам.

Здесь можно с ними ознакомиться, а следующим постом будет опрос:
1) Django vs FastAPI в 2025 году: какой фреймворк выбрать?
2) Гайд: как настроить API для распознавания документов за 30 минут
3) Как пополнить кошелёк Steam в России в 2024 году

Автор статьи, набравшей больше всего голосов, получит наш фирменный мерч. Голосуйте — завтра подведём итоги!

#конкурс #tproger

Читать полностью…

Весь год вы фиксили баги и деплоили проекты… Пришло время расслабиться и начать создавать себе новогоднее настроение!

Tproger вместе с друзьями приготовил для вас Виммельбух. Открывайте первую главу, рассматривайте детализированную карту и узнавайте, чем живёт технологичный город в новогоднюю пору: https://tprg.ru/sqjF

А ещё на улицах города мы спрятали предметы… Сможете найти все?  

Реклама, ИП Михайлишина Гузель Фаниловна, erid: LjN8KaGoC

Читать полностью…

10 инструментов для облегчения backend-разработки

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

Сегодня вы познакомитесь с 10 инструментами, которые сделают backend-разработку проще. Среди них:

— Encore. Фреймворк для TypeScript и Go, облегчающий создание надежных и типобезопасных приложений.
— Cursor. Форк VSCode с ИИ-функциями для программирования и генерации кода.
— Datadog. Сервис мониторинга инфраструктуры для любого стека и масштабируемости.
— Copycat. Генератор детерминированных фейковых данных для тестирования API.
— Infisical. Платформа для управления секретами с централизованным хранением данных.

Ознакомиться со всем список и узнать подробности можно по ссылке.

#бэкенд

Читать полностью…

Скрытые возможности элемента input

Большинство собратьев элемента input вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

Читать полностью…

Портируем олдскульную головоломку в веб с использованием LLM и Midjourney для бати

Помните этот старый маджонг с покемонами? Я вот в своё время вдоволь наигрался в неё.

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

#gamedev

Читать полностью…

Верстка сайта по макету из Figma без Dev Mode в бесплатной версии

Как вы знаете, бесплатно сейчас работать в DEV-режиме фигмы уже нельзя. Но если денег на подписку у вас нет или просто жалко, а макет уже ждёт, то всё-таки кое-что можно сделать.

В этом видео вы узнаете, как правильно переносить элементы дизайна из бесплатной версии Figma на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете.

#видео #урок #figma #фронтенд

Читать полностью…

Энтузиаст создал сортировку имени Сталина

Нет, правда! Она так и называется «Милосердная сортировка имени Сталина». И это доработанная версия обычной сортировки имени Сталина, которая отбрасывает элементы, расположенные не по порядку.

В новой сортировке применён рекурсивный метод. Здесь элементы, расположенные по-порядку, сохраняются, а остальные рекурсивно перебираются, пока не будет отсортировано всё.

После всех измерений оказалось, что такой метод быстрее, чем быстрая сортировка и сортировка слиянием.

Более подробно о своём проекте и исследовании рассказал автор на GitHub. Там и про различные бенчмарки, и про сложности с реализацией, и возможные улучшения. Материал интересный и полезный, так что не поленитесь перейти по ссылке и почитать.

#ненормальноепрограммирование #сортировка

Читать полностью…

Светлый и тёмный режим в 14 строках CSS

Тёмный и светлый режим — базовая фича любого современного сайта. Думаете, для её реализации придётся писать тонны кода? Ошибаетесь!

В этой статье вы узнаете, как настроить смену тем всего с 14 строками CSS. Пошаговое руководство, практичные примеры и никакой лишней теории.

А какой режим предпочитаете вы и почему тёмный круче? Напишите в комментариях.

#css #фронтенд

Читать полностью…

HTTP и SQL — базовые технологии для вёрстки сайта

Читать полностью…

Машинное обучение на JavaScript

Заняться машинным обучением можно даже, если вы не знакомы с Python. Для этого у JS есть библиотека ml5.js, которая построена на основе TensorFlow.js.

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

#javascript #ml #видео

Читать полностью…

Как сделать условный border-radius в CSS

Хотите узнать технику, которая позволяет автоматически настраивать border-radius для карточного компонента в зависимости от размеров экрана?

Вам потребуется прописать одну хитрую формулу. О ней, а также способе её применения рассказали в этой статье.

#фронтенд #css

Читать полностью…

Redux для новичков: база, с которой можно стартовать

Redux — это библиотека для управления состоянием приложения. Главный принцип Redux — один источник правды. Все данные приложения хранятся в одном месте — в store.

В этой статье вы узнаете, как она работает, в каких случаях применяется, с какими библиотеками и фреймворками совместима и как начать её использовать в своих проектах.

#фронтенд #redux

Читать полностью…

Как спрятать любые данные в PNG

PNG хранит цвет и прозрачность пикселей, и с помощью младших бит (LSB) можно зашифровать данные так, что никто ничего не заметит. Даже размер картинки останется практически тем же.

Внутри PNG можно спрятать текст, файлы или даже запихнуть все свои пароли в фото любимого кота. Тут уже всё зависит от фантазии!

А как это сделать, читайте в статье.

#стеганография #js

Читать полностью…

Используем JS для поиска ликвидных облигаций

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

Чтобы вы могли сделать это быстрее и проще, автор этого материала подготовил специальный скрипт, работающий с API Московской биржи, который находит такие активы. Подробнее по ссылке.

#javascript

Читать полностью…

Берите на заметку. Особенно актуально на Новый Год

Читать полностью…

Создатель JSON раскритиковал использование ИИ

Дуглас Крокфорд на своей странице в LinkedIn жёстко прошёлся по тому, как человечество использует искусственный интеллект сегодня.

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

Также у гуру JavaScript есть претензии к качеству материалов, по которым ИИ учится. Часто это неправильный или токсичный контент.

Более подробно можно прочитать здесь. А вы согласны с ним?

#новости

Читать полностью…

SSE vs WebSocket: разобрались, что где лучше работает

В вебе есть множество способов обмена данными. Но наиболее популярные из них сегодня — SSE и WebSocket. При этом у них есть кардинальные различия. Например, SSE это односторонняя технология для общения сервера с клиентом, в то время как WebSocket позволяет взаимодействовать им в двухстороннем режиме.

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

#sse #websocket

Читать полностью…

Создаём анимацию при скролле на HTML, CSS и JS

Анимация при прокрутке (скролле) страницы может быть очень эффектной, а иногда и полезной для вашего сайта. В этом видео вы пошагово научитесь анимировать элементы при прокрутке страницы без тяжелых библиотек, используя только HTML, CSS и JavaScript.

#видео #фронтенд

Читать полностью…

Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

#инструменты #css

Читать полностью…

Эффект матового стекла для веба

Разработчик, участвовавший в создании игр Forza, так вдохновился их элементами дизайна, что решил повторить их с помощью HTML. Конечно, без CSS тут тоже не обошлось, а где-то даже потребовался JS, но результат получился отличным.

Своим опытом и готовым проектом автор поделился в статье.

#html #css #ui

Читать полностью…

Простыми словами: Что такое Virtual DOM в React

Если вы изучаете React, наверняка слышали о Virtual DOM, который делает React быстрым. Давайте разберёмся, как это работает.

Что такое DOM?

DOM — это модель страницы, где каждый элемент HTML представлен как объект в дереве:

<div>
  <h1>Hello!</h1>
  <p>React is awesome</p>
</div>

В DOM:

div
├── h1
└── p

Когда вы изменяете, например, текст в <p>, браузер обновляет весь DOM, что может быть медленно для больших страниц.

Что такое Virtual DOM

Virtual DOM — это копия реального DOM, которая существует в памяти.

Как это решает проблему обновления DOM для больших страниц:
— React сначала обновляет Virtual DOM.
— Затем сравнивает новый Virtual DOM с предыдущей версией (diffing).
— После этого изменяет только нужные части реального DOM, а не всё дерево.

Это намного быстрее, чем манипуляции с реальным DOM.

Пример Virtual DOM в деле

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Счётчик: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Когда изменяется count, React обновляет только текст в <h1>, остальные элементы (<div> и <button>) остаются нетронутыми.

Зачем это нужно?

— Быстрая работа: только новые или изменённые части DOM обновляются.
— Простота кода: больше фокус на логике, меньше на оптимизации.
— Сложные интерфейсы становятся лёгкими: React справляется даже с большими приложениями.

Подведём итог

Virtual DOM — это умная копия DOM, которая работает в памяти, сравнивает изменения и обновляет только то, что нужно. Благодаря этому React становится быстрым, простым и мощным.

Напишите в комментариях понравился ли вам формат и про что ещё хотели бы узнать.

#простымисловами #react

Читать полностью…