Как стать автором
Обновить
266.85
Рейтинг

Разработка веб-сайтов *

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

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

MastermindCMS2 – Теги

CMS *Разработка веб-сайтов *Развитие стартапа
Tutorial

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

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

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

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

Читать далее
Рейтинг 0
Просмотры 86
Комментарии 0

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

Веб-дизайн *Разработка веб-сайтов *IT-стандарты *Usability *Статистика в IT

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

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

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

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

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

Поехали!..
Всего голосов 7: ↑4 и ↓3 +1
Просмотры 839
Комментарии 2

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

Разработка веб-сайтов *История IT
Перевод


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

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

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

Блог компании KTS Разработка веб-сайтов *Анализ и проектирование систем *Учебный процесс в IT

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 536
Комментарии 0

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

Блог компании RUVDS.com Разработка веб-сайтов *
Перевод
Npm — это крупнейший менеджер пакетов. Его сравнительно просто и понятно использовать в практике веб-разработки. Но когда речь заходит о применении собственных конфигураций или об использовании продвинутых возможностей npm, многое может пойти не так.



В этом материале я расскажу о семи распространённых ошибках, которые веб-разработчики допускают при работе с npm. В частности, речь пойдёт об управлении зависимостями, о публикации пакетов и ещё о некоторых важных вещах.
Читать дальше →
Всего голосов 33: ↑32 и ↓1 +31
Просмотры 5.5K
Комментарии 3

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

Разработка веб-сайтов *JavaScript *Программирование *Учебный процесс в IT TypeScript *
Перевод

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

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

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

OnPush — ваш новый Default

Блог компании TINKOFF Разработка веб-сайтов *Angular *TypeScript *

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

Поехали!
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 2.7K
Комментарии 17

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

Разработка веб-сайтов *CSS *JavaScript *HTML *
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 4.4K
Комментарии 2

5 вещей, которые я узнал, доведя Snowpack до 20000 GitHub-звёзд

Блог компании RUVDS.com Разработка веб-сайтов *Программирование *GitHub
Перевод
Меня зовут Фред. Я — создатель Snowpack. Для тех, кто не знаком с этим проектом, расскажу в двух словах о том, что он собой представляет. Это — инструмент для сборки фронтенда веб-сайтов, который, по существу, дал дорогу движению «unbundled web development» («веб-разработка, основанная на использовании отдельных компонентов»), которое в наши дни поддерживают Snowpack, Vite, SvelteKit и другие современные инструменты для веб-разработки.

В этом материале я хочу рассказать о пяти вещах, которые я узнал, доведя Snowpack от исходного коммита до почти 20000 звёзд на GitHub и до более чем миллиона загрузок.



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

Мой рассказ состоит из двух частей. В этом первом материале я уделяю основное внимание тому, чему научился, создавая Snowpack с нуля и находя наших первых пользователей. Во второй части я расскажу о том, как выглядит поддержка популярного растущего опенсорсного проекта.
Читать дальше →
Всего голосов 64: ↑60 и ↓4 +56
Просмотры 19K
Комментарии 24

Создание компонента Toggle

Разработка веб-сайтов *CSS *JavaScript *HTML *Accessibility *
Перевод
Tutorial

В рамках серии материалов GUI Challange, в данной статье Адам Аргайл демонстрирует один из способов создания очень маленького, но трудоёмкого компонента переключателя toggle с учётом цветовой схемы и предпочтений пользователя.

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

Blazor WebAssembly: Drag and Drop в SVG

Разработка веб-сайтов *.NET *ASP *WebAssembly *
Tutorial

Demo | GitHub

В статье описан способ реализации перетаскивания SVG объектов.

Попутно рассмотрены следующие моменты разработки на Blazor:

Шаблонные компоненты. Содержимое шаблонного компонента можно задавать в родительском компоненте.

Передача событий от родительского компонента дочернему (Parent -> Child);

Проблема перезаписи входных параметров компонента внутри самого компонента (Overwritten parameters problem);

Двухсторонний биндинг между родителем и дочерним компонентом. Т.е. входной параметр дочернего компонента может менять и родительский компонент и дочерний;

Как сделать stopPropagation на Blazor.

Читать далее
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 1.9K
Комментарии 0

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

Блог компании Timeweb Разработка веб-сайтов *JavaScript *Программирование *


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


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


Функционал нашего приложения будет следующим:


  • запись аудио
  • отображение записи с возможностью ее предварительного прослушивания и последующего сохранения или удаления
  • хранение аудио-файлов на сервере
  • извлечение аудио-файлов, хранящихся на сервере, и их отображение в браузере

Основная технология, которую мы будем использовать, это MediaDevices. Данная технология входит в состав глобального объекта Navigator. Основным методом, предоставляемым указанным интерфейсом является getUserMedia(). Запись данных (в простых случаях вроде нашего) выполняется с помощью интерфейса MediaRecorder.


Интерфейс MediaDevices на сегодняшний день поддерживается всеми современными браузерами.


Для небольшой стилизации нашего приложения мы будем использовать Sass.


Выглядеть приложение примерно так:





Исходный код приложения находится здесь.


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


Обратите внимание: данная статья рассчитана, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в ней что-нибудь интересное.


Вы готовы? Тогда вперед!

Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 2.9K
Комментарии 0

Как писать на HTML Canvas удобно, или как изобрести очередной renderer на Angular

Разработка веб-сайтов *HTML *Canvas *Angular *

