Как стать Frontend-лидом за 4 года
#почитать
⏱ Читать статью
#почитать
Оценивая свои знания я понял, что их не хватает даже для устройства на позицию джуна. Поэтому на протяжении следующих трёх месяцев я учился по 10-12 часов в день, чтобы начать ходить на интервью.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1
Пятничное. История Dark Mode: как баг стал фичей
#почитать
«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию.
Давным-давно в 19 веке, еще до появления школьных тетрадей (и уж тем более аналоговых и цифровых электронных устройств) у каждого ученика (или ученого «мужа») была своя собственная аспидная доска, выполненная из сланца — так называемого аспида.
⏱ Читать статью
#почитать
«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию.
Давным-давно в 19 веке, еще до появления школьных тетрадей (и уж тем более аналоговых и цифровых электронных устройств) у каждого ученика (или ученого «мужа») была своя собственная аспидная доска, выполненная из сланца — так называемого аспида.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3
Infinite-Scrolling Logos In Flat HTML And Pure CSS
#почитать
Помните элемент HTML <marquee>? Он устарел, так что вряд ли вы будете использовать его, когда вам понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нем есть все необходимые инструменты для реализации этой функции. Автор демонстрирует технику, которая позволяет сделать это с помощью набора изображений и минимального HTML.
⏱ Читать статью (en)
#почитать
Помните элемент HTML <marquee>? Он устарел, так что вряд ли вы будете использовать его, когда вам понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нем есть все необходимые инструменты для реализации этой функции. Автор демонстрирует технику, которая позволяет сделать это с помощью набора изображений и минимального HTML.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9🔥3
Селектор потомков (пробел)
#почитать
Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.
⏱ Читать статью
#почитать
Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍2❤1
Адаптивное видео с помощью встроенных математических функций CSS
#почитать
⏱ Читать статью
#почитать
Пока копалась в математических функциях, пришло в голову, что aspect-ratio можно попробовать воспроизвести с помощью этих функций и кастомных свойств.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6🙈2👍1
#посмотреть
Друзья, фронтенд-рынок мертв. Вакансий меньше, чем поданных резюме, а конкуренция бесконечна. Кажется, найти работу невозможно, а даже если и найдешь, зарплата невелика. По крайней мере, так считают выпускники крупных онлайн-школ — тех самых известных школ, рекламу которых вы повсюду видите по телевидению или у блоггеров. Или, может быть, это просто люди, которые не совсем понимают, как работает эта индустрия.
Как основатель Result University, онлайн-заведения, полностью занимающегося фронтенд-разработкой, я решил углубиться в цифры и факты. Что на самом деле происходит на рынке фронтенда? Действительно ли все так плохо, как многие утверждают? В этом видео я хочу ответить на один важный вопрос: можно ли устроиться на работу младшим разработчиком прямо сейчас? Есть ли возможности для разработчиков среднего и старшего уровня? Сколько вакансий имеется? И самое главное, сколько денег могут заработать эти профессионалы?
Для анализа всех этих данных я воспользовался известным сервисом HeadHunter. Обратите внимание, что эта статистика отражает общие тенденции и динамику рынка труда. Она может не отражать точные цифры, но дает общее представление о том, что сейчас происходит в отрасли.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎2🔥1
Вопросы по вёрстке на интервью фронтендера: значения свойства display
#почитать
⏱ Читать статью
#почитать
Продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤3🔥2
Firefox остаётся самым быстрым браузером
#почитать
Как уже говорилось, Firefox остался последним свободным браузером на независимом движке (Gecko). Сейчас это единственная альтернатива монополии WebKit (Safari) и его форка Blink (Chrome, Edge, Opera и др.). И это единственный популярный браузер, который не принадлежит крупной корпорации.
⏱ Читать статью
#почитать
Как уже говорилось, Firefox остался последним свободным браузером на независимом движке (Gecko). Сейчас это единственная альтернатива монополии WebKit (Safari) и его форка Blink (Chrome, Edge, Opera и др.). И это единственный популярный браузер, который не принадлежит крупной корпорации.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤6👏5🤔2👎1
Что может сломать aspect-ratio в CSS
#почитать
В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так.
⏱ Читать статью
#почитать
В CSS есть свойство aspect-ratio, полностью поддерживаемое примерно с 2021 года. Это свойство может быть очень полезным и помочь там, где нельзя использовать фиксированный размер. Но всё может пойти не так.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔8👍2🎉2
Введение в CSS Grid
#почитать
▫️Что такое CSS Grid
▫️Фракционные единицы (fr)
▫️Создание CSS Grid
▫️Функция repeat()
▫️Добавление gap
▫️Варьирующиеся размеры
▫️Создание универсальной системы
⏱ Читать статью
#почитать
▫️Что такое CSS Grid
▫️Фракционные единицы (fr)
▫️Создание CSS Grid
▫️Функция repeat()
▫️Добавление gap
▫️Варьирующиеся размеры
▫️Создание универсальной системы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3🙈1
Платный Chrome Enterprise
#почитать
Платный браузер (подписка $6/месяц за 1 рабочее место) с ИИ-элементами для борьбы с киберугрозами.
Комент:
⏱ Читать статью
#почитать
Платный браузер (подписка $6/месяц за 1 рабочее место) с ИИ-элементами для борьбы с киберугрозами.
Комент:
Максимально странное решение, после выхода бесплатного ChatGpt многие перестали пользоваться поиском гугл, а тут еще такие непопулярные решения как будто бы забьют гвоздь в крышку гроба.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔8👍2🔥1😁1
Юмористический рассказ «Как неофит познавал яваскрипт»
#почитать
⏱ Читать статью
#почитать
Пятьдесят лет назад программистов не было в природе. А сейчас они, кажется, уже вымирают – народился «Чат Гопоты», дьявольский Devin и всё такое прочее. Но, думаю, настоящие программисты не вымрут – они просто перестанут зарабатывать деньги. Ведь до сих пор умельцы и лапти плетут – не за деньги, для души. Собственно, дальше будет история о душе программирования.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤3🎉2🤔1
Инь-Ян в UI/UX дизайне
#почитать
⏱ Читать статью
#почитать
Эта статья адресована моим коллегам-юиксерам, а также всем, кого затрагивают задачи анализа, обсуждения и согласования предложений и результатов работы над дизайном.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👏2🔥1
Архитектура Inverted Triangle CSS (ITCSS)
#почитать
▪️Settings (Настройки): Основополагающий слой, включающий конфигурацию, переменные и глобальные настройки. Он задаёт основу для всей таблицы стилей.
▪️Tools (Инструменты): Этот слой включает миксины, функции и другие инструменты, используемые в проекте. Он предоставляет разработчикам набор инструментов для эффективного управления и расширения стилей.
Generic (Общий): на этом слое применяются сброс стилей и normalize.css, создавая единую базу для стилей в разных браузерах.
▪️Elements (Элементы): Далее идёт базовая стилизация элементов HTML. Это неклассифицированные селекторы, определяющие базовые стили для стандартных HTML-тегов.
▪️Objects (Объекты): Этот слой определяет многократно используемые шаблоны дизайна и структуры макета. Он сосредоточен на создании объектов, содержащих специфическое поведение стилей, что способствует модульности и возможности повторного использования.
▪️Components (Компоненты): На этом слое выполняется стилизация конкретных компонентов пользовательского интерфейса. Этот слой реализует большую часть стилизации приложения, обеспечивая чёткое разделение задач.
▪️Trumps (Козыри): Вершина перевёрнутого треугольника, слой Trumps, имеет дело с утилитарными классами и переопределением стилей. Он позволяет вносить специфические изменения и тонкие настройки, не нарушая целостности нижних слоёв.
⏱ Читать статью
#почитать
▪️Settings (Настройки): Основополагающий слой, включающий конфигурацию, переменные и глобальные настройки. Он задаёт основу для всей таблицы стилей.
▪️Tools (Инструменты): Этот слой включает миксины, функции и другие инструменты, используемые в проекте. Он предоставляет разработчикам набор инструментов для эффективного управления и расширения стилей.
Generic (Общий): на этом слое применяются сброс стилей и normalize.css, создавая единую базу для стилей в разных браузерах.
▪️Elements (Элементы): Далее идёт базовая стилизация элементов HTML. Это неклассифицированные селекторы, определяющие базовые стили для стандартных HTML-тегов.
▪️Objects (Объекты): Этот слой определяет многократно используемые шаблоны дизайна и структуры макета. Он сосредоточен на создании объектов, содержащих специфическое поведение стилей, что способствует модульности и возможности повторного использования.
▪️Components (Компоненты): На этом слое выполняется стилизация конкретных компонентов пользовательского интерфейса. Этот слой реализует большую часть стилизации приложения, обеспечивая чёткое разделение задач.
▪️Trumps (Козыри): Вершина перевёрнутого треугольника, слой Trumps, имеет дело с утилитарными классами и переопределением стилей. Он позволяет вносить специфические изменения и тонкие настройки, не нарушая целостности нижних слоёв.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
Анимация в веб-интерфейсе, влияние на UX
#почитать
⏱ Читать статью
#почитать
Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2🔥1
"Заявляю: Мы, как цивилизация, разучились использовать центрирование"
#почитать
⏱ Читать статью
#почитать
Плохое выравнивание может испортить прекрасный интерфейс. И напротив, с правильно выровненным текстом ваш интерфейс обретёт утончённую красоту. Даже если это трудно. Даже если инструменты создают неудобства. Даже если приходится искать решения. Я верю, что вместе мы можем разобраться, как засунуть один прямоугольник в другой ровно.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉7👍4🔥1
Почему AVIF вместо JPEG, WebP, PNG и GIF
#почитать
⏱ Читать статью
#почитать
Вам может не нравиться стиль каких-то артефактов изображения, но если это означает, что кто-то сможет быстрее загрузить сайт в поезде или с низкой задержкой, то вам придется пойти на компромисс. Конечная цель — предоставить пользователю наименьшую полезную нагрузку в пределах разумного.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍4🔥2
Изменить цвета и кнопки сервиса — и не сломать дизайн-систему
#почитать
⏱ Читать статью
#почитать
В прошлом году нам понадобилось полностью изменить внешний вид нашего сервиса. Разработчики и дизайнеры интерфейсов часто сталкиваются с подобными задачами: есть уже работающий сервис, но его нужно стилизовать, например, в случае ребрендинга.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤2