Обновить
512K+

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

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

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

PHP Дайджест № 213 (27 сентября – 11 октября 2021)

Время на прочтение4 мин
Охват и читатели11K
Фото: Noriko YAMAMOTO.

Подборка свежих новостей и материалов из мира PHP.

Для PHP 8.2 предложили добавить тип null; опубликована уязвимость в PHP с disable_functions, которая на самом деле не уязвимость; новый сайт от сообщества — phpopendocs.com; PHP 8.1 RC 3, Xdebug 3.1 и другие релизы.

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

Приятного чтения!
Читать дальше →

Самосохраняющийся компонент выбора

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

Недавно Бхарат Рави опубликовал статью о директиве самосохраняющегося select-элемента на InDepth. Это интересная концепция изолирования логики в директиве, что в целом идея хорошая.

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

Поехали!

Разработка системы заметок с нуля. Часть 2: REST API для RESTful API Service + JWT + Swagger

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

Продолжаем серию материалов про создание системы заметок. В этой части мы спроектируем и разработаем RESTful API Service на Golang cо Swagger и авторизацией. Будет много кода, ещё больше рефакторинга и даже немного интеграционных тестов.

Подробности в видео и текстовой расшифровке под ним.

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

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №488 (4 — 10 октября 2021)

Время на прочтение3 мин
Охват и читатели7.5K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

PWA: управление service-worker'ом

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

Прочитал я хорошую статью "Обновление вашего PWA в продакшене" и задался вопросом - а как часто при обновлении PWA нужно обновлять непосредственно сам service worker? Ведь что такое service worker по сути? "Прокладка" (прокси) между приложением, работающим в браузере, и внешними серверами, с которых это приложение тянет нужные ему ресурсы. По большому счёту, функционал service worker'а сводится к некоторому набору стратегий и пониманию того, к какому ресурсу какую стратегию применять и когда (я сейчас не рассматриваю push notifications и background sync, но изложенное в какой-то степени применимо и к ним).

То есть, код service worker'а более стабилен по сравнению с кодом приложения и во многих случаях для его "обновления" достаточно программно обнулить кэш-хранилище браузера и обновить "понимание того, к какому ресурсу какую стратегию применять" - обновить конфигурацию service worker'а. А для этого нужно приложению нужно иметь возможность каким-то образом управлять состоянием service worker'а и передавать ему данные, что осложняется тем, что приложение и service worker работают в различных потоках.

Под катом пример того, каким образом можно настроить управление service worker'ом из основного приложения при помощи Channel Messaging API.

Читать далее

React: простое и эффективное решение для управления состоянием приложений

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


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


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


Немного забегая вперед, скажу, что решение получилось чуть менее производительным, чем "классическое" сочетание хука useReducer() и инструментов, предоставляемых Context API (которые, собственно, и составляют ядро решения).


Решение представляет собой результат нескольких экспериментов, направленных на максимальное упрощение работы с контекстом React, и во многом вдохновлено Vuex — официальным инструментом для управления состоянием Vue-приложений.


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


Пока мне не представилось возможности испытать решение в "полевых условиях" (я намерен сделать это при первом удобном случае), но кажется, что оно подойдет для разработки приложений любой сложности при соблюдении двух важных условий:

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

Как написать генератор изображений, который вас понимает

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

Автор статьи рассказывает, как за неделю создал Text2Art.com — генератор изображений на основе VQGAN+CLIP, способный рисовать пиксель-арт и живопись, а также изображать то, что вы напишете в текстовом поле.

Для интерфейса используется Gradio, модель работает на сервере FastAPI, а системой очереди сообщений служит Firebase. Подробностями делимся к старту курса по ML и DL.

Читать далее

Frontend Security: о чем вы хотели бы забыть, но не сможете

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

Какие атаки на клиентскую часть веб-ресурсов вы знаете? XSS, CSRF, HTTP Response Splitting, Clickjacking, CSHM, атаки на CORS, следствия других ошибок программистов? В среднем разработчик вспоминает не половину, и даже не треть. Разнообразие атак зависит только от фантазии и любопытства злоумышленников, и все они созданы, чтобы навредить вашим клиентам, а значит — и вам.

Татьяна Новикова — ex-пентестер с опытом в безопасности около четырех лет, а ныне Application Security Engineer. В команде ЦАРКА (Центр анализа и расследования кибератак) она занималась пентестом — полной проверкой веб-ресурсов  на безопасность. В том числе команда работала с white-box, то есть с исходными кодами, и разбирала безопасность не только бэкенда, но и фронтенда. Сейчас Татьяна перешла в Beeline Казахстан и занимается обеспечением процессов безопасной разработки.

На основе своего опыта она выступила на конференции Frontend Conf Live 2020. В одной статье, конечно, невозможно покрыть все уязвимости и потенциальные опасности, поэтому сегодня будет самое актуальное и страшное из доклада — то, что может нанести максимальный ущерб.

Читать далее

MoscowJS 50 — как это было

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

Давно мы тут не писали, но наконец-то появился повод исправиться. Но для начала представимся для тех, кто с нами еще не знаком.

MoscowJS — это ИТ-сообщество разработчиков на JavaScript. Мы проводим регулярные неформальные бесплатные мероприятия в онлайне и офлайне уже больше 10 лет подряд. Подробнее о нас и команде организаторов можно прочитать на нашем сайте.

