Верстальщик от бога

Каким было ваше первое место работы? Присоединяйтесь к обсуждению в комментариях #discussion

Эффект размытия вместо тени на CSS #почитать

С тенями в CSS все довольно просто: объявляете свойство box-shadow, задаете смещения тени, определяете размытие и задаете цвет. Это отличный способ придать глубину тому, что в остальном было бы плоским дизайном! Черпая вдохновение в тенях, автор статьи Яир Эвен Ор (Yair Even Or) создает нечто подобное, только с эффектом размытия вместо тени. В этой статье вы получите пошаговое объяснение того, как это делается с помощью комбинации масок, градиентов и старого доброго свойства backdrop-filter.

⏱Читать статью

Узнайте, как сделать ваш сайт быстрее и безопаснее, на бесплатном курсе Base cloudfort Вас ждут 8 уроков с теорией и практикой, где опытные эксперты поделятся своими кейсами и реальными примерами. Обучение будет проходить в формате видеолекций и общения с преподавателями в чате, так что у вас всегда будет поддержка и ответы на вопросы. Что вы изучите: — Ускорение сайтов и защиту от DDoS-атак. — Основы CDN и методы балансировки нагрузки. — Принципы работы с медиахранилищем и адаптацией медиаконтента. — Как запустить онлайн-трансляцию без лишних затрат. Участники также получат бесплатный доступ к новому продукту cloudfort для защиты и ускорения сайтов. Сервис позволяет создавать S3-хранилища, ускорять веб-ресурсы и включать защиту от кибератак. Регистрируйтесь на курс по ссылке. Реклама ПАО «ВымпелКом», beeline.ru erid: LjN8K9NV5

Анимация элемента dialog - практикум #почитать

Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.

⏱Читать статью

Непроизвольная тирания пользовательских интерфейсов #почитать Посыл этой статьи заключается в том, что одержимость лёгкими, «интуитивными» и, возможно, даже эффективными пользовательскими интерфейсами формирует слой мягкой тирании. Такой слой я бы создал, будучи диктатором, стремящимся усладить общественность в подготовке к лишению её свобод в будущем. Я бы так сильно привязал людей к нелепым ограничениям при использовании разных вещей, что подобное издевательство стало бы нормой. ⏱Читать статью

🎁 Готовый сайт Аспро со скидкой 30% До 7 июля Аспро дарит скидку 30% на топовые интернет-магазины. При заказе в комплекте с 1С-Битрикс максимальная выгода — 34 900 ₽. Вводите промокод в форме на лендинге или корзине, чтобы получить скидку и запустить современный сайт: VERSTKA30 Реклама: ООО "Аспро", erid 2Vtzqw75VXu

Bricks: подход к управлению интерфейсами #почитать

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

⏱Читать статью

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

Впервые за весь свой опыт работы frontend разработчиком я столкнулся с задачей определения города (решение применимо не только для города, но и страны, улицы и т.д.) текущего пользователя и, порыскав в интернете, находил лишь кусочки того, что мне нужно, поэтому, чтобы сэкономить время тех, кто столкнулся с похожей задачей решил опубликовать данную статью. Прежде чем писать код, хотелось бы отметить, что моё решение не претендует на "чистое" и единственно-верное, поэтому если есть более гармоничное и красивое решение - используйте его (буду только рад если поделитесь им). Если кому интересно, задача была реализована на Options API, фреймворка Vue, но сам код написан на чистом JS. Это может быть полезно и тем, кто пишет на React и т.д.

⏱Читать статью

Пятничное. Дитер Рамс: дизайнер, определивший современность #почитать

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

⏱Читать статью

Айтрекинг и юзабилити интерфейсов веб-сайтов #почитать

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

⏱Читать статью

Анимации CSS, основанные на времени #почитать

Использование времени для анимации очень часто встречается в шейдерных программах и различных других местах. CSS не может запустить таймер, как это делает JavaScript, но сегодня можно определить пользовательскую переменную с помощью CSS Houdini API для отслеживания времени в миллисекундах.

⏱Читать статью

В поисках площадок для практики в программировании? Вот список вебсайтов, которые помогут вам улучшить свои навыки, подготовиться к техническим собеседованиям и стать еще лучше! ▫️LeetCode LeetCode предлагает широкий спектр задач по программированию, охватывающих такие области, как алгоритмы, базы данных и другие. Отличный ресурс для подготовки к техническим собеседованиям благодаря разнообразным задачам. ▫️HackerRank На HackerRank вы найдете разнообразные задачи по программированию, созданные сообществом. Платформа позволяет сравнивать свои решения с решениями других пользователей, что помогает учиться на примерах. ▫️Codewars Codewars идеально подходит для начинающих программистов. Платформа предлагает небольшие задачи, которые помогают постепенно развивать навыки программирования. ▫️TopCoder Один из старейших сообществ по конкурентному программированию. TopCoder регулярно проводит конкурсы по разработке программного обеспечения и дизайну, что делает его отличной платформой для тех, кто хочет соревноваться и улучшать свои навыки. ▫️Codecademy Codecademy предлагает интерактивные курсы и упражнения по программированию для начинающих и программистов среднего уровня. Платформа помогает изучать новые языки и технологии с нуля.

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

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

⏱Читать статью

▫️ Бесплатный марафон по верстке сайта html/css/js для новичков #посмотреть

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

⏱Смотреть на YouTube ⏱2 часа 15 минут

Тенденции адаптивного и инклюзивного дизайна #почитать

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

⏱Читать статью

Стилизация участков текста с помощью CSS Custom Highlight API #почитать

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

⏱Читать статью

▫️ Google I/O и Config, Translation API, Figma, Invokers, бета React 19 #посмотреть Также длинные альты, атрибуты и свойства. ⏱Смотреть на YouTube ⏱1 час 30 минут

Как мы создавали дизайн-систему #почитать Спойлер – в результате разработка фич стала быстрее в 2 раза, сборка дизайн-макетов ускорилась в 3-4 раза, а UI приложения удалось избавить от хаоса из рандомных шрифтов и иконок и унифицировать. ⏱Читать статью

Когда во всех вакансиях просят минимум 10-15 лет опыта и возраст до 25-30 лет)))