Как стать автором
Обновить
344.51

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

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

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

Мой ТОП-5 лучших CSS-in-JS решений

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров1K

В одном из проектов мне нужно было создать сложную админку для крупного клиента. Интерфейс требовал большо количества интерактивностей, а также поддержку различных тем и динамических стилей. Именно тогда я решил обратить свой взгляд на CSS-in-JS библиотеки, и это для меня стало большим открытием.

Ведь стилизация компонентов – основа для создания интуитивно понятных и эстетически приятных интерфейсов. И иногда традиционные методы стилизации, такие как CSS-файлы или препроцессоры, имеют свои ограничения и могут усложнять сам процесс разработки, чего мы точно не хотим.

Здесь вот и приходят на помощь решения CSS-in-JS, объединяющие фичи JS и CSS.

Читать далее
Всего голосов 4: ↑1 и ↓3-2
Комментарии3

Новости

Лучшие открытые курсы для изучения PHP с нуля

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров755

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

Не будем долго тянуть и рассказывать, что такое PHP, перейдем к списку курсов.

К списку курсов
Всего голосов 6: ↑4 и ↓2+5
Комментарии4

CSS-классы вредны

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров9.6K

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. Давайте изучим этот вопрос, начав со скучного урока истории, который вы уже слышали миллион раз.
Читать дальше →
Всего голосов 49: ↑43 и ↓6+53
Комментарии57

React Custom Hooks vs. Helper Functions — когда какой вариант использовать

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров954

При работе довольно часто приходится сталкиваться с различными технологиями и сценариями использования на ежедневной основе. Две популярные концепции - это React Custom Hooks и Helper functions. Концепция Helper functions существует уже очень давно, в то время как React Custom Hooks все еще достаточно современна. Обе концепции позволяют разработчикам абстрагироваться и повторно использовать код, который они пишут, разными способами, хотя они оба имеют немного разные сценарии использования.

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

Читать далее
Всего голосов 5: ↑0 и ↓5-5
Комментарии2

Истории

Как настроить аутентификацию через SMS и Flask для самых-самых ленивых пользователей

Время на прочтение7 мин
Количество просмотров2.2K

Привет, Хабр!

Сегодня мы по шагам расскажем, как подключить проверку пользовательских данных с помощью одноразового пароля по SMS. Для этого будем использовать платформу MTC Exolve и фреймворк Flask. Такой метод легко внедрить в свой проект и сделать работу с простыми личными кабинетами удобной и максимально ненапряжной для пользователей.

Читать далее
Всего голосов 10: ↑8 и ↓2+9
Комментарии6

Как создать бесшовную текстуру на angular без инструкций и примеров

Время на прочтение4 мин
Количество просмотров805

Привет, Хабр! Я Виталий Дуденко, разработчик в отделе пользовательских интерфейсов Первой грузовой компании. Наша компания занимается грузоперевозками по железной дороге. Для усовершенствования сервиса перевозок мы разрабатываем цифровые продукты, для которых необходимо создавать интерфейсы, например, для Личного кабинета клиента (ЛКК). Подробнее о нем мы рассказывали здесь.  

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

Читать далее
Всего голосов 1: ↑1 и ↓0+3
Комментарии3

Web components как альтернатива iframe на примере Angular-компонентов

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

Всем привет! Я Сергей, фронтенд-разработчик из команды привлечения Центрального университета. Занимаюсь проектами, связанными с регистрацией абитуриентов на мероприятия, и внутренними проектами по управлению мероприятиями. 

Осенью мы ждем поступление бакалавров. Чтобы начать набор, нужно встроить форму регистрации в лендинг на CMS. Форма довольно простая: пара полей для ввода данных, диалоговое окно с текстом соглашения об обработке персональных данных и кнопка отправки данных на сервер. Для скорости работы и проверки работоспособности идеи решили встроить приложение через iframe. Но форма стала обрастать различными бизнес-требованиями, которые приносили проблемы. В статье расскажу, с какими трудностями мы столкнулись и как их решали.

Читать далее
Всего голосов 9: ↑9 и ↓0+14
Комментарии10

Искусство сетапа: автоматизируем подготовку стека под новые проекты

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров1.6K

Привет, меня зовут Грант, я фронтенд-разработчик в KTS. В этой статье я хочу поделиться опытом заведения проектов от нашей команды.

Читать далее
Всего голосов 25: ↑25 и ↓0+27
Комментарии9

Реализация доступности веб-приложений с помощью Flutter

Время на прочтение8 мин
Количество просмотров1K

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

Читать далее
Всего голосов 8: ↑7 и ↓1+9
Комментарии2

Исследуя мир изображений: PicTrace и искусственный интеллект в действии

Уровень сложностиСложный
Время на прочтение5 мин
Количество просмотров784

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

Что же такое PicTrace и как эта платформа помогает решать такие задачи? Каким образом она использует мощь OpenCV и TensorFlow для обработки изображений? Почему сочетание структурного сравнения и ключевых точек делает мой подход интересным?

Читать далее
Всего голосов 5: ↑5 и ↓0+9
Комментарии4

Обзор и гайд по Tortoise ORM: собрал в одну статью все, что надо знать об инструменте и своем опыте работы с ним

Уровень сложностиСредний
Время на прочтение26 мин
Количество просмотров2.2K

