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

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

СтатьиПостыНовостиАвторыКомпании

alizar 20 мая 2024 в 09:00

Карсон Гросс, создатель HTMX

Простой

7 мин

12K

Блог компании RUVDS.comHTML * htmx * Биографии гиковВеб-разработка *

Ретроспектива

Карсон Гросс (Carson Gross) — профессор информатики из Монтаны, который неожиданно стал одним из самых ярких персонажей в индустрии веб-программирования последних лет. Он автор языка HyperScript и популярной библиотеки для фронтенда HTMX, позволяющей создавать сложные интерактивные сайты средствами HTML. Красивая альтернатива клиентскому рендерингу на JavaScript решает сразу несколько проблем современного веба, связанных с избыточной сложностью разработки и поддержки, производительностью и ожирением сайтов.

Создавать сайты очень просто, тот же Хабр написал один программист, а не команда из сотен разработчиков и девопсов, как сейчас принято нанимать в интернет-компании.

Многие веб-разработчики нашего времени выросли со знанием только одностраничных приложений SPA и фреймворков для них. Они начали свои карьеры с приложений на React.js, которые общаются с сервером Node через JSON API. Это настоящая трагедия, считает Гросс. Интерактивные приложения можно делать совершенно иначе.

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

+54

melnik909 14 мая 2024 в 13:00

Неизвестно полезный CSS. Часть 3

Средний

7 мин

14K

Блог компании RUVDS.comCSS * Веб-разработка *

Туториал

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

возможность задать несколько фонов с помощью свойства background;
свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

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

+52

Olegas 14 мая 2024 в 11:39

Бэкэнд для начинающих или типовые ошибки бэкэндера

Простой

12 мин

26K

Блог компании ТензорПрограммирование * Веб-разработка *

Туториал

Всем привет! Я Олег, fullstack‑разработчик в компании Тензор, тимлид небольшой команды.

Одна из моих обязанностей в роли тимлида это code review. За годы работы я видел многое и выделил для себя типовые ошибки, с которыми сталкиваются начинающие backend‑разработчики. Сегодня хочу рассказать о некоторых из них.

+61

Bright_Translate 10 мая 2024 в 13:00

Как случайно баллотироваться на пост президента Исландии?

4 мин

13K

Блог компании RUVDS.comИнтерфейсы * Веб-разработка * Веб-дизайн *

Перевод

Чтобы баллотироваться на должность президента Исландии, нужно быть гражданином этой страны в возрасте от 35 лет и собрать от 1 500 до 3 000 подписей избирателей.

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

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

Многие из этих людей действительно конкурируют за пост президента (да, среди них моя тётя Хельга), некоторые явно подали заявку в качестве шутки (нет, не упомянутый выше комик), и не менее 11 из них зарегистрировались случайно, понятия не имея о том, что начали сбор подписей в поддержку своего выдвижения.

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

+83

ElladaNur 8 мая 2024 в 08:39

Шпаргалка по безопасной сборке Docker-образов

17 мин

25K

Блог компании SelectelВеб-разработка * Информационная безопасность * Программирование * Качество кода *

Туториал

✏️ Технотекст 7

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

Привет, Хабр! Меня зовут Эллада, я специалист по информационной безопасности в Selectel. Продолжаю рассказывать о безопасности в Docker. Под катом расскажу, как настроить сборку образов, обеспечить безопасность и добавить сканирование в пайплайн.

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

+65

sedvic 3 мая 2024 в 08:14

Эволюция в мире UX: как мы создали паттерн проектирования и упростили прогулки пользователей по панели управления

Средний

9 мин

8.4K

Блог компании SelectelИнтерфейсы * Веб-разработка * Веб-дизайн * IT-компании

✏️ Технотекст 7

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

Было сложно, но задачу я осилил. А после решил доработать ее и переложить наработанный опыт в паттерн, который смогут переиспользовать другие проектировщики. В этой статье расскажу, что из этого получилось и какие цели мы ставили перед собой при подготовке паттерна. Добро пожаловать под кат!

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

+51

