Обновить
512K+

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

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

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

Как выдать Золушку за принца и не сойти с ума. Паттерн Декоратор

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

Всем привет, я Максим Кравец из Holyweb, и мы продолжаем разговор о паттернах (первую статью о Singleton можно почитать вот тут). Героя нашего сегодняшнего сюжета порой называют «wrapper» или «обертка», поскольку он оборачивает исходный код, но мне больше нравится название «декоратор» — оно точнее отражает не механику, а суть происходящего.

Читать далее

Не лезьте в геймдев, он вас сожрёт (но вам понравится)

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

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

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

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

Читать далее

Контейнерные запросы в CSS

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

Как фронтенд-дизайнер я за последние 6 лет не был так взволнован новой CSS-функцией, как сейчас. Благодаря усилиям Мириам Сюзанны и других умных людей прототип контейнерных запросов можно включить в Chrome Canary

О контейнерных запросах запомнилось много шуток, но они, наконец, здесь. Специально к старту нового потока курса по Frontend разработке, делимся с вами статьей, в которой рассказывается зачем нам нужны контейнерные запросы, как они облегчат нашу жизнь, и, самое важное, ваши компоненты и макеты станут мощнее. Если вы взволновались так же, как и я, давайте углубимся в тему. Вы готовы?

Читать далее

Цифровая трансформация цементного завода (ч. 4): автоматические личные кабинеты и чат-боты

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

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

Читать статью >>

Библиотека next-persist: преодоление разрыва между серверным рендерингом и постоянным хранением данных на клиенте

Время на прочтение9 мин
Охват и читатели6.2K
Статья, перевод которой мы публикуем сегодня, посвящена next-persist — компактному и нетребовательному к ресурсам NPM-пакету. Цель его создания — упрощение обработки и реконсиляции данных, на постоянной основе хранящихся на клиенте и не имеющих критического значения. При этом данный пакет задуман так, чтобы его применение не ухудшило бы полезных возможностей Next.js по серверному рендерингу и генерированию статических сайтов.

Прежде чем мы поговорим о месте next-persist в экосистеме современной веб-разработки, нам нужно коснуться Next.js — передового фреймворка, созданного Vercel, позволяющего без особых сложностей создавать и развёртывать приложения, которые, при этом, отличаются высокой скоростью загрузки.



Next.js произвёл революцию в осмыслении того, как именно веб-содержимое доставляется пользователям. Произошло это за счёт объединения всего лучшего из сфер серверного и клиентского рендеринга с технологиями генерирования статических сайтов. Кроме того, применение Next.js до крайности упрощает доведение веб-проектов до рабочего состояния. Это происходит за счёт автоматизации конфигурирования вспомогательного ПО, вроде webpack и babel, и благодаря использованию CI/CD Vercel.

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

Как писать тесты, трейты vs ООП, разговоры про DevOps, KPHP и Go — превью большого PHP-митапа

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

Привет! 15 мая мы проведем митап в смешанном формате: ты сможешь подключиться к ютуб-трансляции и задать вопрос текстом или голосом, а если ты в Казани или рядом - приходи в “Штаб”. Ребята из Skyeng расскажут, как и зачем допиливать Codeception, чтобы больше радоваться. Ребята из VK - как превратить PHP-скрипты в статические бинарники. Ребята из iSpring - как внедряли DevOps без Docker и Kubernetes. Ребята из FindMyKids - как переписали нагруженный сервис. Ну а автор Laravel Idea Адель Файзрахманов поднимет холиварную тему про трейты.  

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

Читать далее

Кешируем CRUD в IndexedDB

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

Допустим, у нас есть бекенд, который умеет хранить какие-то сущности. И у него есть апи для создания, чтения, изменения и удаления этих сущностей, сокращенно CRUD. Но апи на сервере, а пользователь забрался куда-то глубоко и половина запросов валится по таймауту. Не хотелось бы показывать бесконечный прелоадер и вообще блокировать действия пользователя. Offline first предполагает загрузку приложения из кеша, так может быть и данные брать оттуда?

Читать далее

VueUse — обязательная библиотека для Vue 3

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

Для тех, кто незнаком с этой библиотекой, советую попробовать, так она может де-факто стать стандартом для использования в проектах на Vue 3, как, например, в свое время была библиотека lodash для почти любых проектов на js.

Остальные наверное уже успели заценить весь обширный функционал, который она предоставляет. Некоторые уже использовали ее на Vue 2, но далеко не все новые функции поддерживают старую версию. Арсенал библиотеки впечатляет, тут и простые утилиты вроде клика вне элемента, и различные интеграции с Firebase, Axios, Cookies, QR, локальным хранилищем, браузером, RxJS, анимации, геолокации, расширения для стандартных Vue-хуков, медиа-плеер и многое другое. Среди спонсоров отмечен сам Эван Ю, что как бы намекает. Библиотека регулярно получает обновления, баги закрываются, а сообщество растет. В общем у нее есть все для успеха.

