Обновить
380.93

Веб-разработка *

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Лучшие техники ревью кода

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели16K

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

Читать далее

ChatGPT, энсин Дейта на побегушках

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели3.1K

Привет, меня зовут Лиза, я веб-разработчик в отделе маркетинга ispmanager. Поделюсь здесь своими впечатлениями от GPT-чата — нейросети, которая облегчает написание кода, пишет посты и выдаёт краткие ответы на любые вопросы. 

Суперсила GPT в том, что он остаётся в контексте запроса: задания можно дополнить или уточнить, не повторяя с нуля уже сказанное. Мне захотелось проверить, как чат справится с просьбой создать полноценную страницу с разметкой, стилями и скриптом, а не просто отдельную функцию. Сервис не работает в России, но в интернете уже достаточно статей, рассказывающих, как пробиться к популярной нейросети. Запросы лучше формулировать на английском языке, с ним GPT работает лучше всего. К тому же это поможет попрактиковаться в построении фраз на английском.

Для начала спросила в чате, с какими задачами веб-разработки мне может помочь GPT.

Читать далее

Главное из мира Python за январь 2023

Время на прочтение3 мин
Охват и читатели5.8K

Раз в месяц мы в Moscow Python Podcast собираемся и обсуждаем новые релизы, PEP, заинтересовавшие нас инструменты и статьи. Под катом — текстовая выжимка из обсуждения.

Читать далее

Баг Safari, которого никогда не было

Время на прочтение5 мин
Охват и читатели3.2K
В октябре 2021 года мой коллега-разработчик Иэн опубликовал сообщение в канале поддержки GOV.UK Design System в Slack:

«Интересно, а кто-нибудь заметил, что Safari Technology Preview как-то странно влияет на заголовок, баннер бета-версии и кнопки сайта?»

Safari Technology Preview — это версия браузера Safari для «предварительного ознакомления с будущими веб-технологиями в macOS и iOS». Большинство создателей браузеров предоставляет подобные версии своих браузеров, чтобы разработчики могли тестировать новые функции.

После сообщения Иэна мы посмотрели на Design System в Safari Technology Preview.


Мы действительно увидели странное поведение заголовка, баннера бета-версии и кнопок, о которых говорил Иэн. Последнее слово в каждом из этих элементов переносилось на новую строку, хотя это и не было необходимо.
Читать дальше →

ChatGPT показала 5 тысяч самых опасных файлов, с помощью которых можно легко взламывать сайты

Время на прочтение3 мин
Охват и читатели21K

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

Читайте, что из этого получилось.

Подробнее

Разработка клиент-серверного приложения с помощью Next.js и TypeScript. Часть 2. Разработка клиента

Уровень сложностиСложный
Время на прочтение33 мин
Охват и читатели13K


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


В этой серии из 2 статей-туториалов мы с вами продолжаем разрабатывать клиент-серверное (фуллстек — fullstack) приложение с помощью Next.js и TypeScript.



  1. Наше приложение будет представлять собой блог — относительно полноценную платформу для публикации, редактирования и удаления постов.
  2. Мы реализовали собственный сервис аутентификации на основе JSON Web Tokens и HTTP-куки.
  3. Данные пользователей и постов будут храниться в реляционной базе данных SQLite.

В первом туториале мы подготовили и настроили проект, а также реализовали серверную часть приложения с помощью интерфейса роутов (API Routes), во втором — разработаем клиента и проверим работоспособность приложения.


Обратите внимание: данный туториал рассчитан на разработчиков, которые имеют некоторый опыт работы с React и Node.js.


Для тех, кого интересует только код, вот соответствующий репозиторий.


Интересно? Тогда прошу под кат.

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

CSS-селектор :has() и междустрочные интервалы в длинных текстах

Время на прочтение6 мин
Охват и читатели4.7K


Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д.

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

Масштабирование SSR-приложений

Время на прочтение8 мин
Охват и читатели5.9K

Привет! Меня зовут Олег Драпеза, я работаю техлидом в Тинькофф в команде Coretech Frontend. Мой основной проект — SSR мета-фреймворк tramvai, на котором работают несколько десятков фронтовых приложений Тинькофф.

Сегодня хочется поговорить про масштабирование SSR-приложений. С SSR есть две проблемы: React и Node.js. Они же — сильные стороны подхода, потому что предоставляют отличный DX, общий код и хорошие возможности для поддержки frontend-разработчиками. Разберемся, с какими сложностями мы можем столкнуться при использовании React и Node.js и как с ними быть. 

Читать далее

Собираем логи веб-приложений в Kibana/Loki

Время на прочтение7 мин
Охват и читатели14K

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Расскажу вам о том, как мы на нашем проекте МТС Твой бизнес собираем логи с клиентских веб‑приложений. А еще обсудим вспомогательный микросервис логирования, который мы вывели в Open source, и поговорим о том, как устроено логирование в принципе.

Читать далее

