Pull to refresh
-3
0

Готовим микрофронтенды на чистом JS без фреймворков

Level of difficulty Medium
Reading time 15 min
Views 5.8K
Tutorial

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендов. Ведь все необходимое для разработки и работы Микрофронтендов уже встроено во все современные браузеры. Интересно? Добро пожаловать в статью.

Читать далее
Total votes 24: ↑18 and ↓6 +12
Comments 21

Ох уж эти CSS-переменные

Level of difficulty Medium
Reading time 6 min
Views 8.4K
Review


Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
Читать дальше →
Total votes 56: ↑56 and ↓0 +56
Comments 13

Знакомимся с @scope в CSS

Level of difficulty Easy
Reading time 4 min
Views 4.8K
Review
Translation

В январе 2019 года я поднял вопрос в W3C CSS GitHub под названием Please bring back scoped styles. Когда-то существовал атрибут HTML scoped, но он был устаревшим. В CSS он был заменен на @scope. Поддержка должна появиться в Chrome 117. Safari так же занимает положительную позицию по спецификации.

У @scope есть два преимущества: стилизация на основе близости и установка нижней границы для селектора.

Читать далее
Total votes 6: ↑6 and ↓0 +6
Comments 0

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

Level of difficulty Medium
Reading time 15 min
Views 2.2K
Case

Html/css и его вариации, предлагают могучий инструментарий для воплощения самых смелых фантазий дизайнеров. И, наверное, при регулярном и глубоком погружении в тему верстки, весь этот инструментарий "прокэширован в подкорке" и "вертится на кончиках пальцев"...

А как быть тем, кто заходит в сияющий мир CSS лишь изредка - по необходимости?

(А еще под раздачу попадут React-либы MUI и AntD!)

Читать далее
Total votes 3: ↑1 and ↓2 -1
Comments 29

Основные принципы маскирования в CSS

Level of difficulty Medium
Reading time 8 min
Views 6K
Translation

В мире дизайна маскирование является популярной техникой реализации уникальных эффектов. Будучи дизайнером, я сам использовал эту технику много раз, но не очень часто в веб-среде. Думаю, что от её применения на сайтах меня удерживала недостаточная поддержка браузерами. Полноценно этот функционал поддерживается в Safari и Firefox, а вот в браузерах на движке Blink (Chrome и Edge) — лишь частично.

Радует то, что тема CSS маскирования будет частью Interop 2023, а значит, вскоре можно ожидать кросс-браузерную поддержку этой возможности (Вау!).

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

Поехали!
Читать дальше →
Total votes 44: ↑44 and ↓0 +44
Comments 1

6 новых возможностей CSS, которые должен знать каждый front-end разработчик в 2023 году

Level of difficulty Easy
Reading time 2 min
Views 22K
Translation

Мощные и стабильные CSS фичи, которые вы можете использовать уже сегодня.

Я считаю, что каждый front-end разработчик должен знать, как использовать container query, создавать привязку к прокрутке, избегать position: absolute с помощью grid, быстро создавать круг, использовать каскадные слои и достигать большего с помощью логических свойств. Эта статья — описание каждой из 6 новых возможностей CSS.

Читать далее
Total votes 19: ↑12 and ↓7 +5
Comments 6

Как составить эффективный запрос цены на разработку программного обеспечения

Level of difficulty Easy
Reading time 6 min
Views 2K

Приветствую! Я – Данил Вильховский, генеральный директор компании по кастомной разработке программного обеспечения.

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

Читать далее
Rating 0
Comments 4

Полароидный CSS и совсем немного HTML

Reading time 10 min
Views 3.7K
Tutorial
Translation

В предыдущей статье у нас получился красивый слайдер («карусель») с круговым вращением. А сегодня я создам слайдер, пролистывающий стопку «полароидных» снимков.


Пока не смотрите код, сначала я должен вам многое про него рассказать. Поехали! К старту нашего курса по Fullstack-разработке на Python.

Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Comments 1

Упрощаем себе жизнь при разработке интерфейса взаимодействия приложения и БД