Bright_Translate 27 апр 2024 в 13:00

Каково это — работать с Netscape Composer в 2024 году

Средний

6 мин

5.8K

Блог компании RUVDS.comТекстовые редакторы и IDE * Старое железоВеб-разработка * HTML *

Обзор

Перевод

Как гик из начала 1990-х, который увлекался компьютерами с юных лет, я с почтением вспоминаю технологии конца того десятилетия и начала 2000-х.

Поэтому, когда в мои руки пару месяцев назад попал старый компьютер, я, недолго думая, установил на него Windows 98, чтобы поиграться с программами из моего детства. Среди интересовавших меня жемчужин был Netscape Communicator. Это программный пакет 1997 года, включавший Netscape Navigator — первый браузер, с которым мне довелось работать. В пакет также входил WYSIWYG-редактор Netscape Composer.

Через Netscape Composer я впервые познакомился с веб-разработкой. Ещё подростком я создавал с его помощью свои первые веб-страницы. В онлайн те страницы так и не попали, но я гордо таскал их с собой на дискете, показывая родственникам и друзьям на их компьютерах. Создавая эти страницы, я уяснил, что сайты состоят из простых файлов. Используя Netscape Composer, я также освоил основные веб-термины вроде «страница» и «гиперссылка».

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

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

+53

Bright_Translate 26 апр 2024 в 13:00

Сложнейшая проблема компьютерных наук: центрирование

Средний

7 мин

38K

Блог компании RUVDS.comCSS * HTML * Веб-дизайн * Веб-разработка *

Обзор

Перевод

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:

display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

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

Ещё можно использовать сетку:

display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Также не спрашивайте, почему выражение justify-content стало justify-items.

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

+226

JulieMatveeva 25 апр 2024 в 12:52

REST API на котиках

Простой

7 мин

32K

Блог компании CDEKВеб-разработка * Разработка мобильных приложений * Проектирование API * Тестирование IT-систем *

Туториал

✏️ Технотекст 7

Привет любителям котиков! Меня зовут Юля, я backend‑разработчик компании CDEK. Я сама не так давно изучала все эти сложные понятия в программировании, поэтому решила помочь и вам разобраться с одним из них.

С какой стороны IT вы бы не пытались войти — в какой‑то момент столкнётесь с понятием REST API. Эта статья создана, чтобы смягчить данное столкновение. Новые темы всегда легче воспринимаются на простых примерах, ну а если это примеры с котиками, то варианта не разобраться просто нет. Хочется обойтись без сложных научных определений, а рассказать самым простым языком. Поэтому, если вы любите сухие и точные формулировки, то вам нужна другая статья :)

+62

melnik909 23 апр 2024 в 13:00

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

Средний

10 мин

12K

Блог компании RUVDS.comCSS * Веб-разработка * Учебный процесс в IT

Обзор

Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»

Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.

Последний технический момент. Во всех примерах я использую <body> в качестве родительского контейнера. На картинках он обозначен голубой пунктирной линией.

А теперь переходим к статье.

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

+53

cdnnow-team 22 апр 2024 в 12:35

Docker — не то, чем кажется

Простой

6 мин

40K

Блог компании cdnnowВеб-разработка * Виртуализация * DevOps *

Обзор

Привет, Хабр! Меня зовут Матвей Мочалов, я — компьютерный инженер и один из авторов корпоративного блога cdnnow! Мы с вами познакомились в этом посте про историю DRM для видеоконтента. Сегодня я хочу поговорить с вами про Docker, а точнее про то, о чём многие забывают: различиях в нём для разных систем. Нам, как CDN-провайдеру Docker, все его 50 оттенков близки и знакомы. И, к счастью, наше взаимодействие с ним происходит из-под Linux, но, увы, не всем так везёт.

Как это часто бывает, с мультиплатформенностью и прочими «красивыми» словами в IT, всё не так однозначно. У всего своя цена, и под капотом один и тот же инструмент на разных системах, по сути своей может представлять из себя несколько разных вещей с различными принципами работы и производительностью. А обещания революции скрывают за собой эволюцию, либо вовсе регресс и топтание на месте.