Выявляем волков в овечьей шкуре среди пользователей сайта

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели14K

Привет, Хабр. Я в свободное время развиваю свой небольшой сайт — платформу для ведения личных дневников. Похож на ЖЖ или Дайри, но более современный и молодежный, полузакрытый, уютный. И у нас есть необходимость отслеживать, когда пользователи создают себе дополнительные аккаунты. В этом посте хочу поделиться своими идеями и опытом, как это у нас реализовано.

Читать далее

Как я написала веб-плеер с искусственным интеллектом

Время на прочтение10 мин
Охват и читатели6.3K


Идея создать собственный веб-плеер с музыкой лоу-фай пришла мне в голову однажды воскресным днём во время изучения глубоких генеративных моделей. Я занялась этим проектом и закончила его за время каникул. Веб-плеер имеет две опции: пользователи могут выбрать трек лоу-фай на основе реальной песни, преобразованной с помощью библиотеки Tone.js, или трек, сгенерированный искусственным интеллектом. В обоих случаях поверх накладываются барабанные ритмы, атмосферные звуки и цитаты, которые пользователь сам выбрал на предыдущем шаге. В этом посте речь пойдёт в основном о том, как использовать нейросети LSTM для генерации midi-треков, а в конце я кратко расскажу о том, как с помощью Tone.js создаются песни.

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

Зачем идти в full-stack в 2023-м году?

Время на прочтение7 мин
Охват и читатели20K

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

Читать далее

REcollapse: фаззинг с использованием unicode-нормализации

Уровень сложностиСложный
Время на прочтение6 мин
Охват и читатели4.4K

В этом посте я расскажу о технике REcollapse. Я изучал её последние пару лет, чтобы обнаружить до странности простые, но эффективные уязвимости в защищённых объектах. Эта техника может быть использована для захвата учётных записей с нулевым взаимодействием, обнаружения новых обходных путей для брандмауэров веб-приложений и многого другого.

Этот пост преимущественно основан на моём выступлении на BSidesLisbon 2022 и посвящён запуску инструмента REcollapse, который теперь доступен на GitHub. Это также то, что мы начали исследовать внутри Ethiack.

Всё начинается с непредвиденного ввода.

?

Ближайшие события

Git scraping: методика бесплатного хостинга не совсем статических сайтов

Уровень сложностиСредний
Время на прочтение21 мин
Охват и читатели14K

Ни для кого не секрет, что, используя GitHub Pages, вы можете бесплатно разместить свой статический веб-сайт в сети Интернет. 1 Гбайт доступного пространства, SSL-сертификат, возможность привязать собственный домен — разве не сказка? Но что делать, если вам необходимо, чтобы содержимое вашего статического ресурса периодически обновлялось? Допустим, несколько раз в час.

Пути решения уже существуют, и в этой статье я расскажу об одном из них. Вооружившись GitHub Actions в качестве среды выполнения и отдельной веткой Git-репозитория в качестве хранилища, мы организуем автоматизированный пайплайн получения, обработки и отображения малых неконфиденциальных данных, который будет ежемесячно нам обходиться в целых 0 рублей.

Читать далее

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

Время на прочтение10 мин
Охват и читатели8.3K

«Микрофронтенды в компании, которая доставляет пиццу? Серьёзно? Зачем? Да и куда? У вас же всего лишь приложенька с каталогом и заказом товара. Какие ещё микрофронтенды?»

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

Читать далее

Топ рекомендаций по Core Web Vitals на 2023 год

Время на прочтение11 мин
Охват и читатели12K


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


Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.


Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.


Web Vitals — это инициатива Google, цель которой — предоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете (источник).


Интересно? Тогда прошу под кат.

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

Подборка материалов для погружения в Angular: выбор сотрудников Selectel

Время на прочтение3 мин
Охват и читатели14K

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

Понять TypeScript c помощью теории множеств

Время на прочтение9 мин
Охват и читатели18K

Я пишу на TS уже довольно давно. Но некоторые вопросы все еще сбивают меня с толку: что такое never, и почему он так странно себя ведет? Чем отличаются any и unknown? Почему const x: {} = true — не ошибка?

Оказывается, если перевести TS на язык теории множеств, всё встанет на свои места!

Читать далее

JavaScript: заметка об операторе конвейера

Время на прочтение8 мин
Охват и читатели8.5K


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


В этой небольшой заметке я хочу рассказать вам об одном интересном предложении по дальнейшему совершенствованию всеми нами любого JavaScript, а именно: об операторе конвейера (pipe operator) |>.


На сегодняшний день данное предложение находится на 2 стадии рассмотрения. Это означает, что даже если все пойдет по плану, новый оператор будет стандартизирован года через два. Кроме того, синтаксис и возможности, о которых мы будем говорить, могут претерпеть некоторые изменения.


Если вам это интересно, прошу под кат.

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

Анимация грида в CSS

Время на прочтение4 мин
Охват и читатели13K

Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1.

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

Вклад авторов