Здесь собраны лучшие и самые полезные репозитории Github, которые будут служить вам долгое время.
User
10 современных раскладок в одну строку CSS-кода
7 min
Translation
В данной статье рассматривается несколько эффективных строк CSS-кода, которые выполняют серьезную работу и помогают создавать надёжную современную разметку.
[В закладки] 13 онлайн-редакторов для фото, изображений и другой графики
8 min
Если вам нужно быстро обработать фото для рекламы или запилить классную картинку для Фейсбука, необязательно смотреть туториалы по Фотошопу или просить друга-дизайнера помочь. Есть много сервисов, которые помогут сделать неплохую картинку с минимальными усилиями (иногда в несколько кликов).
Собрали подборку таких сервисов с кратким описанием функционала и основных нюансов. Подборка будет особенно полезна тем, кому нужно работать с графикой регулярно (SMMщики, таргетологи и т. д.).
Критерии качества вёрстки 2021
32 min
6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.
С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.
Сейчас пришло время обсудить с сообществом обновлённые критерии.
В посте — система, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Приглашаем к обсуждению всех, кто занимается веб-разработкой.
Практика использования спецификации CSS Scroll Snap
11 min
Translation
Часто ли у вас возникало желание воспользоваться какой-нибудь возможностью CSS, позволяющей, без лишних усилий, создать элемент-контейнер, поддерживающий прокрутку? CSS, что очень хорошо, даёт нам такую возможность. Я, когда только начинал заниматься фронтенд-разработкой, пользовался для создания прокручиваемых элементов JavaScript-плагинами. Но иногда нужно что-то такое, что позволяет создавать подобные элементы просто и быстро, без привлечения JavaScript. Сделать это можно, воспользовавшись спецификацией CSS Scroll Snap.
Здесь я хочу раскрыть основы практического использования этой спецификации. Я сам только недавно разобрался с CSS Scroll Snap, поэтому рассказывать всё это буду, так сказать, «по горячим следам».
Здесь я хочу раскрыть основы практического использования этой спецификации. Я сам только недавно разобрался с CSS Scroll Snap, поэтому рассказывать всё это буду, так сказать, «по горячим следам».
HTML трюки
2 min
Translation
1. Атрибут `loading=lazy`
Совет по производительности. Вы можете использовать атрибут
loading = lazy, чтобы отложить загрузку изображения до тех пор, пока пользователь не домотает до них. <img src='image.jpg' loading='lazy' alt='Alternative Text'> 
Полное руководство по CSS Flex + опыт использования
6 min
Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него.
Когда я начал изучать Flex, я хотел увидеть все, на что он способен. Но мне не удалось найти подробное руководство с примерами всех возможностей. Поэтому я решил самостоятельно создать диаграммы свойств Flex с «высоты птичьего полета».
Как избавиться от разрыва кадров и задержки ввода в играх
6 min
Translation
Разрыв кадров (screen tear) или задержка ввода (input lag)? Использовать ли vsync? Очень долгое время в мире игр для PC это был вопрос «или-или». Можно добиться или картинки без разрыва кадров, или низкой задержки ввода. Но невозможно получить и то, и другое. Или можно?
Ответ на этот вопрос неоднозначен. Если у вас уже есть современный игровой монитор с поддержкой переменной частоты обновления (FreeSync или G-Sync), то вам эта статья вообще не нужна. Но если у вас обычный монитор с постоянной частотой обновления или если вы любите играть в игры на телевизоре, то данная статья поможет вам снизить разрыв кадров и задержку ввода.
Используя ограничение кадров с миллисекундной точностью в RTSS (Rivatuner Statistics Server), можно обеспечить vsync с низкой задержкой. Что мы получим в результате? Чёткую картинку без разрывов кадров и задержку ввода на 50 мс меньше, чем при обычном vsync.
Это одно из тех немногих улучшений PC, которые могут значительно повысить удобство в играх с минимальными компромиссами и совершенно бесплатно. Что же это такое? И как этого добиться? В этой статье мы расскажем всё подробно и шаг за шагом.
Бесплатные хостинги для веб-разработчиков
4 min
Привет, Хабр!
Одним из наиболее популярных направлений разработки сегодня является веб. И когда нужно разместить свой проект где-нибудь, кроме localhost, многие сталкиваются с трудностями, ведь хостинг должен быть быстрым, удобным и, желательно, бесплатным :)
В этом списке вы найдете 15 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!
Как выбрать красивые цвета для вашей инфографики
10 min
Tutorial
Translation
Очень трудно выбрать хорошие цвета для инфографики. Постараемся разобраться с этой проблемой.
Прочитав эту статью, вы почувствуете себя более уверенно в выборе цвета. А если у вас вообще нет чувства цвета, то это просто рекомендации по хорошим сочетаниям. Поговорим о распространённых цветовых ошибках, которые нас окружают повсеместно, и как их избежать.
Статья не поможет найти хорошие градиенты или оттенки. Она предназначена для подбора красивых, чётких цветов для различных категорий информации (например, континентов, отраслей промышленности, видов птиц) в линейных, круговых, полосковых диаграммах и так далее.
Как облегчить себе жизнь при использовании Git (а также подборка материалов для глубокого погружения)
13 min
Translation
Tree of Dragons II by surrealistguitarist
Для тех, кто каждый день использует Git, но чувствует себя неуверенно, команда Mail.ru Cloud Solutions перевела статью фронтенд-разработчика Шейна Хадсона. Здесь вы найдете несколько трюков и советов, которые могут немного облегчить работу с Git, а также подборку статей и мануалов более продвинутого уровня.
70 вопросов по JavaScript для подготовки к собеседованию
43 min
Translation
Доброго времени суток, друзья!
Надеюсь, эта статья будет полезна как начинающим разработчикам, так и опытным.
В вопросах, которые показались мне сложнее прочих, приведены ссылки на дополнительную литературу.
Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.
Итак, поехали.
Надеюсь, эта статья будет полезна как начинающим разработчикам, так и опытным.
В вопросах, которые показались мне сложнее прочих, приведены ссылки на дополнительную литературу.
Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.
Итак, поехали.
Хабрарейтинг 2020: статистика и рейтинг лучших статей за 2020 год
9 min
Привет, Хабр.
Заканчивается 2020 год, а значит, настало время подвести статистические итоги и составить уже традиционный рейтинг лучших статей Хабра за этот год. Этот рейтинг не является официальным, данные собираются парсером с помощью Python. Сортируя данные по тем или иным параметрам, можно получать разные выборки, что на мой взгляд, даёт довольно неплохие результаты. Для читателей также может быть интересно перечитать какие-то статьи, которые они пропустили в течении года.
Поехали.
Заканчивается 2020 год, а значит, настало время подвести статистические итоги и составить уже традиционный рейтинг лучших статей Хабра за этот год. Этот рейтинг не является официальным, данные собираются парсером с помощью Python. Сортируя данные по тем или иным параметрам, можно получать разные выборки, что на мой взгляд, даёт довольно неплохие результаты. Для читателей также может быть интересно перечитать какие-то статьи, которые они пропустили в течении года.
Поехали.
CSS var в rgba или удобное использование цветов в Sass
3 min
Эта статья посвящена обзору моих наработок в Sass, которые облегчают жизнь при работе с цветами во время верстки. Мы рассмотрим 3 подхода, которые воедино принесут комфорт в работу с цветами. Имя только список цветов в HEX формате.
Стабилизация растений для ленивых романтиков. Ну и гиков тоже
8 min
Думаю, это очень классная история, когда ты подарил цветы, а они не вянут целый год!
Стабилизированное растение больше напоминает свежесрезанный цветок, чем мумифицированный остов из гербария. Оно остается эластичным — его можно трогать, не боясь, что растение рассыплется от прикосновения.
В основе стабилизации нет никакого чуда: обычные законы физики и биохимии, простые ингредиенты и широкий простор для экспериментов. Хотя у производителей остаются свои секреты.
Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда
14 min
Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.
Содержание:
- Кто такой фронтендер и чем он занимается?
- С чего начать и что читать? Чек-лист обучения
- Какие трудности могут быть? Ошибки в начале пути
- Подготовка к собеседованию на Junior-разработчика
Адаптивный дизайн высоты
7 min
Tutorial
Translation
Возможно, вы думаете о том, почему я выбрал такой заголовок. Адаптивный дизайн высоты, серьезно? Ну, термин адаптивный веб-дизайн часто описывается как проверка браузера на нескольких вариантах ширины области просмотра и размеров устройств. Сайт всегда тестируется горизонтально — на уменьшение ширины, но я редко вижу какие-то соображения для тестирования вертикально — на уменьшение высоты. В глубине вашего сознания возникает вопрос: нужно ли уменьшать высоту браузера? Да, и я буду убеждать вас в этом здесь. Когда мы работаем над реализацией веб-сайта, делать предположения вне зависимости от данных реального мира нехорошо. Крайне важно взять на себя ответственность за тестирование как по горизонтали, так и по вертикали.
Переменные CSS — курс молодого бойца
12 min
Tutorial
Translation
Переменные CSS (также известные как настраиваемые свойства) поддерживаются браузерами почти 4 года. Мне нравится применять их в зависимости от проекта или ситуации. Они очень полезны и просты в использовании, но зачастую фронтенд разработчик неправильно использует или неправильно понимает их.
Основная цель статьи: я хочу иметь место, где собрано все, что я знаю о переменных CSS, чтобы узнать и понять больше. Здесь вы прочитаете обо всем, что должны знать о переменных CSS, включая примеры применения в коде. Вы готовы? Тогда погружаемся.
Выбор CSS макета — Grid или Flexbox?
9 min
Translation
Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли.
В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в создании макета. Вместе же они формируют четыре основных раздела страницы – заголовок/баннер, поисковый блок, содержимое и нижний колонтитул.
Языки программирования помогают сделать сайты «живыми», но в основе каждой страницы по-прежнему лежит старый добрый HTML. При рассмотрении макетов необходимо учитывать факторы, определяющие их качество, а именно отзывчивость, порты просмотра, устройства отображения, браузеры и размеры экранов пользователей. Грамотный макет не только здорово смотрится, но также может сохранять задуманную структуру, вписываясь в экраны с любым возможным соотношением сторон. Как раз за эту подстройку и отвечает CSS. В текущей статье мы в общих чертах рассмотрим два его мощнейших инструмента: Flexbox и Grid.
Визуализация данных при отладке в Visual Studio Code
2 min
Вообще Debugger Visualizers для обычного Visual Studio — это очень старая тема (статья 2009 года), но не очень популярная. В большинстве случаев принято учить сразу дебажить, представляя процессы в голове, а штуки вроде сортировок и списков показываются на доске. В вебе часто визуальную часть предоставляет браузер, и все всем довольны. Но бывает, что списки или деревья в голове уже не умещаются, таблицы хочется отсортировать, а графики строить не выходя из среды отладки. Для всего этого и был создан плагин для VS Code — Debug Visualizer.