+65

bodyawm 17 апр 2024 в 08:01

Смартфон для джаваскриптера-олдфага: стоит ли гику брать дешманские девайсы на KaiOS? Смотрим на Nobby 240 LTE

Средний

11 мин

13K

Блог компании Timeweb CloudСмартфоныВеб-разработка * Веб-дизайн * JavaScript *

Мнение

Друзья! Много ли платформ вы знаете, где для написания пользовательских приложений используется стек… веб-технологий, причём это единственный нативный способ писать программы? Услышав о HTML5 + CSS + JS, на ум приходит разве что webOS — которая используется в современных телевизорах от LG (а ранее использовалась ещё и в Palm Pre — уникальный смартфон, единственный в своём роде), а олды вспомнят ещё и про FireFox OS, в которой вся оболочка (включая многозадачность, шторку уведомлений и все приложения) также была реализована на JS. Но ни webOS, ни FFOS в своё время не суждено было стать массовыми ОС на смартфонах: сказывались аппаратные ограничения устройств, да и проблемы с портированием уже существующих приложений с других платформ (например, игр). Однако несколько лет назад, проект FireFox OS был форкнут и на свет появилась новая система, предназначенная для… умных кнопочных телефонов с LTE! И имя ей — KaiOS. Вероятно, многие мои читатели слышали о ней и о новых умных кнопочниках от Nokia. Но что из себя представляет система под капотом и чем она может быть интересна гику? Читайте в новом материале!

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

+71

ElladaNur 16 апр 2024 в 08:44

Безопасность в Docker: от правильной настройки хоста до демона

12 мин

24K

Блог компании SelectelВеб-разработка * Информационная безопасность * Программирование * Качество кода *

Туториал

Привет, Хабр! Меня зовут Эллада, я специалист по информационной безопасности в Selectel. Помогаю клиентам обеспечивать защиту инфраструктуры и участвую в разработке новых решений компании в сфере ИБ. И сейчас я начала больше погружаться в тему разработки и изучать лучшие практики по обеспечению безопасности приложений.

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

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

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

+66

Bright_Translate 13 апр 2024 в 10:00

Не бойтесь бросать свои пет-проекты

Простой

6 мин

11K

Блог компании RUVDS.comУправление разработкой * Программирование * Веб-разработка * Open source *

Мнение

Перевод

Веб-индустрия переполнена историями о пет-проектах, которые переросли в успешный бизнес. Вот и я нередко увлекаюсь какими-нибудь идеями после основной работы. И хотя это определённо заманчивая перспектива, работа над личным проектом не всегда столь лучезарна – порой они просто не выгорают. Если вы читаете эту статью, то есть вероятность, что вы недавно отказались (или подумываете отказаться) от своего пет-проекта. В таком положении находились многие из нас. Да что тут говорить, заброшенные личные проекты даже стали своего рода мемом в среде разработчиков.

Тем не менее ко мне часто обращаются начинающие программисты за советом, и в последнее время их всё чаще беспокоит то, что у них не получается реализовывать пет-проекты так быстро или так часто, как хотелось бы. И такая тревожность абсолютно понятна. Когда в среде разработки господствует культура сверхактивности и концепция «непрерывной поставки», а на технических собеседованиях кандидатов зачастую оценивают на основе результатов их «внештатного программирования» (имеются в виду хакатоны, клубы программистов и прочее, — прим. пер.), заброшенные пет-проекты перестают казаться чем-то забавным. И мне это не нравится.

Мы слышим столько историй об успешных личных проектах, но что, если более открыто говорить о тех, которые провалились? Многие из нас проводят ретроспективный анализ на работе, но не в отношении пет-проектов. А почему бы нам не пролить свет на всё то время, которое было вложено в начинания, которые так и не ожили? На заброшенное ПО, которое в своё время казалось хорошей идеей. По нашим средам разработки до сих пор скитаются духи захороненных каталогов node_modules.

И здесь я хочу рассказать о своём недавнем пет-проекте, который забросил в тот же день, в который запустил.

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

