Search
Write a publication
Pull to refresh
1
0
MASe @MASe

User

Send message

Дружеское знакомство с SVG

Level of difficultyMedium
Reading time13 min
Views2.2K

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

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

Для понимания этой статьи не требуется специальных знаний и опыта работы с SVG, но предполагается, что вы знакомы с основами HTML/CSS/JS.

Читать далее

Не так страшен чёрт, как его малюют. Пошаговый план создания собрания собственников для смены Управляющей компании

Level of difficultyEasy
Reading time12 min
Views4.5K

Привет, Хабр! Меня зовут Вячеслав. В какой-то момент мне надоел произвол, творимый управляющей компанией в доме, где я живу. Вечная грязь, обшарпанные коридоры, отсутствие видеонаблюдения, эпопеи в случае аварий с отоплением, водоснабжением, электрикой. Я задался вопросом: “А можно ли в принципе как-то решать эти проблемы?”. Оказалось, можно! В статье расскажу, как я начал борьбу с управляющей компанией за комфортную жизнь. А начал я с самого сложного - организовал собрание собственников. Да, звучит страшно! Некоторые боятся даже думать о том, что их ждет, если они возьмутся за этот вопрос. Но не тот это черт, которого надо бояться, с ним надо просто разобраться! Вооружившись сильным желанием, энтузиазмом, законами и знаниями, я преодолел этот путь, а значит, и вы сможете. В статье расскажу, что вас ждет, если вы решите сменить управляющую компанию, какие подводные камни и неожиданные повороты могут встретиться на этом пути, как можно оптимизировать процесс и не потратить все свои нервы. А если останутся вопросы, с радостью отвечу на них.

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

1. Начало

Я живу в Санкт-Петербурге, в небольшом 14-ти этажном кирпичном доме 70-ых годов постройки. Дом в спокойном спальном районе с малоэтажной застройкой, вокруг много зелени, детских площадок, в соседних кварталах торговые центры, поликлиники, фитнес-центры.  В самом доме всего 97 квартир с удобными планировками, два лифта, мусоропровод. На площадке всего по 7 квартир, нет ощущения общежития. С соседями по этажу быстро сложились дружеские отношения.  Единственная проблема – плохая работа управляющей компании. Надоела вечная грязь в холле, в лифтах, на этажах, периодически забитый мусоропровод. На придомовой территории вечно разбросанный мусор. В случае аварий чаще всего проблемы приходится решать самим жителям (отопление, вода, электрика). О текущем ремонте вообще бесполезно говорить. Даже простейшие работы вроде замены перегоревшей лампочки и замены разбитого стекла выполняется в среднем за полгода.

Читать далее

Хабр без ограничений: Магия «плюса» в адресе почты

Level of difficultyEasy
Reading time4 min
Views5.6K

В 20 лет я планово обновил паспорт. Через пару недель мне позвонили мошенники. С самого начала меня начали «обрабатывать» и для укрепления доверия называть мои ПДн. В разгаре беседы «господа из техподдержки компании N» назвали мои новые паспортные данные!

Я страшно удивился скорости утечки нового паспорта и стало интересно: кто же был источником слива? Тогда я нашел лайфхак, который помогает с высокой вероятностью выяснить, откуда произошла утечка (пользуюсь им и по сей день).

Так фича или всё-таки баг?

Новинки CSS и UI: I/O 2023

Level of difficultyMedium
Reading time13 min
Views15K


Последние несколько месяцев открыли золотую эру веб UI (User Interface — пользовательский интерфейс).


Вот 20 самых захватывающих и впечатляющих возможностей, которые появились недавно или появятся в ближайшем будущем:


  • запросы контейнера (container queries);
  • запросы стиля (style queries);
  • селектор :has();
  • микросинтаксис nth-of;
  • text-wrap: balance;
  • initial-letter;
  • динамические единицы измерения области просмотра (viewport);
  • цветовые пространства с широкой гаммой;
  • color-mix();
  • вложенность селекторов (nesting);
  • каскадные слои (cascade layers);
  • стили с ограниченной областью видимости (scoped styles);
  • тригонометрические функции;
  • индивидуальные свойства трансформации;
  • popover;
  • позиционирование якоря (anchor positioning);
  • selectmenu;
  • дискретные свойства переходов;
  • анимации, управляемые прокруткой (scroll-driven animations);
  • переходы отображения (view transitions).

Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, связанным с разработкой веб-приложений.

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

Условные выражения в CSS

Level of difficultyMedium
Reading time10 min
Views30K

Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else).

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

В этой статье я расскажу о некоторых возможностях CSS, которые мы используем каждый день, и покажу, насколько они условны. Кроме того, я приведу несколько примеров, в которых CSS гораздо мощнее, чем инструменты дизайна.
Читать дальше →

Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов

Reading time8 min
Views86K

Как сделать плавный анимированный переход на сайте без использования специальных библиотек? Урок использования псевдоэлементов CSS для создания эффектов: от анимированной кнопки до карточки профиля. Подходит новичкам.

Читать далее

CSS: системные цвета, шрифты и кое-что ещё

Reading time4 min
Views10K
Думаю, все мы, в целом, знакомы с таким способом описания CSS-цветов:

color: OldLace;
background: rebeccapurple;

