Базовые стили и полезные CSS-сниппеты
6 мин
В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
Атрибуты HTML, которыми вы никогда не пользовались
10 мин
Перевод
В январе этого года Мэдисон Канна спросила у своих подписчиков в Twitter:
Какие языки/технологии вам бы хотелось изучить или узнать глубже в этом году?
Мой выбор: typescript, next.js, react, graphql, solidity, node — Мэдисон Канна (@Madisonkanna) January 3, 2022
Мой ответ был очень простым: HTML. И я ни в коей мере не был саркастичным или насмешливым. Разумеется, я неплохо знаю, какие теги использовать в каких случаях и как обеспечивать семантику и доступность моего HTML.
Однако существует целая куча малоиспользуемых атрибутов, о которых я забыл, и, вероятно, целая куча атрибутов, о существовании которых я и не знал. Этот пост стал результатом моих исследований, и я надеюсь, что он окажется для вас полезным при создании страниц на HTML.
Лучшие бесплатные коллекции векторных иконок
2 мин
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.
Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах:
В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.
Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах:
@font-face, SVG, EPS, AI, PSD, Sketch.В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.
Responsive Icons (100 иконок, PSD, AI, EPS, SVG)
Демо Nokia Maps 3D (WebGL)
1 мин
Команда разработчиков Nokia Research Center выкатила по-настоящему удивительное демо картографического сервиса на WebGL. Кроме красоты самой 3D-модели, вызывает восхищение минимальное потребление CPU при рендеринге, плавный скроллинг и больше всего — возможность произвольно менять угол зрения и вращать модель.
Возможно, в будущем этот проект придёт на смену нынешнему сервису Nokia Maps. Жаль, что основного разработчика движка данного сервиса — компанию C3 Technologies — недавно поглотила Apple, так что на продление соглашения с Nokia можно не рассчитывать.
Возможно, в будущем этот проект придёт на смену нынешнему сервису Nokia Maps. Жаль, что основного разработчика движка данного сервиса — компанию C3 Technologies — недавно поглотила Apple, так что на продление соглашения с Nokia можно не рассчитывать.
Несколько «добрых» слов о текущей версии редактора Habr
Простой
7 мин
Мнение
"И так сойдет" ((c) М/Ф "Вовка в 3/9 царстве")
"Работает - не чини" ((c) вольный перевод афоризма Б.Ланса "If it ain't broke, don't fix it")
К появлению этой статьи привело совпадение нескольких событий.
Блокнот в Windows получил первое значимое обновление за два десятилетия
2 мин
Причина, по которой Блокнот (он же Notepad) постигла участь гадкого утенка, уже давно мало кого интересовала. Пока не произошло неожиданное…
В это трудно поверить, но Блокнот — одно из самых известных, древних и одновременно самых простых приложений Microsoft — ждет весьма объемное обновление. Важно отметить, что эта программа (из комплекта базовой поставки большинства всех версий Windows) почти четверть века кочевала из одного выпуска операционной системы в другой практически без каких-либо изменений.
Сложно сказать, что случилось в Microsoft, сдохли ли волки в личном зоопарке одного из топ-менеджеров или кто-то случайно встал «с той ноги»… Но после недавнего внезапного внедрения поддержки юниксового перевода строки, в корпорации видимо решили не останавливаться на достигнутом…
В это трудно поверить, но Блокнот — одно из самых известных, древних и одновременно самых простых приложений Microsoft — ждет весьма объемное обновление. Важно отметить, что эта программа (из комплекта базовой поставки большинства всех версий Windows) почти четверть века кочевала из одного выпуска операционной системы в другой практически без каких-либо изменений.
Сложно сказать, что случилось в Microsoft, сдохли ли волки в личном зоопарке одного из топ-менеджеров или кто-то случайно встал «с той ноги»… Но после недавнего внезапного внедрения поддержки юниксового перевода строки, в корпорации видимо решили не останавливаться на достигнутом…
Пора убить веб
11 мин
Перевод
Что-то происходит. Люди недовольны. Призрак гражданских беспорядков преследует наши программистские сообщества.
Впервые значимое число веб-разработчиков открыто ставят под сомнение веб-платформу. Вот характерная статья и обсуждение. Вот другая статья. И ещё одна. Я бы мог перечислить и больше, но если вы достаточно интересуетесь программированием, чтобы читать эту статью, то наверняка уже читали в этом году хотя бы одну напыщенную декламацию о современном состоянии веб-разработки. Эта статья не из таких. Я не могу соревноваться в издевательствах над существующим статусом-кво с людьми, которым приходится заниматься веб-разработкой каждый день. Это другая статья.
Это ты, хакер фронтенда
Впервые значимое число веб-разработчиков открыто ставят под сомнение веб-платформу. Вот характерная статья и обсуждение. Вот другая статья. И ещё одна. Я бы мог перечислить и больше, но если вы достаточно интересуетесь программированием, чтобы читать эту статью, то наверняка уже читали в этом году хотя бы одну напыщенную декламацию о современном состоянии веб-разработки. Эта статья не из таких. Я не могу соревноваться в издевательствах над существующим статусом-кво с людьми, которым приходится заниматься веб-разработкой каждый день. Это другая статья.
Это ты, хакер фронтенда
Вышел Bootstrap 5: оцениваем 7 главных нововведений
4 мин
Перевод
Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.
Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.
CSS 3 Timing Functions и с чем их едят
15 мин
Перевод
Хей народ, пристегните ремни и держитесь покрепче, ибо наступил действительно волнительный момент: вам предстоит разобраться в тонкостях чрезвычайно интересных временных функций CSS!
Окей, ваша кровь, конечно, вряд ли закипела от предмета данной статьи, но шутки в сторону: временные функции — своего рода скрытая жемчужина, когда дело касается CSS, и, вполне вероятно, вы удивитесь тому, сколько всего интересного с помощью них можно сделать.
Насилие над DHTML и вывод JavaScript на десктоп. Реставрация старых игр. Сборка web-приложений
12 мин
Туториал
Реставрация старых игр
Привет Хабра! Это статья первая из цикла статей о игровом движке StalinGrad. Начну повесть о нем из далека, рассмотрев предпосылки для его создания. В статье речь пойдет о том, как делать игры, конвертировать JS -> APK, и прочих трудностях и проблемах.
Пример до реставрации и после (а еще для Android`a):
Responsive Email Design, или Как прочитать письмо на холодильнике
9 мин
Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.
Требования
С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:
- письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
- они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
- нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
- редактирование компонентов, которые применяются еще в 50 шаблонах писем;
- необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).
Modest — разработка открытого движка HTML рендера на «голом» Си
5 мин
Всем привет! Меня зовут Александр Борисов и я разрабатываю Modest — открытый движок HTML-рендера на «голом» Си без использования внешних зависимостей (далее движок). Сразу хочется пояснить, что значит «без внешних зависимостей» — весь код пишется с нуля, код нигде не заимствован.
После моей последней публикации прошло немало времени. За это время многое изменилось и я хочу поделиться с вами достижениями в разработке.
После моей последней публикации прошло немало времени. За это время многое изменилось и я хочу поделиться с вами достижениями в разработке.
Языки пламени в CSS
2 мин
Прочитав статью про капельное преобразование в CSS, я решил поиграться с настройками в коде примера на CodePen и случайно выделил движущиеся блоки. Мне это показалось красивым и похожим на процесс горения. После недолгих размышлений код был кустарным образом распилен на части, сдобрен прозрачностью фона, анимацией и цветными тенями, и вот, что из этого получилось.
Ближайшие события
Несколько интересностей и полезностей для веб-разработчика #36
5 мин
Доброго времени суток, уважаемые хабравчане. Поздравляю всех с наступившим 2015 годом! За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.
Лучшее от Codrops за 2014 год
Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.
Сайт на с++ (CppCMS). Часть 1
24 мин
Туториал
Здравствуй уважаемый %username%.
Сегодня я хотел бы поделиться с тобой личным опытом в создании Web сайта на CppCMS (библиотека-шаблонизатор на с++). Можно назвать это «помощью начинающему программисту на CppCMS».
Доводы за и против такого решения могут быть весьма разнообразны и, что бы не спровоцировать войну «языковых школ», я проведу аналогию с автомобилями: «Я купил этот. Нравится. Езжу. Продавать не хочу!».
Из дополнительных аргументов будет то, что данный язык является профильным для моего рабочего места.
Сегодня я хотел бы поделиться с тобой личным опытом в создании Web сайта на CppCMS (библиотека-шаблонизатор на с++). Можно назвать это «помощью начинающему программисту на CppCMS».
Зачем писать сайт на с++
Доводы за и против такого решения могут быть весьма разнообразны и, что бы не спровоцировать войну «языковых школ», я проведу аналогию с автомобилями: «Я купил этот. Нравится. Езжу. Продавать не хочу!».
Из дополнительных аргументов будет то, что данный язык является профильным для моего рабочего места.
Всем, всем, всем: время обновлять свой CSS3
6 мин
Туториал
Перевод
Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.
Красивые чекбоксы и радиокнопки на CSS3 без JavaScript
1 мин
Туториал
Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.
Демонстрация Скачать исходники
Демонстрация Скачать исходники
«Паскалевская графика на HTML5» или «Что Opera сделала с Rainbow Dash»
1 мин
Увидел на тематическом сайте, посвящённом сериалу My Little Pony код на Turbo Pascal, использующий старинный модуль Graph и рисующий нескольких персонажей.
Код содержал только вызовы функций и комментарии, javascript отлично его парсил. Осталось только дописать свои графические функции.
Финальная версия
Код содержал только вызовы функций и комментарии, javascript отлично его парсил. Осталось только дописать свои графические функции.
Финальная версия
Как сделать собственный видео-плеер на HTML5 Video
9 мин
Туториал
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.
Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.
Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.
<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
Numl – Альтернативный язык разметки и стилизации для веб
20 мин
Всем привет! Меня зовут Андрей, я профессионально разрабатываю веб-интерфейсы уже больше 11 лет и последний год развиваю проект Numl, который можно назвать языком разметки и стилизации для веб. В этой статье я расскажу, как в попытке перебороть ряд особенностей CSS и упростить вёрстку веб-проектов получился целый язык, который не только удовлетворил все наши потребности в стилизации, но также позволил уменьшить кол-во JS-кода и улучшить доступность.