+64

JordanCpp 4 апр 2024 в 22:48

Программирование и ИТ во мгле, но это не точно

Простой

14 мин

33K

СофтC++ * Программирование * Веб-разработка * Высоконагруженные системы *

Мнение

Приветствую хабравчане!

В данной статье хочу поделиться проблемами в ИТ. Высказать об этом своё мнение. Обсудить в комментариях, всё ли так плохо на самом деле и каков выход из данной ситуации. Меня не покидает ощущение, что мы как программисты, что то потеряли при очередном витке ИТ прогресса. Обсудим?

Давай, чё там у тебя

+106

305

Boomburum 4 апр 2024 в 07:05

На светлом-светлом Хабре появилась тёмная-тёмная тема

Простой

6 мин

23K

Блог компании ХабрВеб-дизайн * Веб-разработка * HabrUsability *

Ретроспектива

Привет, Хабр! Мы приготовили для вас долгожданный подарок (из заголовка вы уже поняли, какой), но мы вам его просто так, как говорится, не отдадим ?

+123

166

tmat 19 мар 2024 в 17:05

Сначала войдите через Телеграм

5 мин

56K

Веб-разработка * Мессенджеры *

Туториал

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

+61

melnik909 19 мар 2024 в 09:00

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

Средний

7 мин

18K

Блог компании RUVDS.comCSS * Веб-разработка * Учебный процесс в IT

Обзор

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

Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.

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

Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display?»

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

+55

its_capitan 16 мар 2024 в 06:38

$2500 в месяц на сервисе с 1 функцией, которая уже была у крупных компаний

Простой

5 мин

54K

Бизнес-модели * Управление продуктом * Развитие стартапаМонетизация веб-сервисов * Веб-разработка *

Кейс

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

+59

Bright_Translate 10 мар 2024 в 14:00

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

Средний

7 мин

62K

Блог компании RUVDS.comВеб-разработка * Информационная безопасность * Сетевые технологии * Управление продуктом *

Кейс

Перевод

Пару месяцев назад я запустила сервис y.gy, навороченный сокращатель URL. Вызвано это было личной нуждой: в другом моём проекте, getwaitlist.com, используется множество реферальных ссылок, а доступные сервисы сокращения url не внушали мне доверия. В итоге я решила создать собственный инструмент, который наверняка окажется полезен не только мне.

Я разработала лучший в своём роде сокращатель со всеми возможными примочками, начиная с обширной кастомизации и заканчивая хорошей аналитикой трафика. Это всё, что мне было нужно. По аналогии со многими аналогичными инструментами я разместила интерфейс «Shorten Link» по центру домашней страницы. Регистрация для использования сервиса не требуется. Я сделала доступ бесплатным и неограниченным, опираясь на принцип: «бесплатность – лучшая маркетинговая стратегия». Закончив с настройкой, я без громких заявлений сделала релиз и начала потихоньку продвигать свой проект.

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

+139

1 2 ...

5 6

8 9 ...

107 108

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

Карсон Гросс, создатель HTMX

Неизвестно полезный CSS. Часть 3

Бэкэнд для начинающих или типовые ошибки бэкэндера

Как случайно баллотироваться на пост президента Исландии?

Шпаргалка по безопасной сборке Docker-образов

Эволюция в мире UX: как мы создали паттерн проектирования и упростили прогулки пользователей по панели управления

Каково это — работать с Netscape Composer в 2024 году

Сложнейшая проблема компьютерных наук: центрирование

REST API на котиках

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: значения свойства display

Docker — не то, чем кажется

Смартфон для джаваскриптера-олдфага: стоит ли гику брать дешманские девайсы на KaiOS? Смотрим на Nobby 240 LTE

Безопасность в Docker: от правильной настройки хоста до демона

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

Не бойтесь бросать свои пет-проекты

Программирование и ИТ во мгле, но это не точно

На светлом-светлом Хабре появилась тёмная-тёмная тема

Сначала войдите через Телеграм

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

$2500 в месяц на сервисе с 1 функцией, которая уже была у крупных компаний

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

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