Полагаю, их обычно называют «именованными цветами».



Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:

Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.

Трюки CSS, которые сделают из вас ниндзя верстки

Reading time5 min
Views52K

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


Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").


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


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


Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.


grid + place-items


Здесь вы найдете полное визуальное руководство по Grid и Flexbox.


Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.

Псс, дизайнер, хочешь ещё один конструктор для создания сайтов?

Reading time4 min
Views11K

Всем привет! На самом деле я сторонюсь сравнений с конструкторами сайтов и ниже расскажу, почему это так. Наш проект — это скорее редактор, позволяющий динамически верстать макеты без кода и генерирующий на выходе оптимизированный продакшн-реди код. В остальном мы ближе к графическим редакторам. Этакий No-Code Pixel Perfect инструмент, где всё нужное под рукой, и где реализовано всё то, чего не хватало в Фигме.



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

Базовая структура HTML-документа с объяснением каждой строчки

Reading time9 min
Views135K
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>


Под катом — разбор каждой строчки
Читать дальше →

Какие CSS-генераторы можно использовать в 2021 году

Reading time2 min
Views37K
image

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

Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.

Известный full-stack разработчик Марко Денич предлагает свою подборку лучших CSS-генераторов. Возможно, о каких-то из них вы не знали, и, познакомившись с ними сейчас, начнёте использовать в работе.
Читать дальше →

«Вам здесь больше не рады...» Или что делать, если вы думаете, что работаете здесь, а начальник думает, что уже нет

Reading time7 min
Views74K

Представьте, что однажды Вы приходите на любимую работу, но начальник встречает Вас нервно, напряжен как струна, и, вызвав Вас к себе, объявляет Вам, что Вы уволены. Вам это объявление портит настроение, опускает самолюбие ниже плинтуса, Вы теряетесь, не знаете, как поступить, что говорить, и о чем начинать беспокоиться в первую очередь - чем оплачивать жилье, квартиру, ипотеку или отдавать долг Сашке и т. п. Попутно Вам начальник/кадровик подсовывает в руки пустой лист бумаги и ручку и говорит написать заявление. Туман в голове, дрожащими руками Вы начинаете выводить на белоснежном листе «генеральному директору ООО «Компания» Иванову И. И., заявление» ниже «прошу уволить меня по собственному желан…» СТОП. Какая-то ерунда получается. Может сказать чудаку начальнику, что у меня желания-то увольняться совсем нет, и зачем тогда писать это заявление, если я уже уволен? Если я уволен – отдайте трудовую книжку, зарплату и отпустите восвояси. Непонятно…

Поделившись своими сомнениями с кадровиком, Вы замечаете, что Инспектор по кадрам багровеет и рассказывает, что Ваши коллеги-соратники уже написали заявление и советует Вам сделать то же самое - это в Ваших же интересах – «иначеуволимпостатьеиотправимсволчьимбилетом».

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

Читать далее

За что получает деньги наемный работник? Не понимаете? Сейчас поймете

Reading time4 min
Views152K
«За что я плачу тебе деньги?» — обычный вопрос работодателя работнику, причем саркастический, как правило.

«За что я тут корячусь на тебя?» — столь же обычный вопрос работника к работодателю.
Разобраться, за что же действительно работодатель платит деньги наемному работнику, поможет моя собственная теория, закодированная в десять букв – «ПЗП – ПЗС – ПЗПИ»

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

Выбор CSS макета — Grid или Flexbox?

Reading time9 min
Views92K


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

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

Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.
Читать дальше →

10 современных раскладок в одну строку CSS-кода

Reading time7 min
Views34K

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

Читать далее

Пришло время бесплатных сайтов

Reading time3 min
Views182K

Привет, %username%!




Сегодня многие начинающие веб-разработчики делают большую ошибку, и не одну. Они что-нибудь сверстают, а потом покупают хостинг. Далее покупают домен. Регистрируют и подключают SSL-сертификат. Я, спасаясь от минус-кармы, просто расскажу как не тратить деньги на свои тестовые проекты.
Читать дальше →

Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

Reading time4 min
Views65K
Привет, Хабр! представляю вашему вниманию перевод статьи «How to make your HTML responsive by adding a single line of CSS» автора Per Harald Borgen.



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

Самое крутое, что для добавления отзывчивости потребуется написать одну строчку кода на CSS
Читать дальше →

7 Chrome-расширений для изучения английского

Reading time2 min
Views66K


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

Эти сервисы позволяют улучшить навыки письма, восприятия на слух, произношение и словарный запас.
Читать дальше →

5 действительно бесплатных нелинейных видеоредакторов для Windows

Reading time6 min
Views438K
Этот пост призван помочь тем, кому, как и мне, внезапно стало тесно с Movie Maker.

Видеоредакторы почти не интересовали меня до прошлого месяца, пока с друзьями мы не задумали снять что-нибудь оригинальное к Новому году. Креативность наша ограничилась тем, чтобы, говоря терминами прежде мне неизвестными, применить эффект “Разделение экрана” (Split Screen). То есть реализовать нечто такое:


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

Верстаем новостной сайт с помощью Flexbox

Reading time5 min
Views57K
image

Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.

Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.
Читать дальше →

Information

Rating
Does not participate
Registered
Activity