Update: Исправлен баг очистки предыдущей истории изменений.
Update 2: Добавлен более актуальной код примеров.

Читать далее

Полезные JavaScript-библиотеки

Время на прочтение6 мин
Охват и читатели43K
Не стоит недооценивать силу простоты. Пожалуй, сложно представить себе, что на чистом JavaScript реализовано что-то вроде системы push-уведомлений, работающей в реальном времени, или инструмент для работы с базами данных, или полноценный текстовой редактор. Но подобные проекты существуют и позволяют решать множество актуальных задач. В этом материале речь пойдёт о нескольких весьма полезных библиотеках, которые подключаются к страницам в виде обычных JavaScript-файлов. При рассказе о каждой из них я постараюсь выделять их особенности и приводить примеры их использования.


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

Как обеспечить глассморфизм с помощью HTML и CSS

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

Вы, наверное, подумаете — ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того?

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

Но давайте поговорим немного больше о глассморфизме.

Читать далее

Адаптивный дизайн как антипаттерн

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


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

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

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

Пространственный газлайтинг


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

Целительная сила JavaScript

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

Чуть меньше года назад, когда по всему миру начали распространяться локдауны в связи с Covid-19, большинство людей начало запасаться туалетной бумагой и консервами. Но лично я стремился получить нечто другое: реализовать функцию поиска.

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

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

Работа с частичными моками в PHPUnit 10

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

В этом году должен выйти PHPUnit 10 (релиз планировался на 2 апреля 2021 года, но был отложен). Если посмотреть на список изменений, то бросается в глаза большое количество удалений устаревшего кода. Одним из таких изменений является удаление метода MockBuilder::setMethods(), который активно использовался при работе с частичными моками. Этот метод не рекомендуется использовать с версии 8.0, но тем не менее он описан в документации без каких-либо альтернатив и упоминания о его нежелательности. Если почитать исходники PHPUnit, issues и пул-реквесты на GitHub, то станет понятно, почему так и какие есть альтернативы.

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

Читать далее

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)

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

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

Блеск и нищета open source платформы RawCMS. Причины провала и выводы

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

Автор этого поста начал разрабатывать сторонний проект с открытым исходным кодом в 2006 году, и это был секрет развития его карьеры. Благодаря его экспериментам того времени, он вырос как разработчик и теперь возвращает что-то сообществу Open Source. По его мнению, открытый исходный код — это драйвер роста компаний и разработчиков. Специально к старту нового потока курса «C#-разработчик», делимся с вами рассказом об опыте начавшейся в 2018 году работы над платформой low-code с открытым исходным кодом под названием RawCMS.

Читать далее

CORS для чайников: история возникновения, как устроен и оптимальные методы работы

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


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

Если вы давно хотели разобраться в CORS и вас достали постоянные ошибки, добро пожаловать под кат.

Ошибка в консоли вашего браузера


No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/

Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.


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

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

Но давайте-ка пойдем к истокам…
Читать дальше →

Как создают и поддерживают веб-страницы tinkoff.ru

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

Всем привет! Меня зовут Сергей Михайлов, в Тинькофф я работаю руководителем интерфейсов: занимаюсь внутренними сервисами, а также отвечаю за дизайн-составляющую Отдела привлечения клиента. Расскажу, как мы быстро собираем страницы с помощью нашего конструктора.

Читать далее

Ты приходишь в проект, а там легаси…

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

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

Давайте отбросим эмоции. И посмотрим, что можно быстро предпринять, чтобы облегчить страдания.

Читать далее

Трёхпроходный алгоритм рефакторинга Front End

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

Попался мне достаточно крупного размера проект написанный на React + Typescript.
Покопался в коде. Всё круто, контейнеры, компоненты, типы везде стоят, линтер настроен, styled-components, даже storybook есть и некий react-query.

Ну просто счастье, а не проект!

Сажусь делать простую таску – какую-то страничку собрать из компонентов.
Пишу в коде But… и IDE мне предлагает 16 Button компонентов.

Блииин…

Дальше больше...

Записки юного TeamLead: Ошибки, о которых не стыдно говорить

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

Любой разработчик может уйти в сторону оси "Технологии" и делать свой стек технологий сильнее - становиться ведущим или старшим разработчиком. Можно попробовать прокачать себя в оси "Продукт" - уйти в PM и потом пойти дальше по матрице компетенций и расти по вертикали. Но есть еще одна ось, о которой можно много говорить, о которой много пишут, писали, и будут писать - "Люди". Управление людьми, работа с командой напрямую, выстраивание своих локальных процессов разработки - участь TeamLead

Ну, удиви