Reading time 8 min
Views 4.3K

Привет, %username%! Меня зовут Антон Жеронкин, я Data Scientist в Сбере, участник профессионального сообщества NTA. Сегодня поговорим о том, как можно сделать лучше жизнь разработчиков, которые часто сталкиваются с базами данных. Дело в том, что, когда разработчики вручную пишут функциональные модули, ответственные за связь с БД, они проделывают следующую работу:

● описывают таблицы в виде классов;

● описывают отдельные атрибуты таблиц в виде атрибутов классов. При этом требуется следить за тем, чтобы типы и форматы данных совпадали;

● на CRUD-операции пишут много SQL-кода, который зашивается в методы языка программирования и помогает остальным модулям при необходимости использовать связь с БД.

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

Читать далее
Total votes 14: ↑13 and ↓1 +12
Comments 6

Редко используемые свойства CSS

Reading time 7 min
Views 10K
Review

Всем привет, меня зовут Кирилл, я frontend разработчик компании Usetech. CSS постоянно развивается, и некоторые полезные свойства остаются незамеченными. Возможно о них говорят не так много, как о других, но в этой статье на примерах я разберу новые и полезные свойства CSS. Ещё вы увидите раздел ресурсы, где можно почитать подробнее и глубже.

CSS свойства, которые мы рассмотрим в данной статье:

Читать далее
Total votes 13: ↑13 and ↓0 +13
Comments 11

Тактовая кнопка, как подключить правильно к "+" или "-"

Reading time 5 min
Views 15K

Вы ни когда не задумывались, почему в схемах иногда кнопки подтягивают к "+" питания, а иногда к общему проводу? Если прямо сейчас набрать в поиске: "тактовая кнопка ардуино" - то на большинстве картинок мы увидим именно прямое подключение, когда резистор подключен на землю. Но, если посмотреть схемы без участия ардуино, то ситуация меняется в корне, чаще можно будет встретить инвертированное включение. Так как же будет подключать кнопку правильнее? Давайте вместе попробуем разобраться в этом вопросе!

Читать далее
Total votes 29: ↑27 and ↓2 +25
Comments 74

Наглядно о том, как работает свёрточная нейронная сеть

Reading time 6 min
Views 28K
Translation

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

Читать далее
Total votes 19: ↑15 and ↓4 +11
Comments 8

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

Reading time 7 min
Views 72K

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

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

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

Читать далее
Total votes 167: ↑161 and ↓6 +155
Comments 148

Искусство компонентов. Пишем карточку контакта Facebook Messenger

Reading time 12 min
Views 8.4K
Translation
Вполне возможно оценить компонент и сказать, что он легко пишется на HTML и CSS. Соглашусь, это легко, когда вы работаете, только чтобы практиковаться, но в реальном проекте всё по-другому. Идеальный адаптивный компонент, который вы только что создали, быстро перестаёт работать, когда сталкивается с реальным контентом настоящего проекта. Почему? Потому, что, пока вы рассуждаете о разработке компонента, вы можете упустить крайние случаи. Сегодня, специально к старту нового потока нашего курса по веб-разработке, поделюсь переводом статьи, в которой показан простой на первый взгляд компонент, за которым стоит огромная работа. Ради реалистичности это будет пример прямо из Facebook Messenger.


Приятного чтения!
Total votes 25: ↑23 and ↓2 +21
Comments 7

Как не слить 10 миллионов бюджета вашего заказчика, играясь с Agile

Reading time 6 min
Views 17K
В этом посте я расскажу о тех проблемах с которыми в течении года сталкивалась наша Scrum Front End команда при работе над приличным проектом. Мы начинали разрабатывать проект с нуля используя стек технологий React + Typescript. Оглядываясь назад я вижу многие миллионы выброшенные впустую просто из-за того, что процесс разработки не был поставлен с самого начала правильно. Но на это есть свои причины.
Читать дальше →
Total votes 42: ↑36 and ↓6 +30
Comments 27

Information

Rating
Does not participate
Registered
Activity