Разработка на canvas с контекстом 2D обычно не предполагает никаких сложностей. Для начала необходимо изучить пару десятков встроенных методов WEB API CanvasRenderingContext2D, прочитать рекомендации по оптимизации, вспомнить школьный курс геометрии. И на этих базовых вещах можно уже строить неплохие приложения на canvas.

Как один из вариантов начала разработки на canvas: из примитивов фигур строят элементы, затем их объединяют в функцию, эти функции складывают в готовый элемент, объединяют их в слой, ну и в конце уже отдают в функцию рендера. Все еще звучит довольно неплохо и с этим можно даже жить, если использовать чистые функции, и придерживаться везде этого подхода. Но не всегда этого удается, всегда есть соблазн выхватить что-либо из контекста. Для примера приведу код из source-map-vizualization замечательный инструмент, сделанный на canvas. Только чтобы понять весь код и привнести какие либо исправления, я думаю придется посидеть не один час.

Читать далее
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 2K
Комментарии 3

Easing Functions – функции плавности для CSS-анимации и переходов

Блог компании Skillbox Разработка веб-сайтов *CSS *HTML *Математика *
Перевод

Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.

Узнать больше
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 2.4K
Комментарии 0

Приемы оптимизации веб-графики в 2021 году

Блог компании ДомКлик Разработка веб-сайтов *Интерфейсы *

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

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

Читать далее
Всего голосов 42: ↑42 и ↓0 +42
Просмотры 4.9K
Комментарии 23

PoW вместо капчи

Информационная безопасность *Разработка веб-сайтов *JavaScript *

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

Сказать, что капча всем надоела и очень многих раздражает — значит ничего не сказать. Проблема еще в том, что очень и очень многие используют «облачную» капчу от одной всемирно известной корпорации... и в случае проблем с доступом к такой капче (тьфу-тьфу-тьфу) львиная доля использующих ее сайтов просто перестанет работать.

Под катом — простейший альтернативный вариант защиты от автоматической отправки сообщений и от брутфорса логина/пароля, основанный на идее PoW (proof of work, доказательство выполнения работы).

Читать далее
Всего голосов 16: ↑16 и ↓0 +16
Просмотры 5.4K
Комментарии 69

Первые шаги в aiohttp, часть 3: публикуем приложение в Интернете

Блог компании KTS Разработка веб-сайтов *Python *Учебный процесс в IT
Tutorial

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

В этой части статьи мы рассмотрим размещение нашего веб-сервиса в Интернете, используя платформу Heroku.

Асинхронное программирование — большая тема. Если хотите разобраться в ней подробнее, приходите к нам на курс. 

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 2.1K
Комментарии 0

Когда сделаете доработку?

Блог компании ДомКлик Разработка веб-сайтов *

Довольно часто я попадаю в ситуацию, когда мне нужно в моменте оценить длительность реализации реализации бизнес-фичи. Обычно это какая-нибудь рядовая встреча, на которой инициатор бизнес-идеи, резво размахивая руками в воздухе, рассказывает о своем предложении. В конце своего выступления, в котором часто много слов (но не цифр) сказано о том, зачем это фича нужна и какой эффект она даст, всегда звучит сакральный вопрос: «Когда сделаете эту великолепную доработку?»

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

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

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

Читать далее
Всего голосов 66: ↑64 и ↓2 +62
Просмотры 10K
Комментарии 24

DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

Разработка веб-сайтов *JavaScript *Программирование *Совершенный код *

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Всем привет, это Макс Кравец из Holyweb. Помните сцену из Матрицы, в которой один из юных кандидатов в Избранные наставляет Нео: «Не пытайся согнуть ложку. Первое, что ты должен понять — ложки не существует!»? Давайте переформулирую: «Не пытайся изменить DOM...». А вот о том, что прячется под многоточием, мы сегодня и поговорим.

Читать далее
Всего голосов 30: ↑27 и ↓3 +24
Просмотры 11K
Комментарии 23

Хранение изображений сайта в БД

Разработка веб-сайтов *Delphi *Microsoft SQL Server *IIS *Разработка под Windows *
Автор должен признаться: статья родилась и выросла из довольно небольшой и не претендующей на откровение оптимизации сайта, описанного в другом материале. Сайт этот связан с музыкальной тематикой и, соответственно, активно отображает обложки альбомов, хранящиеся (до поры до времени) на сервере не в ФС, как обычно бывает, а в БД SQL Server (в BLOB-поле, о чём несложно догадаться); в старом варианте пора извлечения изображений из базы и сохранения их в виде файлов возникает в момент запроса альбомов пользователем, после чего (по истечении сессии) они удаляются.

Страница сайта с обложками

Чтобы почти окончательно развеять куцую интригу и помочь возможному читателю определиться с тем, имеет ли смысл продолжить чтение, опишу конечный результат оптимизации: обложки по-прежнему останутся в базе данных, причём в поле того же типа, но вот веб-сервер, отдающий в итоге изображения клиенту, будет «обманут» и станет обращаться за файлом знать не зная, что его на самом деле нет в ФС, а вызов идёт сразу и непосредственно к СУБД. Такой «обман» конечно же не является самоцелью – всё в основном затевалось ради уменьшения нагрузки на дисковую подсистему.
Читать дальше →
Всего голосов 13: ↑6 и ↓7 -1
Просмотры 4.5K
Комментарии 37

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