После долгого перерыва и экспериментов в онлайне мы, наконец, вернулись в офлайн — и в партнерстве с TINKOFF 11 сентября провели в Москве большую юбилейную конференцию MoscowJS 50. Дважды юбилейную — этим событием мы отметили сразу и круглое число в названии встречи и десятилетие нашего сообщества. Под катом вы найдете ссылки на записи докладов и много-много фотографий. 

Читать далее

Микрофронтенды: наш путь к более быстрому и гибкому сайту

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

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

Читать далее

Бандлинг всего того, что не относится к обычному JavaScript-коду

Время на прочтение8 мин
Охват и читатели6.3K
Предположим, вы работаете над веб-приложением. В таком случае весьма вероятно то, что вам приходится иметь дело не только с JavaScript-модулями, но и с самыми разными другими ресурсами. Это и веб-воркеры (их тоже пишут на JavaScript, но они обособлены от обычного кода фронтенда), и изображения, и стили, и шрифты, и WebAssembly-модули, и иные материалы, входящие в состав сайта.

Ссылки на некоторые из подобных ресурсов можно включить непосредственно в HTML-код, но часто они логически связаны с компонентами, используемыми во многих местах проектов. Например, таблица стилей для особого выпадающего списка связана с JavaScript-кодом, реализующим этот список, а изображения иконок связаны с компонентом, реализующим панель инструментов. Точно так же WebAssembly-модуль связан с JavaScript-кодом, обеспечивающим использование этого модуля. Удобнее было бы обращаться к подобным ресурсам прямо из соответствующих JavaScript-модулей и загружать их динамически тогда (или если), когда загружается соответствующий компонент.


Ресурсы разных типов, импортируемые в JS-коде

Правда, в большинстве крупных проектов используются системы для сборки таких проектов, которые выполняют дополнительные оптимизации и реорганизации контента. Например — это бандлинг и минификация ресурсов. Они не могут выполнять код и предсказывать то, каким будет результат его запуска. Они не могут и анализировать все строковые литералы в JavaScript-программах и делать предположения касательно того, является ли конкретная строка неким URL, ведущим к какому-то ресурсу, или нет. Как сделать так, чтобы бандлеры «видели» бы динамические ресурсы, загружаемые JavaScript-компонентами и включали бы их в сборку проекта?
Читать дальше →

Что должен, но не знает про конкуренцию в PostgreSQL каждый разработчик?

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

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

Читать далее

MastermindCMS2 – Теги

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

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

За свою карьеру программиста я видел множество разных технологий и фреймворков от гигантов индустрии, таких как Oracle, Microsoft, IBM и т. п. Но в каждом из них было какое-то неудобство. А конкретнее у них у всех было одно общее, это необходимость реализовывать серверную логику чтобы можно было использовать ее в шаблонах. И это мне сильно не нравилось, приходилось делать одну и ту же работу из проекта в проект.

Один из таких подходов разнесения логики был паттерн программирования MVVM(Model-View-ViewModel). Его активно продвигали во фреймворках для C#. Структурно с точки зрения разнесения логики, я считаю этот паттерн самым удобным.

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

Читать далее

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

«Направления» Рувеба

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

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

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

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

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

Технологии и наилучшие практики, использующиеся во всем мире для строительства веба, доступны повсеместно и многие из них open source и free. Сам процесс строительства не требует капитальных вложений, требующихся на строительство дорог, газопроводов, запуск космических станций. Поэтому, в отличие от прочих глобальных составляющих жизни любого общества, применительно к вебу вопрос «почему он у нас такой хреновый?» не является риторическим.

Поехали!..

Gopher, конкурент WWW из 90-х, который пока не стоит списывать со счетов

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


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

А пока популярные СМИ пели хвалу невероятным успехам Веба, ещё одна технология передачи данных через интернет отмечала своё 30-летие – Gopher. Популярность этого забытого тяжеловеса эпохи раннего интернета была на пике в конце 90-х, а ныне почти полностью сошла на нет. К счастью, как и его отважный тёзка, Gopher продолжает прокладывать себе путь по интернету и в XXI веке при поддержке преданного сообщества, а количество серверов, поддерживающих этот протокол, постепенно растёт.
Читать дальше →

От тестов до IDE в браузере: как мы разрабатывали систему проверки студентов для онлайн-школы

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

С 2018 года компания KTS проводит курсы для разработчиков и менеджеров. И в этом году мы решили запустить наши курсы на своей собственной платформе для онлайн-обучения (LMS).

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

Читать далее

Распространённые ошибки при использовании npm, которых лучше не совершать

Время на прочтение5 мин
Охват и читатели20K
Npm — это крупнейший менеджер пакетов. Его сравнительно просто и понятно использовать в практике веб-разработки. Но когда речь заходит о применении собственных конфигураций или об использовании продвинутых возможностей npm, многое может пойти не так.



В этом материале я расскажу о семи распространённых ошибках, которые веб-разработчики допускают при работе с npm. В частности, речь пойдёт об управлении зависимостями, о публикации пакетов и ещё о некоторых важных вещах.
Читать дальше →

Как работает JavaScript [Объясняю визуально]

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

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

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

Читать далее

OnPush — ваш новый Default

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

В Angular есть два режима change detection: Default и OnPush. В этой статье мы разберем, как можно спокойно использовать OnPush всегда без лишнего труда и почему стоит начать это делать.

Поехали!

Дайджест свежих материалов из мира фронтенда за последнюю неделю №487 (27 сентября — 3 октября 2021)

Время на прочтение3 мин
Охват и читатели8K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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