Привет, Хабр! Меня зовут Даниил Лихачев, я Python backend developer в диджитал-продакшене Далее. Сегодня я хотел бы представить вашему вниманию асинхронную библиотеку для работы с базами данных под названием Tortoise ORM. Это обзорная статья, чтобы показать, что из себя представляет данная библиотека и для каких проектов она подойдет. Также на основе своего опыта постараюсь осветить аспекты, в которых Tortoise ORM хороша и удобна, а также те, в которых ее возможностей может не хватать и как это обойти. Также бонусом предоставлю свой шаблон в стеке FastAPI + Tortoise ORM.

Читать далее
Всего голосов 14: ↑13 и ↓1+15
Комментарии11

Vercel VS Edge VS Next. Что такое Vercel Edge, зачем, как и куда

Время на прочтение9 мин
Количество просмотров1.4K

Edge рантайм. Один из главных функционалов компании Vercel — компании, которая разработала и развивает next.js. Тем не менее, её влияние по edge рантайму вышло далеко за рамки её фреймворков и утилит. Edge рантайм работает и в недавно купленном Vercel Svelte, и в nuxt, и в более чем 30 других фронтенд фреймворках. Эта статья будет посвящена edge рантайму — что это, как это используется в Vercel, какими возможностями дополняет next.js и какие решения сделал я, чтобы эти возможности расширить.

Читать далее
Всего голосов 5: ↑4 и ↓1+5
Комментарии7

Создание интернет-магазина на компонентах: новый подход для быстрого выхода на рынок екома

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.4K

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

Читать далее
Всего голосов 3: ↑1 и ↓2+1
Комментарии11

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

Как компилировать json или история оптимизации python сервиса

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров6.8K

В прошлой статье мы начали историю создания одного из компонентов платформы экспериментов в компании Okko — сервис сплитования трафика.

Там были описаны небольшие, но эффективные оптимизации Python-кода, которые могут быть полезны в практически любом сервисе на этом языке.

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

Читать далее
Всего голосов 23: ↑22 и ↓1+29
Комментарии19

Стреляем себе в ногу из localStorage

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров6.8K

Все фронтендеры любят localStorage — в него можно прикопать данные без всяких баз и серверов. Но из localStorage можно отлично обстрелять себе ногу. сегодня расскажу про 6 встроенных пулеметов и презентую библиотеку banditstash, которая нежно, но настойчиво прикрывает ваши ножки.

Читать далее
Всего голосов 21: ↑19 и ↓2+22
Комментарии16

Контроль пропускной способности (троттлинг) API c помощью шлюза авторизации OpenIG

Время на прочтение6 мин
Количество просмотров276

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

Читать далее
Всего голосов 1: ↑1 и ↓0+3
Комментарии0

Как узнать количество перерисовок? React Custom Hook: useRenderCount

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров2.4K

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

Читать далее
Всего голосов 7: ↑5 и ↓2+5
Комментарии4

Как подготовиться к удалению приложения из AppStore

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3K

В этой статье расскажу как подготовиться к тому, что ваше приложение будет удалено из Appstore. Лучше приложить минимум усилий сейчас, чем спешно предпринимать действия потом. Предупрежден — значит вооружен. Сам я бы сэкономил кучу времени, если бы я наткнулся на такую статью, но, к сожалению, мне не попадалось что‑то вразумительное.

Читать далее
Всего голосов 10: ↑9 и ↓1+12
Комментарии10

Разработали аналог Confluence. Что из этого получилось и почему мы не стали вкладывать в продукт 10 миллионов рублей

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров3.7K

Привет, я Вячеслав — руководитель отдела маркетинга ispmanager. Мы создаем сложный программный продукт, для которого нужна документация. Использовали Confluence, но решили поменять ПО — еще до того, как Atlassian ушел из РФ.  

Рассказываю, почему решили мигрировать c Confluence, какие альтернативы тестировали, как запустили свой аналог и не скатились в «продуктовую пропасть». А еще расскажу, что пошло не по плану и почему мы отказались вкладывать в развитие продукта 10 миллионов рублей.

Читать
Всего голосов 13: ↑10 и ↓3+11
Комментарии19

Как я взломал штрих-коды продавца билетов TicketMaster

Время на прочтение12 мин
Количество просмотров28K
Недавно я купил билеты на концерт на сайте TicketMaster. Если бы мне отправили обычный распечатываемый билет в PDF, который бы можно было сохранить офлайн на телефоне, то этой статьи никогда бы не было. Но ведь сейчас 2024 год: всё, что делается онлайн, перестало быть простым.

После завершения покупки TicketMaster сообщил мне, что я не смогу распечатать билеты на мероприятие. Сайт выпускает билеты при помощи системы Mobile Entry, он же SafeTix. Они имеют вид обновляемого штрих-кода, отображаемого в веб-приложении или приложении для Android/iOS TicketMaster.


»Скриншоты не позволят вам пройти», зато позволят инструменты разработчика Chrome

Возможно, я старею, но мне ещё помнятся времена, когда распечатываемые билеты использовались повсюду. Покупатель мог распечатать билеты после приобретения онлайн или даже в кассе (ничего себе!), и принести эти бумажные билеты ко входу на мероприятие. Их можно было сохранять как PDF и просматривать практически на любом устройстве. PDF-билетами можно пользоваться, даже когда у телефона нет подключения к Интернету. Бумажными билетами можно пользоваться, даже когда у тебя нет телефона. Если я покупал билет в официально продающей их компании (а не у подозрительного посредника), то точно знал, что он настоящий. Не было никакой опасности, что тебя с этим билетом не пустят. Можно было спокойно отправлять их друзьям по WhatsApp, iMessage, Signal, электронной почте или даже передавать распечатанные билеты из рук в руки.
Читать дальше →
Всего голосов 144: ↑144 и ↓0+175
Комментарии48
1
23 ...

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